@jbrowse/plugin-alignments 2.4.0 → 2.4.1

package/src/BamAdapter/BamSlightlyLazyFeature.ts

@@ -97,9 +97,9 @@ export default class BamSlightlyLazyFeature implements Feature {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   get(field: string): any {
     const methodName = `_get_${field}`
-    // @ts-ignore
+    // @ts-expect-error
     if (this[methodName]) {
-      // @ts-ignore
+      // @ts-expect-error
       return this[methodName]()
     }
     return this.record.get(field)

package/src/CramAdapter/CramAdapter.ts

@@ -124,7 +124,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
         const trimEnd = Math.min(end - chunkStart, chunkEnd - chunkStart)
         const trimLength = trimEnd - trimStart
         const chunkSeq = chunk.get('seq') || chunk.get('residues')
-        return chunkSeq.substr(trimStart, trimLength)
+        return chunkSeq.slice(trimStart, trimStart + trimLength)
       })
       .join('')
 
@@ -253,7 +253,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
 
       if (tagFilter) {
         filtered = filtered.filter(record => {
-          // @ts-ignore
+          // @ts-expect-error
           const val = record[tagFilter.tag]
           return val === '*' ? val !== undefined : val === tagFilter.value
         })

package/src/CramAdapter/CramSlightlyLazyFeature.ts

@@ -131,9 +131,9 @@ export default class CramSlightlyLazyFeature implements Feature {
 
   get(field: string) {
     const methodName = `_get_${field}`
-    // @ts-ignore
+    // @ts-expect-error
     if (this[methodName]) {
-      // @ts-ignore
+      // @ts-expect-error
       return this[methodName]()
     }
     return undefined

package/src/CramAdapter/util.ts

@@ -153,7 +153,7 @@ export function readFeaturesToCIGAR(
     for (let i = 0; i < readFeatures.length; i++) {
       const { code, refPos, sub, data } = readFeatures[i]
       sublen = refPos - lastPos
-      seq += ref.substring(lastPos - refStart, refPos - refStart)
+      seq += ref.slice(lastPos - refStart, refPos - refStart)
       lastPos = refPos
 
       if (insLen > 0 && sublen) {
@@ -161,7 +161,7 @@ export function readFeaturesToCIGAR(
         insLen = 0
       }
       if (oplen && op !== 'M') {
-        cigar += oplen + op
+        cigar += `${oplen}${op}`
         oplen = 0
       }
       if (sublen) {
@@ -190,7 +190,7 @@ export function readFeaturesToCIGAR(
         // Deletion or Ref Skip
         lastPos += data
         if (oplen) {
-          cigar += oplen + op
+          cigar += `${oplen}${op}`
         }
         cigar += data + code
         oplen = 0
@@ -198,7 +198,7 @@ export function readFeaturesToCIGAR(
         // Insertion or soft-clip
         seq += data
         if (oplen) {
-          cigar += oplen + op
+          cigar += `${oplen}${op}`
         }
         cigar += data.length + code
         oplen = 0
@@ -206,7 +206,7 @@ export function readFeaturesToCIGAR(
         // Single base insertion
         // seq += data
         if (oplen) {
-          cigar += oplen + op
+          cigar += `${oplen}${op}`
         }
         insLen++
         seq += data
@@ -214,13 +214,13 @@ export function readFeaturesToCIGAR(
       } else if (code === 'P') {
         // Padding
         if (oplen) {
-          cigar += oplen + op
+          cigar += `${oplen}${op}`
         }
         cigar += `${data}P`
       } else if (code === 'H') {
         // Hard clip
         if (oplen) {
-          cigar += oplen + op
+          cigar += `${oplen}${op}`
         }
         cigar += `${data}H`
         oplen = 0
@@ -231,10 +231,10 @@ export function readFeaturesToCIGAR(
   }
   if (seq.length !== readLen) {
     sublen = readLen - seq.length
-    seq += ref.substring(lastPos - refStart, lastPos - refStart + sublen)
+    seq += ref.slice(lastPos - refStart, lastPos - refStart + sublen)
 
     if (oplen && op !== 'M') {
-      cigar += oplen + op
+      cigar += `${oplen}${op}`
       oplen = 0
     }
     op = 'M'
@@ -244,7 +244,7 @@ export function readFeaturesToCIGAR(
     cigar += `${insLen}I`
   }
   if (oplen) {
-    cigar += oplen + op
+    cigar += `${oplen}${op}`
   }
 
   return cigar

package/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -7,13 +7,13 @@ import { ResizeHandle } from '@jbrowse/core/ui'
 // locals
 import { AlignmentsDisplayModel } from '../models/model'
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()({
   resizeHandle: {
     height: 2,
     position: 'absolute',
     zIndex: 2,
   },
-}))
+})
 
 function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
   const { PileupDisplay, SNPCoverageDisplay } = model

package/src/LinearAlignmentsDisplay/models/configSchema.test.ts

@@ -19,7 +19,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  // @ts-ignore
+  // @ts-expect-error
   console.warn.mockRestore()
 })
 

package/src/LinearAlignmentsDisplay/models/model.tsx

@@ -27,9 +27,9 @@ function getLowerPanelDisplays(pluginManager: PluginManager) {
   return (
     pluginManager
       .getDisplayElements()
-      // @ts-ignore
+      // @ts-expect-error
       .filter(f => f.subDisplay?.type === 'LinearAlignmentsDisplay')
-      // @ts-ignore
+      // @ts-expect-error
       .filter(f => f.subDisplay?.lowerPanel)
   )
 }
@@ -87,7 +87,6 @@ function AlignmentsModel(
      * #property
      * refers to LinearPileupDisplay sub-display model
      */
-    // @ts-ignore
     PileupDisplay: types.maybe(types.union(...lowerPanelDisplays)),
     /**
      * #property
@@ -381,7 +380,7 @@ function stateModelFactory(
       if (!snap) {
         return snap
       }
-      // @ts-ignore
+      // @ts-expect-error
       const { height, ...rest } = snap
       return { heightPreConfig: height, ...rest }
     })

package/src/LinearPileupDisplay/index.ts

@@ -20,7 +20,5 @@ export default function register(pluginManager: PluginManager) {
   })
 }
 
-export {
-  modelFactory as linearPileupDisplayStateModelFactory,
-  configSchemaFactory as linearPileupDisplayConfigSchemaFactory,
-}
+export { default as linearPileupDisplayStateModelFactory } from './model'
+export { default as linearPileupDisplayConfigSchemaFactory } from './configSchema'

package/src/LinearPileupDisplay/model.ts

@@ -275,7 +275,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                 if (sortedBy) {
                   const { pos, refName, assemblyName } = sortedBy
                   // render just the sorted region first
-                  // @ts-ignore
+                  // @ts-expect-error
                   await self.rendererType.renderInClient(rpcManager, {
                     assemblyName,
                     regions: [
@@ -337,9 +337,9 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                   // feature.id that was returned e.g. that the user hasn't
                   // moused over to a new position during the async operation
                   // above
-                  // @ts-ignore
+                  // @ts-expect-error
                   if (self.featureIdUnderMouse === feature.uniqueId) {
-                    // @ts-ignore
+                    // @ts-expect-error
                     self.setFeatureUnderMouse(new SimpleFeature(feature))
                   }
                 }
@@ -617,7 +617,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                   )) as { feature: unknown }
 
                   if (feature) {
-                    // @ts-ignore
+                    // @ts-expect-error
                     self.selectFeature(new SimpleFeature(feature))
                   }
                 }

package/src/LinearSNPCoverageDisplay/models/configSchema.test.ts

@@ -9,7 +9,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  // @ts-ignore
+  // @ts-expect-error
   console.warn.mockRestore()
 })
 // change renderer

package/src/MismatchParser/index.ts

@@ -330,20 +330,19 @@ export function getModificationTypes(mm: string) {
   const mods = mm.split(';')
   return mods
     .filter(mod => !!mod)
-    .map(mod => {
+    .flatMap(mod => {
       const [basemod] = mod.split(',')
 
       const matches = basemod.match(modificationRegex)
       if (!matches) {
         throw new Error(`bad format for MM tag: ${mm}`)
       }
-      const [, , , typestr] = matches
+      const typestr = matches[3]
 
       // can be a multi e.g. C+mh for both meth (m) and hydroxymeth (h) so
       // split, and they can also be chemical codes (ChEBI) e.g. C+16061
       return typestr.split(/(\d+|.)/).filter(f => !!f)
     })
-    .flat()
 }
 
 export function getOrientedCigar(flip: boolean, cigar: string[]) {
@@ -357,8 +356,7 @@ export function getOrientedCigar(flip: boolean, cigar: string[]) {
       } else if (op === 'I') {
         op = 'D'
       }
-      ret.push(len)
-      ret.push(op)
+      ret.push(len, op)
     }
     return ret
   } else {

package/src/NestedFrequencyTable.ts

@@ -27,11 +27,7 @@ export default class NestedFrequencyTable {
       amount = 1
     }
 
-    if (!slotName) {
-      slotName = 'default'
-    } else {
-      slotName = slotName.toString()
-    }
+    slotName = slotName ? slotName.toString() : 'default'
 
     if (this.categories[slotName]) {
       this.categories[slotName] = Math.max(
@@ -49,11 +45,7 @@ export default class NestedFrequencyTable {
       amount = 1
     }
 
-    if (!slotName) {
-      slotName = 'default'
-    } else {
-      slotName = slotName.toString()
-    }
+    slotName = slotName ? slotName.toString() : 'default'
 
     this.categories[slotName] = (this.categories[slotName] || 0) + amount
     return this.categories[slotName]
@@ -71,7 +63,7 @@ export default class NestedFrequencyTable {
       path = path.split('/')
     }
 
-    if (!path.length) {
+    if (path.length === 0) {
       return this
     }
 

package/src/PileupRPC/rpcMethods.ts

@@ -1,9 +1,3 @@
-import PileupGetReducedFeatures from './methods/GetReducedFeatures'
-import PileupGetGlobalValueForTag from './methods/GetGlobalValueForTag'
-import PileupGetVisibleModifications from './methods/GetVisibleModifications'
-
-export {
-  PileupGetReducedFeatures,
-  PileupGetVisibleModifications,
-  PileupGetGlobalValueForTag,
-}
+export { default as PileupGetReducedFeatures } from './methods/GetReducedFeatures'
+export { default as PileupGetVisibleModifications } from './methods/GetVisibleModifications'
+export { default as PileupGetGlobalValueForTag } from './methods/GetGlobalValueForTag'

package/src/PileupRenderer/PileupRenderer.ts

@@ -1,11 +1,6 @@
 import { Theme } from '@mui/material/styles'
 import BoxRendererType, {
-  RenderArgs,
-  RenderArgsSerialized,
   RenderArgsDeserialized as BoxRenderArgsDeserialized,
-  RenderResults,
-  ResultsSerialized,
-  ResultsDeserialized,
 } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import {
@@ -189,13 +184,10 @@ export default class PileupRenderer extends BoxRendererType {
         }
       }
     }
+    const s = feature.get('start') - expansionBefore
+    const e = feature.get('end') + expansionAfter
 
-    const [leftPx, rightPx] = bpSpanPx(
-      feature.get('start') - expansionBefore,
-      feature.get('end') + expansionAfter,
-      region,
-      bpPerPx,
-    )
+    const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx)
 
     if (displayMode === 'compact') {
       heightPx /= 3
@@ -207,13 +199,7 @@ export default class PileupRenderer extends BoxRendererType {
         }`,
       )
     }
-    const topPx = layout.addRect(
-      feature.id(),
-      feature.get('start') - expansionBefore,
-      feature.get('end') + expansionAfter,
-      heightPx,
-      feature,
-    )
+    const topPx = layout.addRect(feature.id(), s, e, heightPx, feature)
     if (topPx === null) {
       return null
     }
@@ -473,11 +459,10 @@ export default class PileupRenderer extends BoxRendererType {
 
     // probIndex applies across multiple modifications e.g.
     let probIndex = 0
-    for (let i = 0; i < modifications.length; i++) {
-      const { type, positions } = modifications[i]
+    for (const { type, positions } of modifications) {
       const col = modificationTagMap[type] || 'black'
 
-      // @ts-ignore
+      // @ts-expect-error
       const base = Color(col)
       for (const readPos of getNextRefPos(cigarOps, positions)) {
         const r = start + readPos
@@ -658,6 +643,7 @@ export default class PileupRenderer extends BoxRendererType {
     charWidth,
     charHeight,
     defaultColor,
+    theme,
     canvasWidth,
   }: {
     ctx: CanvasRenderingContext2D
@@ -669,9 +655,9 @@ export default class PileupRenderer extends BoxRendererType {
     charHeight: number
     defaultColor: boolean
     canvasWidth: number
+    theme: Theme
   }) {
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs
-
     const { tag = '', type: colorType = '' } = colorBy || {}
     const { feature } = feat
     const region = regions[0]
@@ -732,30 +718,25 @@ export default class PileupRenderer extends BoxRendererType {
         }
         break
       }
-      case 'insertSizeAndPairOrientation':
+      case 'insertSizeAndPairOrientation': {
         break
+      }
 
       case 'modifications':
-      case 'methylation':
+      case 'methylation': {
         // this coloring is similar to igv.js, and is helpful to color negative
         // strand reads differently because their c-g will be flipped (e.g. g-c
         // read right to left)
-        if (feature.get('flags') & 16) {
-          ctx.fillStyle = '#c8dcc8'
-        } else {
-          ctx.fillStyle = '#c8c8c8'
-        }
+        ctx.fillStyle = feature.get('flags') & 16 ? '#c8dcc8' : '#c8c8c8'
         break
+      }
 
-      case 'normal':
-      default:
-        if (defaultColor) {
-          // avoid a readConfObject call here
-          ctx.fillStyle = '#c8c8c8'
-        } else {
-          ctx.fillStyle = readConfObject(config, 'color', { feature })
-        }
+      default: {
+        ctx.fillStyle = defaultColor
+          ? 'lightgrey'
+          : readConfObject(config, 'color', { feature })
         break
+      }
     }
 
     this.drawRect(ctx, feat, renderArgs)
@@ -825,6 +806,7 @@ export default class PileupRenderer extends BoxRendererType {
     canvasWidth,
     drawSNPsMuted,
     drawIndels = true,
+    theme,
   }: {
     ctx: CanvasRenderingContext2D
     feat: LayoutFeature
@@ -839,6 +821,7 @@ export default class PileupRenderer extends BoxRendererType {
     charWidth: number
     charHeight: number
     canvasWidth: number
+    theme: Theme
   }) {
     const { Color, bpPerPx, regions } = renderArgs
     const { heightPx, topPx, feature } = feat
@@ -875,19 +858,20 @@ export default class PileupRenderer extends BoxRendererType {
 
           fillRect(
             ctx,
-            leftPx,
+            Math.round(leftPx),
             topPx,
             widthPx,
             heightPx,
             canvasWidth,
-            !mismatchAlpha
-              ? baseColor
-              : mismatch.qual !== undefined
-              ? // @ts-ignore
-                Color(baseColor)
-                  .alpha(Math.min(1, mismatch.qual / 50))
-                  .hsl()
-                  .string()
+
+            mismatchAlpha
+              ? mismatch.qual === undefined
+                ? baseColor
+                : // @ts-expect-error
+                  Color(baseColor)
+                    .alpha(Math.min(1, mismatch.qual / 50))
+                    .hsl()
+                    .string()
               : baseColor,
           )
         }
@@ -897,14 +881,14 @@ export default class PileupRenderer extends BoxRendererType {
           const contrastColor = drawSNPsMuted
             ? 'black'
             : contrastForBase[mismatch.base] || 'black'
-          ctx.fillStyle = !mismatchAlpha
-            ? contrastColor
-            : mismatch.qual !== undefined
-            ? // @ts-ignore
-              Color(contrastColor)
-                .alpha(Math.min(1, mismatch.qual / 50))
-                .hsl()
-                .string()
+          ctx.fillStyle = mismatchAlpha
+            ? mismatch.qual === undefined
+              ? contrastColor
+              : // @ts-expect-error
+                Color(contrastColor)
+                  .alpha(Math.min(1, mismatch.qual / 50))
+                  .hsl()
+                  .string()
             : contrastColor
           ctx.fillText(
             mbase,
@@ -1165,6 +1149,7 @@ export default class PileupRenderer extends BoxRendererType {
         charWidth,
         charHeight,
         canvasWidth,
+        theme,
       })
       this.drawMismatches({
         ctx,
@@ -1180,6 +1165,7 @@ export default class PileupRenderer extends BoxRendererType {
         colorForBase,
         contrastForBase,
         canvasWidth,
+        theme,
       })
       if (showSoftClip) {
         this.drawSoftClipping({
@@ -1315,10 +1301,10 @@ export default class PileupRenderer extends BoxRendererType {
   }
 }
 
-export type {
-  RenderArgs,
-  RenderArgsSerialized,
-  RenderResults,
-  ResultsSerialized,
-  ResultsDeserialized,
-}
+export {
+  type RenderArgs,
+  type RenderResults,
+  type RenderArgsSerialized,
+  type ResultsSerialized,
+  type ResultsDeserialized,
+} from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'

package/src/PileupRenderer/components/PileupRendering.tsx

@@ -159,10 +159,10 @@ function PileupRendering(props: {
   }
 
   function callMouseHandler(handlerName: string, event: React.MouseEvent) {
-    // @ts-ignore
+    // @ts-expect-error
     // eslint-disable-next-line react/destructuring-assignment
     const featureHandler = props[`onFeature${handlerName}`]
-    // @ts-ignore
+    // @ts-expect-error
     // eslint-disable-next-line react/destructuring-assignment
     const canvasHandler = props[`on${handlerName}`]
     if (featureHandler && featureIdUnderMouse) {

package/src/PileupRenderer/configSchema.ts

@@ -50,7 +50,7 @@ const PileupRenderer = ConfigurationSchema(
       type: 'number',
       description:
         'the minimum width in px for a pileup mismatch feature. use for increasing/decreasing mismatch marker widths when zoomed out, e.g. 0 or 1',
-      defaultValue: 0.7,
+      defaultValue: 1,
     },
     /**
      * #slot

package/src/PileupRenderer/sortUtil.ts

@@ -78,7 +78,7 @@ export const sortFeature = (
         const acode = bMismatch && bMismatch.base.toUpperCase()
         const bcode = aMismatch && aMismatch.base.toUpperCase()
         if (acode === bcode && acode === '*') {
-          // @ts-ignore
+          // @ts-expect-error
           return aMismatch.length - bMismatch.length
         }
         return (
@@ -99,9 +99,10 @@ export const sortFeature = (
   }
 
   const sortedMap = new Map(
-    featuresInCenterLine
-      .concat(featuresOutsideCenter)
-      .map(feature => [feature.id(), feature]),
+    [...featuresInCenterLine, ...featuresOutsideCenter].map(feature => [
+      feature.id(),
+      feature,
+    ]),
   )
 
   return sortedMap

package/src/SNPCoverageRenderer/SNPCoverageRenderer.ts

@@ -35,6 +35,8 @@ interface SNPInfo {
   total: number
 }
 
+const fudgeFactor = 0.6
+
 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
@@ -78,6 +80,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
       scaleType: 'linear',
     })
     const originY = getOrigin(scaleOpts.scaleType)
+    const originLinear = getOrigin('linear')
 
     const indicatorThreshold = readConfObject(cfg, 'indicatorThreshold')
     const drawInterbaseCounts = readConfObject(cfg, 'drawInterbaseCounts')
@@ -87,11 +90,9 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     // get the y coordinate that we are plotting at, this can be log scale
     const toY = (n: number) => height - (viewScale(n) || 0) + offset
     const toHeight = (n: number) => toY(originY) - toY(n)
-
-    const indicatorToY = (n: number) =>
-      height - (indicatorViewScale(n) || 0) + offset
-    const indicatorToHeight = (n: number) =>
-      indicatorToY(getOrigin('linear')) - indicatorToY(n)
+    // used specifically for indicator
+    const toY2 = (n: number) => height - (indicatorViewScale(n) || 0) + offset
+    const toHeight2 = (n: number) => toY2(originLinear) - toY2(n)
 
     const { bases } = theme.palette
     const colorForBase: { [key: string]: string } = {
@@ -105,7 +106,6 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
       hardclip: 'red',
       meth: 'red',
       unmeth: 'blue',
-      ref: 'lightgrey',
     }
 
     const feats = [...features.values()]
@@ -118,7 +118,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     for (let i = 0; i < coverage.length; i++) {
       const feature = coverage[i]
       const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
-      const w = rightPx - leftPx + 0.3
+      const w = rightPx - leftPx + fudgeFactor
       const score = feature.get('score') as number
       ctx.fillRect(leftPx, toY(score), w, toHeight(score))
     }
@@ -144,7 +144,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
 
       const score = feature.get('score') as number
       const snpinfo = feature.get('snpinfo') as SNPInfo
-      const w = Math.max(rightPx - leftPx + 0.3, 1)
+      const w = Math.max(rightPx - leftPx + fudgeFactor, 1)
       const totalScore = snpinfo.total
       const keys = Object.keys(snpinfo.cov).sort()
 
@@ -160,7 +160,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         const height = toHeight(score)
         const bottom = toY(score) + height
         ctx.fillRect(
-          leftPx,
+          Math.round(leftPx),
           bottom - ((total + curr) / score) * height,
           w,
           (total / score) * height,
@@ -175,12 +175,13 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         for (let i = 0; i < interbaseEvents.length; i++) {
           const base = interbaseEvents[i]
           const { total } = snpinfo.noncov[base]
+          const r = 0.6
           ctx.fillStyle = colorForBase[base]
           ctx.fillRect(
-            leftPx - 0.6 + extraHorizontallyFlippedOffset,
-            indicatorHeight + indicatorToHeight(curr),
-            1.2,
-            indicatorToHeight(total),
+            leftPx - r + extraHorizontallyFlippedOffset,
+            indicatorHeight + toHeight2(curr),
+            r * 2,
+            toHeight2(total),
           )
           curr += total
         }