@jbrowse/plugin-alignments 1.7.11 → 2.1.0

package/src/PileupRenderer/PileupRenderer.tsx

@@ -1,4 +1,4 @@
-import Color from 'color'
+import { Theme } from '@mui/material/styles'
 import BoxRendererType, {
   RenderArgs,
   RenderArgsSerialized,
@@ -7,7 +7,6 @@ import BoxRendererType, {
   ResultsSerialized,
   ResultsDeserialized,
 } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
-import { Theme } from '@material-ui/core'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import {
   bpSpanPx,
@@ -64,11 +63,13 @@ function fillRect(
 }
 
 function getColorBaseMap(theme: Theme) {
+  // @ts-ignore
+  const { bases } = theme.palette
   return {
-    A: theme.palette.bases.A.main,
-    C: theme.palette.bases.C.main,
-    G: theme.palette.bases.G.main,
-    T: theme.palette.bases.T.main,
+    A: bases.A.main,
+    C: bases.C.main,
+    G: bases.G.main,
+    T: bases.T.main,
     deletion: '#808080', // gray
   }
 }
@@ -137,8 +138,8 @@ interface LayoutFeature {
   feature: Feature
 }
 
-function shouldDrawSNPs(type?: string) {
-  return !['methylation', 'modifications'].includes(type || '')
+function shouldDrawSNPsMuted(type?: string) {
+  return ['methylation', 'modifications'].includes(type || '')
 }
 
 function shouldDrawIndels(type?: string) {
@@ -152,7 +153,7 @@ export default class PileupRenderer extends BoxRendererType {
   // letter M is approximately the height
   getCharWidthHeight(ctx: CanvasRenderingContext2D) {
     const charWidth = measureText('A')
-    const charHeight = measureText('M')
+    const charHeight = measureText('M') - 2
     return { charWidth, charHeight }
   }
 
@@ -244,7 +245,8 @@ export default class PileupRenderer extends BoxRendererType {
     )
 
     return {
-      ...region,
+      // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+      ...(region as Omit<typeof region, symbol>),
       start: Math.floor(Math.max(start - bpExpansion, 0)),
       end: Math.ceil(end + bpExpansion),
     }
@@ -453,7 +455,7 @@ export default class PileupRenderer extends BoxRendererType {
     canvasWidth: number
   }) {
     const { feature, topPx, heightPx } = feat
-    const { modificationTagMap = {} } = renderArgs
+    const { Color, modificationTagMap = {} } = renderArgs
 
     const mm = (getTagAlt(feature, 'MM', 'Mm') as string) || ''
 
@@ -481,6 +483,8 @@ export default class PileupRenderer extends BoxRendererType {
     for (let i = 0; i < modifications.length; i++) {
       const { type, positions } = modifications[i]
       const col = modificationTagMap[type] || 'black'
+
+      // @ts-ignore
       const base = Color(col)
       for (const readPos of getNextRefPos(cigarOps, positions)) {
         const r = start + readPos
@@ -826,7 +830,7 @@ export default class PileupRenderer extends BoxRendererType {
     colorForBase,
     contrastForBase,
     canvasWidth,
-    drawSNPs = true,
+    drawSNPsMuted,
     drawIndels = true,
   }: {
     ctx: CanvasRenderingContext2D
@@ -835,15 +839,15 @@ export default class PileupRenderer extends BoxRendererType {
     colorForBase: { [key: string]: string }
     contrastForBase: { [key: string]: string }
     mismatchAlpha?: boolean
-    drawSNPs?: boolean
     drawIndels?: boolean
+    drawSNPsMuted?: boolean
     minSubfeatureWidth: number
     largeInsertionIndicatorScale: number
     charWidth: number
     charHeight: number
     canvasWidth: number
   }) {
-    const { bpPerPx, regions } = renderArgs
+    const { Color, bpPerPx, regions } = renderArgs
     const { heightPx, topPx, feature } = feat
     const [region] = regions
     const start = feature.get('start')
@@ -868,33 +872,39 @@ export default class PileupRenderer extends BoxRendererType {
       const mbase = mismatch.base
       const [leftPx, rightPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx)
       const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx))
-      if (mismatch.type === 'mismatch' && drawSNPs) {
-        const baseColor = colorForBase[mismatch.base] || '#888'
+      if (mismatch.type === 'mismatch') {
+        if (!drawSNPsMuted) {
+          const baseColor = colorForBase[mismatch.base] || '#888'
 
-        fillRect(
-          ctx,
-          leftPx,
-          topPx,
-          widthPx,
-          heightPx,
-          canvasWidth,
-          !mismatchAlpha
-            ? baseColor
-            : mismatch.qual !== undefined
-            ? Color(baseColor)
-                .alpha(Math.min(1, mismatch.qual / 50))
-                .hsl()
-                .string()
-            : baseColor,
-        )
+          fillRect(
+            ctx,
+            leftPx,
+            topPx,
+            widthPx,
+            heightPx,
+            canvasWidth,
+            !mismatchAlpha
+              ? baseColor
+              : mismatch.qual !== undefined
+              ? // @ts-ignore
+                Color(baseColor)
+                  .alpha(Math.min(1, mismatch.qual / 50))
+                  .hsl()
+                  .string()
+              : baseColor,
+          )
+        }
 
         if (widthPx >= charWidth && heightPx >= heightLim) {
           // normal SNP coloring
-          const contrastColor = contrastForBase[mismatch.base] || 'black'
+          const contrastColor = drawSNPsMuted
+            ? 'black'
+            : contrastForBase[mismatch.base] || 'black'
           ctx.fillStyle = !mismatchAlpha
             ? contrastColor
             : mismatch.qual !== undefined
-            ? Color(contrastColor)
+            ? // @ts-ignore
+              Color(contrastColor)
                 .alpha(Math.min(1, mismatch.qual / 50))
                 .hsl()
                 .string()
@@ -1050,11 +1060,13 @@ export default class PileupRenderer extends BoxRendererType {
     const mismatches: Mismatch[] = feature.get('mismatches')
     const seq = feature.get('seq')
     const { charWidth, charHeight } = this.getCharWidthHeight(ctx)
+    // @ts-ignore
+    const { bases } = theme.palette
     const colorForBase: { [key: string]: string } = {
-      A: theme.palette.bases.A.main,
-      C: theme.palette.bases.C.main,
-      G: theme.palette.bases.G.main,
-      T: theme.palette.bases.T.main,
+      A: bases.A.main,
+      C: bases.C.main,
+      G: bases.G.main,
+      T: bases.T.main,
       deletion: '#808080', // gray
     }
 
@@ -1152,7 +1164,7 @@ export default class PileupRenderer extends BoxRendererType {
     ctx.font = 'bold 10px Courier New,monospace'
 
     const { charWidth, charHeight } = this.getCharWidthHeight(ctx)
-    const drawSNPs = shouldDrawSNPs(colorBy?.type)
+    const drawSNPsMuted = shouldDrawSNPsMuted(colorBy?.type)
     const drawIndels = shouldDrawIndels(colorBy?.type)
     for (let i = 0; i < layoutRecords.length; i++) {
       const feat = layoutRecords[i]
@@ -1176,7 +1188,7 @@ export default class PileupRenderer extends BoxRendererType {
         feat,
         renderArgs,
         mismatchAlpha,
-        drawSNPs,
+        drawSNPsMuted,
         drawIndels,
         largeInsertionIndicatorScale,
         minSubfeatureWidth,
@@ -1279,22 +1291,20 @@ export default class PileupRenderer extends BoxRendererType {
 
     const width = (end - start) / bpPerPx
     const height = Math.max(layout.getTotalHeight(), 1)
-    const res = await renderToAbstractCanvas(
-      width,
-      height,
-      renderProps,
-      (ctx: CanvasRenderingContext2D) =>
-        this.makeImageData({
-          ctx,
-          layoutRecords,
-          canvasWidth: width,
-          renderArgs: {
-            ...renderProps,
-            layout,
-            features,
-            regionSequence,
-          },
-        }),
+    const Color = await import('color').then(f => f.default)
+    const res = await renderToAbstractCanvas(width, height, renderProps, ctx =>
+      this.makeImageData({
+        ctx,
+        layoutRecords,
+        canvasWidth: width,
+        renderArgs: {
+          ...renderProps,
+          layout,
+          features,
+          regionSequence,
+          Color,
+        },
+      }),
     )
 
     const results = await super.render({

package/src/PileupRenderer/components/PileupRendering.tsx

@@ -1,8 +1,8 @@
+import React, { useRef, useState, useEffect } from 'react'
 import { Region } from '@jbrowse/core/util/types'
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import { bpSpanPx } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
-import React, { MouseEvent, useRef, useState, useEffect } from 'react'
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view'
 
 // used so that user can click-away-from-feature below the laid out features
@@ -91,46 +91,46 @@ function PileupRendering(props: {
     contextMenuFeature,
   ])
 
-  function onMouseDown(event: MouseEvent) {
+  function onMouseDown(event: React.MouseEvent) {
     setMouseIsDown(true)
     setMovedDuringLastMouseDown(false)
     callMouseHandler('MouseDown', event)
   }
 
-  function onMouseEnter(event: MouseEvent) {
+  function onMouseEnter(event: React.MouseEvent) {
     callMouseHandler('MouseEnter', event)
   }
 
-  function onMouseOut(event: MouseEvent) {
+  function onMouseOut(event: React.MouseEvent) {
     callMouseHandler('MouseOut', event)
     callMouseHandler('MouseLeave', event)
   }
 
-  function onMouseOver(event: MouseEvent) {
+  function onMouseOver(event: React.MouseEvent) {
     callMouseHandler('MouseOver', event)
   }
 
-  function onMouseUp(event: MouseEvent) {
+  function onMouseUp(event: React.MouseEvent) {
     setMouseIsDown(false)
     callMouseHandler('MouseUp', event)
   }
 
-  function onClick(event: MouseEvent) {
+  function onClick(event: React.MouseEvent) {
     if (!movedDuringLastMouseDown) {
       callMouseHandler('Click', event)
     }
   }
 
-  function onMouseLeave(event: MouseEvent) {
+  function onMouseLeave(event: React.MouseEvent) {
     callMouseHandler('MouseOut', event)
     callMouseHandler('MouseLeave', event)
   }
 
-  function onContextMenu(event: MouseEvent) {
+  function onContextMenu(event: React.MouseEvent) {
     callMouseHandler('ContextMenu', event)
   }
 
-  function mouseMove(event: MouseEvent) {
+  function mouseMove(event: React.MouseEvent) {
     if (mouseIsDown) {
       setMovedDuringLastMouseDown(true)
     }
@@ -158,7 +158,7 @@ function PileupRendering(props: {
     }
   }
 
-  function callMouseHandler(handlerName: string, event: MouseEvent) {
+  function callMouseHandler(handlerName: string, event: React.MouseEvent) {
     // @ts-ignore
     // eslint-disable-next-line react/destructuring-assignment
     const featureHandler = props[`onFeature${handlerName}`]

package/src/SNPCoverageAdapter/SNPCoverageAdapter.ts

@@ -88,14 +88,15 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
       )
 
       bins.forEach((bin, index) => {
+        const start = region.start + index
         observer.next(
           new SimpleFeature({
-            id: `${this.id}-${region.start + index}`,
+            id: `${this.id}-${start}`,
             data: {
               score: bin.total,
               snpinfo: bin,
-              start: region.start + index,
-              end: region.start + index + 1,
+              start,
+              end: start + 1,
               refName: region.refName,
             },
           }),

package/src/SNPCoverageRenderer/SNPCoverageRenderer.ts

@@ -1,6 +1,5 @@
 import { createJBrowseTheme } from '@jbrowse/core/ui'
-import { featureSpanPx, bpSpanPx } from '@jbrowse/core/util'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { featureSpanPx, bpSpanPx, Feature } from '@jbrowse/core/util'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { RenderArgsDeserialized as FeatureRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType'
 import {
@@ -39,7 +38,7 @@ interface SNPInfo {
 export default class SNPCoverageRenderer extends WiggleBaseRenderer {
   // note: the snps are drawn on linear scale even if the data is drawn in log
   // scape hence the two different scales being used
-  draw(
+  async draw(
     ctx: CanvasRenderingContext2D,
     props: RenderArgsDeserializedWithFeatures,
   ) {
@@ -94,11 +93,13 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     const indicatorToHeight = (n: number) =>
       indicatorToY(getOrigin('linear')) - indicatorToY(n)
 
+    // @ts-ignore
+    const { bases } = theme.palette
     const colorForBase: { [key: string]: string } = {
-      A: theme.palette.bases.A.main,
-      C: theme.palette.bases.C.main,
-      G: theme.palette.bases.G.main,
-      T: theme.palette.bases.T.main,
+      A: bases.A.main,
+      C: bases.C.main,
+      G: bases.G.main,
+      T: bases.T.main,
       total: 'lightgrey',
       insertion: 'purple',
       softclip: 'blue',

package/dist/AlignmentsFeatureDetail/index.test.js

@@ -1,60 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = require("@testing-library/react");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _PluginManager = _interopRequireDefault(require("@jbrowse/core/PluginManager"));
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _ = require(".");
-
-var _AlignmentsFeatureDetail = _interopRequireDefault(require("./AlignmentsFeatureDetail"));
-
-test('open up a widget', function () {
-  console.warn = jest.fn();
-  var pluginManager = new _PluginManager.default([]);
-
-  var Session = _mobxStateTree.types.model({
-    pluginManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
-    rpcManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
-    configuration: (0, _configuration.ConfigurationSchema)('test', {}),
-    widget: (0, _.stateModelFactory)(pluginManager)
-  });
-
-  var session = Session.create({
-    widget: {
-      type: 'AlignmentsFeatureWidget'
-    }
-  });
-  session.widget.setFeatureData({
-    seq: 'TTGTTGCGGAGTTGAACAACGGCATTAGGAACACTTCCGTCTCTCACTTTTATACGATTATGATTGGTTCTTTAGCCTTGGTTTAGATTGGTAGTAGTAG',
-    start: 2,
-    end: 102,
-    strand: 1,
-    score: 37,
-    qual: '17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17',
-    MQ: 37,
-    CIGAR: '100M',
-    length_on_ref: 100,
-    template_length: 0,
-    seq_length: 100,
-    name: 'ctgA_3_555_0:0:0_2:0:0_102d',
-    refName: 'ctgA',
-    type: 'match'
-  });
-
-  var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_AlignmentsFeatureDetail.default, {
-    model: session.widget
-  })),
-      container = _render.container,
-      getByText = _render.getByText;
-
-  expect(container.firstChild).toMatchSnapshot();
-  expect(getByText('ctgA:3..102 (+)')).toBeTruthy();
-});

package/dist/BamAdapter/BamAdapter.test.js

@@ -1,177 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _operators = require("rxjs/operators");
-
-var _BamAdapter = _interopRequireDefault(require("./BamAdapter"));
-
-var _configSchema = _interopRequireDefault(require("./configSchema"));
-
-test('adapter can fetch features from volvox.bam', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-  var adapter, features, featuresArray, featuresJsonArray, adapterCSI, featuresCSI, featuresArrayCSI, featuresJsonArrayCSI;
-  return _regenerator.default.wrap(function _callee$(_context) {
-    while (1) {
-      switch (_context.prev = _context.next) {
-        case 0:
-          adapter = new _BamAdapter.default(_configSchema.default.create({
-            bamLocation: {
-              localPath: require.resolve('../../test_data/volvox-sorted.bam'),
-              locationType: 'LocalPathLocation'
-            },
-            index: {
-              location: {
-                localPath: require.resolve('../../test_data/volvox-sorted.bam.bai'),
-                locationType: 'LocalPathLocation'
-              }
-            }
-          }));
-          features = adapter.getFeatures({
-            assemblyName: 'volvox',
-            refName: 'ctgA',
-            start: 0,
-            end: 20000
-          });
-          _context.next = 4;
-          return features.pipe((0, _operators.toArray)()).toPromise();
-
-        case 4:
-          featuresArray = _context.sent;
-          expect(featuresArray[0].get('refName')).toBe('ctgA');
-          featuresJsonArray = featuresArray.map(function (f) {
-            return f.toJSON();
-          });
-          expect(featuresJsonArray.length).toEqual(3809);
-          expect(featuresJsonArray.slice(1000, 1010)).toMatchSnapshot();
-          expect(adapter.refIdToName(0)).toBe('ctgA');
-          expect(adapter.refIdToName(1)).toBe(undefined);
-          _context.t0 = expect;
-          _context.next = 14;
-          return adapter.hasDataForRefName('ctgA');
-
-        case 14:
-          _context.t1 = _context.sent;
-          (0, _context.t0)(_context.t1).toBe(true);
-          adapterCSI = new _BamAdapter.default(_configSchema.default.create({
-            bamLocation: {
-              localPath: require.resolve('../../test_data/volvox-sorted.bam'),
-              locationType: 'LocalPathLocation'
-            },
-            index: {
-              indexType: 'CSI',
-              location: {
-                localPath: require.resolve('../../test_data/volvox-sorted.bam.csi'),
-                locationType: 'LocalPathLocation'
-              }
-            }
-          }));
-          featuresCSI = adapterCSI.getFeatures({
-            assemblyName: 'volvox',
-            refName: 'ctgA',
-            start: 0,
-            end: 20000
-          });
-          _context.next = 20;
-          return featuresCSI.pipe((0, _operators.toArray)()).toPromise();
-
-        case 20:
-          featuresArrayCSI = _context.sent;
-          featuresJsonArrayCSI = featuresArrayCSI.map(function (f) {
-            return f.toJSON();
-          });
-          expect(featuresJsonArrayCSI).toEqual(featuresJsonArray);
-
-        case 23:
-        case "end":
-          return _context.stop();
-      }
-    }
-  }, _callee);
-})));
-test('test usage of BamSlightlyLazyFeature toJSON (used in the widget)', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-  var adapter, features, featuresArray, f;
-  return _regenerator.default.wrap(function _callee2$(_context2) {
-    while (1) {
-      switch (_context2.prev = _context2.next) {
-        case 0:
-          adapter = new _BamAdapter.default(_configSchema.default.create({
-            bamLocation: {
-              localPath: require.resolve('../../test_data/volvox-sorted.bam'),
-              locationType: 'LocalPathLocation'
-            },
-            index: {
-              location: {
-                localPath: require.resolve('../../test_data/volvox-sorted.bam.bai'),
-                locationType: 'LocalPathLocation'
-              },
-              indexType: 'BAI'
-            }
-          }));
-          features = adapter.getFeatures({
-            assemblyName: 'volvox',
-            refName: 'ctgA',
-            start: 0,
-            end: 100
-          });
-          _context2.next = 4;
-          return features.pipe((0, _operators.toArray)()).toPromise();
-
-        case 4:
-          featuresArray = _context2.sent;
-          f = featuresArray[0].toJSON();
-          expect(f.refName).toBe('ctgA');
-          expect(f.start).toBe(2);
-          expect(f.end).toBe(102);
-          expect(f.mismatches).not.toBeTruthy();
-
-        case 10:
-        case "end":
-          return _context2.stop();
-      }
-    }
-  }, _callee2);
-})));
-test('test usage of BamSlightlyLazyFeature for extended CIGAR', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-  var adapter, features, featuresArray, f;
-  return _regenerator.default.wrap(function _callee3$(_context3) {
-    while (1) {
-      switch (_context3.prev = _context3.next) {
-        case 0:
-          adapter = new _BamAdapter.default(_configSchema.default.create({
-            bamLocation: {
-              localPath: require.resolve('../../test_data/extended_cigar.bam'),
-              locationType: 'LocalPathLocation'
-            },
-            index: {
-              location: {
-                localPath: require.resolve('../../test_data/extended_cigar.bam.bai'),
-                locationType: 'LocalPathLocation'
-              },
-              indexType: 'BAI'
-            }
-          }));
-          features = adapter.getFeatures({
-            assemblyName: 'hg19',
-            refName: '1',
-            start: 13260,
-            end: 13340
-          });
-          _context3.next = 4;
-          return features.pipe((0, _operators.toArray)()).toPromise();
-
-        case 4:
-          featuresArray = _context3.sent;
-          f = featuresArray[0];
-          expect(f.get('mismatches')).toMatchSnapshot();
-
-        case 7:
-        case "end":
-          return _context3.stop();
-      }
-    }
-  }, _callee3);
-})));