@jbrowse/plugin-alignments 2.3.4 → 2.4.1

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 {
@@ -74,11 +69,9 @@ function getColorBaseMap(theme: Theme) {
 }
 
 function getContrastBaseMap(theme: Theme) {
+  const map = getColorBaseMap(theme)
   return Object.fromEntries(
-    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
-      key,
-      theme.palette.getContrastText(value),
-    ]),
+    Object.entries(map).map(([k, v]) => [k, theme.palette.getContrastText(v)]),
   )
 }
 
@@ -191,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
@@ -209,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
     }
@@ -475,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
@@ -660,6 +643,7 @@ export default class PileupRenderer extends BoxRendererType {
     charWidth,
     charHeight,
     defaultColor,
+    theme,
     canvasWidth,
   }: {
     ctx: CanvasRenderingContext2D
@@ -671,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]
@@ -734,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)
@@ -827,6 +806,7 @@ export default class PileupRenderer extends BoxRendererType {
     canvasWidth,
     drawSNPsMuted,
     drawIndels = true,
+    theme,
   }: {
     ctx: CanvasRenderingContext2D
     feat: LayoutFeature
@@ -841,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
@@ -877,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,
           )
         }
@@ -899,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,
@@ -1167,6 +1149,7 @@ export default class PileupRenderer extends BoxRendererType {
         charWidth,
         charHeight,
         canvasWidth,
+        theme,
       })
       this.drawMismatches({
         ctx,
@@ -1182,6 +1165,7 @@ export default class PileupRenderer extends BoxRendererType {
         colorForBase,
         contrastForBase,
         canvasWidth,
+        theme,
       })
       if (showSoftClip) {
         this.drawSoftClipping({
@@ -1317,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
         }

package/src/index.ts

@@ -14,12 +14,7 @@ import AlignmentsTrackF from './AlignmentsTrack'
 import AlignmentsFeatureWidgetF from './AlignmentsFeatureDetail'
 import PileupRPCMethodsF from './PileupRPC'
 import GuessAlignmentsTypesF from './GuessAlignmentsTypes'
-import LinearPileupDisplayF, {
-  linearPileupDisplayStateModelFactory,
-  linearPileupDisplayConfigSchemaFactory,
-} from './LinearPileupDisplay'
-import { LinearPileupDisplayModel } from './LinearPileupDisplay/model'
-import * as MismatchParser from './MismatchParser'
+import LinearPileupDisplayF from './LinearPileupDisplay'
 
 export default class AlignmentsPlugin extends Plugin {
   name = 'AlignmentsPlugin'
@@ -46,8 +41,8 @@ export default class AlignmentsPlugin extends Plugin {
 }
 
 export {
-  linearPileupDisplayConfigSchemaFactory,
   linearPileupDisplayStateModelFactory,
-  MismatchParser,
-}
-export type { LinearPileupDisplayModel }
+  linearPileupDisplayConfigSchemaFactory,
+} from './LinearPileupDisplay'
+export { type LinearPileupDisplayModel } from './LinearPileupDisplay/model'
+export * as MismatchParser from './MismatchParser'