@jbrowse/plugin-alignments 2.3.1 → 2.3.3

package/src/LinearReadArcsDisplay/model.tsx

@@ -65,6 +65,11 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
          */
         lineWidth: types.maybe(types.number),
 
+        /**
+         * #property
+         */
+        jitter: types.maybe(types.number),
+
         /**
          * #property
          */
@@ -175,6 +180,15 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       setLineWidth(n: number) {
         self.lineWidth = n
       },
+
+      /**
+       * #action
+       * jitter val, helpful to jitter the x direction so you see better evidence when e.g. 100
+       * long reads map to same x position
+       */
+      setJitter(n: number) {
+        self.jitter = n
+      },
     }))
 
     .views(self => {
@@ -190,6 +204,13 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         get lineWidthSetting() {
           return self.lineWidth ?? getConf(self, 'lineWidth')
         },
+
+        /**
+         * #getter
+         */
+        get jitterVal(): number {
+          return self.jitter ?? getConf(self, 'jitter')
+        },
         /**
          * #getter
          */
@@ -245,6 +266,30 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                 },
               ],
             },
+            {
+              label: 'Jitter x-positions',
+              subMenu: [
+                {
+                  type: 'checkbox',
+                  checked: this.jitterVal === 0,
+                  label: 'None',
+                  onClick: () => self.setJitter(0),
+                },
+                {
+                  type: 'checkbox',
+                  checked: this.jitterVal === 2,
+                  label: 'Small',
+                  onClick: () => self.setJitter(2),
+                },
+                {
+                  type: 'checkbox',
+                  checked: this.jitterVal === 10,
+                  label: 'Large',
+                  onClick: () => self.setJitter(10),
+                },
+              ],
+            },
+
             {
               label: 'Draw inter-region vertical lines',
               type: 'checkbox',

package/src/LinearReadCloudDisplay/drawFeats.ts

@@ -1,5 +1,5 @@
 import { getConf } from '@jbrowse/core/configuration'
-import { getContainingView } from '@jbrowse/core/util'
+import { getContainingView, getSession } from '@jbrowse/core/util'
 
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 // locals
@@ -60,9 +60,15 @@ export default async function drawFeats(
   if (!chainData) {
     return
   }
+  const { assemblyManager } = getSession(self)
   const featureHeight = getConf(self, 'featureHeight')
   const displayHeight = self.height
   const view = getContainingView(self) as LGV
+  const assemblyName = view.assemblyNames[0]
+  const asm = assemblyManager.get(assemblyName)
+  if (!asm) {
+    return
+  }
 
   self.setLastDrawnOffsetPx(view.offsetPx)
 
@@ -76,22 +82,13 @@ export default async function drawFeats(
     if (chain[0].flags & 1 && chain.length > 1) {
       const v0 = chain[0]
       const v1 = chain[1]
-      const r1s = view.bpToPx({
-        refName: v0.refName,
-        coord: v0.start,
-      })
-      const r1e = view.bpToPx({
-        refName: v0.refName,
-        coord: v0.end,
-      })
-      const r2s = view.bpToPx({
-        refName: v1.refName,
-        coord: v1.start,
-      })
-      const r2e = view.bpToPx({
-        refName: v1.refName,
-        coord: v1.end,
-      })
+      const ra1 = asm.getCanonicalRefName(v0.refName)
+      const ra2 = asm.getCanonicalRefName(v1.refName)
+      const r1s = view.bpToPx({ refName: ra1, coord: v0.start })
+      const r1e = view.bpToPx({ refName: ra1, coord: v0.end })
+      const r2s = view.bpToPx({ refName: ra2, coord: v1.start })
+      const r2e = view.bpToPx({ refName: ra2, coord: v1.end })
+
       let distance = 0
 
       if (
@@ -121,22 +118,13 @@ export default async function drawFeats(
       for (let i = 1; i < chain.length; i++) {
         const v0 = chain[i - 1]
         const v1 = chain[i]
-        const r1s = view.bpToPx({
-          refName: v0.refName,
-          coord: v0.start,
-        })
-        const r1e = view.bpToPx({
-          refName: v0.refName,
-          coord: v0.end,
-        })
-        const r2s = view.bpToPx({
-          refName: v1.refName,
-          coord: v1.start,
-        })
-        const r2e = view.bpToPx({
-          refName: v1.refName,
-          coord: v1.end,
-        })
+        const ra1 = asm.getCanonicalRefName(v0.refName)
+        const ra2 = asm.getCanonicalRefName(v1.refName)
+        const r1s = view.bpToPx({ refName: ra1, coord: v0.start })
+        const r1e = view.bpToPx({ refName: ra1, coord: v0.end })
+        const r2s = view.bpToPx({ refName: ra2, coord: v1.start })
+        const r2e = view.bpToPx({ refName: ra2, coord: v1.end })
+
         let distance = 0
 
         if (

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { Feature } from '@jbrowse/core/util'
 import { Tooltip } from '@jbrowse/plugin-wiggle'
 
 type Count = {
@@ -29,80 +29,83 @@ type SNPInfo = {
 const en = (n: number) => n.toLocaleString('en-US')
 const toP = (s = 0) => +(+s).toFixed(1)
 const pct = (n: number, total: number) => `${toP((n / (total || 1)) * 100)}%`
+interface Props {
+  feature: Feature
+}
+const TooltipContents = React.forwardRef<HTMLDivElement, Props>(function (
+  { feature },
+  reactRef,
+) {
+  const start = feature.get('start')
+  const end = feature.get('end')
+  const name = feature.get('refName')
+  const {
+    refbase,
+    all,
+    total,
+    ref,
+    '-1': rn1,
+    '1': r1,
+    '0': r0,
+    ...info
+  } = feature.get('snpinfo') as SNPInfo
+  const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
+    .filter(f => !!f)
+    .join(':')
 
-const TooltipContents = React.forwardRef<HTMLDivElement, { feature: Feature }>(
-  ({ feature }, reactRef) => {
-    const start = feature.get('start')
-    const end = feature.get('end')
-    const name = feature.get('refName')
-    const {
-      refbase,
-      all,
-      total,
-      ref,
-      '-1': rn1,
-      '1': r1,
-      '0': r0,
-      ...info
-    } = feature.get('snpinfo') as SNPInfo
-    const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
-      .filter(f => !!f)
-      .join(':')
-
-    return (
-      <div ref={reactRef}>
-        <table>
-          <caption>{loc}</caption>
-          <thead>
-            <tr>
-              <th>Base</th>
-              <th>Count</th>
-              <th>% of Total</th>
-              <th>Strands</th>
-              <th>Source</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Total</td>
-              <td>{all}</td>
-            </tr>
-            <tr>
-              <td>REF {refbase ? `(${refbase.toUpperCase()})` : ''}</td>
-              <td>{ref}</td>
-              <td>{pct(ref, all)}</td>
-              <td>
-                {rn1 ? `${rn1}(-)` : ''}
-                {r1 ? `${r1}(+)` : ''}
-              </td>
-              <td />
-            </tr>
+  return (
+    <div ref={reactRef}>
+      <table>
+        <caption>{loc}</caption>
+        <thead>
+          <tr>
+            <th>Base</th>
+            <th>Count</th>
+            <th>% of Total</th>
+            <th>Strands</th>
+            <th>Source</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Total</td>
+            <td>{all}</td>
+          </tr>
+          <tr>
+            <td>REF {refbase ? `(${refbase.toUpperCase()})` : ''}</td>
+            <td>{ref}</td>
+            <td>{pct(ref, all)}</td>
+            <td>
+              {rn1 ? `${rn1}(-)` : ''}
+              {r1 ? `${r1}(+)` : ''}
+            </td>
+            <td />
+          </tr>
 
-            {Object.entries(info as unknown as Record<string, Count>).map(
-              ([key, entry]) =>
-                Object.entries(entry).map(([base, score]) => (
-                  <tr key={base}>
-                    <td>{base.toUpperCase()}</td>
-                    <td>{score.total}</td>
-                    <td>
-                      {base === 'total' || base === 'skip'
-                        ? '---'
-                        : pct(score.total, all)}
-                    </td>
-                    <td>
-                      {score['-1'] ? `${score['-1']}(-)` : ''}
-                      {score['1'] ? `${score['1']}(+)` : ''}
-                    </td>
-                    <td>{key}</td>
-                  </tr>
-                )),
-            )}
-          </tbody>
-        </table>
-      </div>
-    )
-  },
-)
+          {Object.entries(info as unknown as Record<string, Count>).map(
+            ([key, entry]) =>
+              Object.entries(entry).map(([base, score]) => (
+                <tr key={base}>
+                  <td>{base.toUpperCase()}</td>
+                  <td>{score.total}</td>
+                  <td>
+                    {base === 'total' || base === 'skip'
+                      ? '---'
+                      : pct(score.total, all)}
+                  </td>
+                  <td>
+                    {score['-1'] ? `${score['-1']}(-)` : ''}
+                    {score['1'] ? `${score['1']}(+)` : ''}
+                  </td>
+                  <td>{key}</td>
+                </tr>
+              )),
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+})
 
 type Coord = [number, number]
 

package/src/LinearSNPCoverageDisplay/models/{configSchema.test.js → configSchema.test.ts}

@@ -9,11 +9,13 @@ beforeEach(() => {
 })
 
 afterEach(() => {
+  // @ts-ignore
   console.warn.mockRestore()
 })
 // change renderer
 class SNPCoverageRendererPlugin extends Plugin {
-  install(pluginManager) {
+  name = 'SNPCoverageRendererPlugin'
+  install(pluginManager: PluginManager) {
     SNPCoverageRenderer(pluginManager)
   }
 }

package/src/PileupRPC/methods/GetGlobalValueForTag.ts

@@ -3,6 +3,9 @@ import { Region } from '@jbrowse/core/util'
 import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { toArray } from 'rxjs/operators'
+import { firstValueFrom } from 'rxjs'
+
+// locals
 import PileupBaseRPC from '../base'
 import { getTag } from '../../util'
 
@@ -28,7 +31,7 @@ export default class PileupGetGlobalValueForTag extends PileupBaseRPC {
     ).dataAdapter as BaseFeatureDataAdapter
 
     const features = dataAdapter.getFeaturesInMultipleRegions(regions)
-    const featuresArray = await features.pipe(toArray()).toPromise()
+    const featuresArray = await firstValueFrom(features.pipe(toArray()))
     return [
       ...new Set(
         featuresArray

package/src/PileupRPC/methods/GetReducedFeatures.ts

@@ -3,7 +3,7 @@ import { Region, dedupe } from '@jbrowse/core/util'
 import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { toArray } from 'rxjs/operators'
-
+import { firstValueFrom } from 'rxjs'
 // locals
 import { filterForPairs, getInsertSizeStats } from '../util'
 import { ReducedFeature } from '../../shared/fetchChains'
@@ -31,10 +31,9 @@ export default class PileupGetReducedFeatures extends PileupBaseRPC {
       await getAdapter(this.pluginManager, sessionId, adapterConfig)
     ).dataAdapter as BaseFeatureDataAdapter
 
-    const featuresArray = await dataAdapter
-      .getFeaturesInMultipleRegions(regions, des)
-      .pipe(toArray())
-      .toPromise()
+    const featuresArray = await firstValueFrom(
+      dataAdapter.getFeaturesInMultipleRegions(regions, des).pipe(toArray()),
+    )
 
     const reduced = dedupe(
       featuresArray.map(f => ({

package/src/PileupRPC/methods/GetVisibleModifications.ts

@@ -3,6 +3,7 @@ import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { Region } from '@jbrowse/core/util'
 import { toArray } from 'rxjs/operators'
+import { firstValueFrom } from 'rxjs'
 
 // locals
 import { getModificationTypes } from '../../MismatchParser'
@@ -29,10 +30,9 @@ export default class PileupGetVisibleModifications extends PileupBaseRPC {
       await getAdapter(this.pluginManager, sessionId, adapterConfig)
     ).dataAdapter as BaseFeatureDataAdapter
 
-    const featuresArray = await dataAdapter
-      .getFeaturesInMultipleRegions(regions)
-      .pipe(toArray())
-      .toPromise()
+    const featuresArray = await firstValueFrom(
+      dataAdapter.getFeaturesInMultipleRegions(regions).pipe(toArray()),
+    )
 
     const uniqueValues = new Set<string>()
     featuresArray.forEach(f => {

package/src/SNPCoverageAdapter/SNPCoverageAdapter.ts

@@ -6,6 +6,9 @@ import { AugmentedRegion as Region } from '@jbrowse/core/util/types'
 import SimpleFeature, { Feature } from '@jbrowse/core/util/simpleFeature'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { toArray } from 'rxjs/operators'
+import { firstValueFrom } from 'rxjs'
+
+// locals
 import generateCoverageBins from './generateCoverageBins'
 import { fetchSequence } from '../util'
 
@@ -43,10 +46,9 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
   getFeatures(region: Region, opts: BaseOptions = {}) {
     return ObservableCreate<Feature>(async observer => {
       const { subadapter } = await this.configure()
-      const feats = await subadapter
-        .getFeatures(region, opts)
-        .pipe(toArray())
-        .toPromise()
+      const feats = await firstValueFrom(
+        subadapter.getFeatures(region, opts).pipe(toArray()),
+      )
 
       const { bins, skipmap } = await generateCoverageBins(
         feats,

package/src/index.test.ts

@@ -4,7 +4,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(), new SVG()])
   pluginManager.createPluggableElements()
   pluginManager.configure()

package/src/util.ts

@@ -2,6 +2,7 @@ import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { toArray } from 'rxjs/operators'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { AugmentedRegion } from '@jbrowse/core/util'
+import { firstValueFrom } from 'rxjs'
 // get tag from BAM or CRAM feature, where CRAM uses feature.get('tags') and
 // BAM does not
 export function getTag(feature: Feature, tag: string) {
@@ -86,14 +87,15 @@ export async function fetchSequence(
 ) {
   const { end, originalRefName, refName } = region
 
-  const feats = await adapter
-    .getFeatures({
-      ...region,
-      refName: originalRefName || refName,
-      end: end + 1,
-    })
-    .pipe(toArray())
-    .toPromise()
+  const feats = await firstValueFrom(
+    adapter
+      .getFeatures({
+        ...region,
+        refName: originalRefName || refName,
+        end: end + 1,
+      })
+      .pipe(toArray()),
+  )
   return feats[0]?.get('seq')
 }
 

package/src/PileupRenderer/components/PileupRendering.test.js

@@ -1,21 +0,0 @@
-import PrecomputedLayout from '@jbrowse/core/util/layouts/PrecomputedLayout'
-import React from 'react'
-import { render } from '@testing-library/react'
-import PileupRendering from './PileupRendering'
-
-// these tests do very little, let's try to expand them at some point
-test('one', () => {
-  const { container } = render(
-    <PileupRendering
-      width={500}
-      height={500}
-      regions={[{ refName: 'zonk', start: 1, end: 3 }]}
-      layout={new PrecomputedLayout({ rectangles: {}, totalHeight: 20 })}
-      displayModel={{}}
-      bpPerPx={3}
-      config={{ type: 'DummyRenderer' }}
-    />,
-  )
-
-  expect(container.firstChild).toMatchSnapshot()
-})

package/src/PileupRenderer/components/__snapshots__/PileupRendering.test.js.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`one 1`] = `
-<div
-  class="PileupRendering"
-  data-testid="pileup-normal"
-  style="position: relative; width: 500px; height: 500px;"
->
-  <canvas
-    data-testid="prerendered_canvas"
-    height="500"
-    style="width: 500px; height: 500px; position: absolute; left: 0px; top: 0px;"
-    width="500"
-  />
-  <canvas
-    class="highlightOverlayCanvas"
-    data-testid="pileup_overlay_canvas"
-    height="600"
-    style="position: absolute; left: 0px; top: 0px;"
-    width="500"
-  />
-</div>
-`;