@jbrowse/plugin-alignments 2.4.0 → 2.4.2

package/src/AlignmentsFeatureDetail/AlignmentsFeatureFlags.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Checkbox, FormControlLabel, FormGroup } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import {
+  BaseCard,
+  SimpleValue,
+} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+
+const useStyles = makeStyles()({
+  compact: {
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+})
+
+const flagNames = [
+  'read paired',
+  'read mapped in proper pair',
+  'read unmapped',
+  'mate unmapped',
+  'read reverse strand',
+  'mate reverse strand',
+  'first in pair',
+  'second in pair',
+  'not primary alignment',
+  'read fails platform/vendor quality checks',
+  'read is PCR or optical duplicate',
+  'supplementary alignment',
+]
+
+export default function AlignmentFlags(props: { feature: { flags: number } }) {
+  const { classes } = useStyles()
+  const { feature } = props
+  const { flags } = feature
+
+  return (
+    <BaseCard {...props} title="Flags">
+      <SimpleValue name="Flag" value={flags} />
+      <FormGroup>
+        {flagNames.map((name, idx) => {
+          const val = flags & (1 << idx)
+          const key = `${name}_${val}`
+          return (
+            <FormControlLabel
+              key={key}
+              control={
+                <Checkbox
+                  className={classes.compact}
+                  checked={Boolean(val)}
+                  name={name}
+                  readOnly
+                />
+              }
+              label={name}
+            />
+          )
+        })}
+      </FormGroup>
+    </BaseCard>
+  )
+}

package/src/AlignmentsFeatureDetail/AlignmentsFeatureSuppAligns.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import { getLengthOnRef } from '../MismatchParser'
+import { IAnyStateTreeNode } from 'mobx-state-tree'
+import { navToLoc } from './util'
+
+export default function SupplementaryAlignments(props: {
+  tag: string
+  model: IAnyStateTreeNode
+}) {
+  const { tag, model } = props
+  return (
+    <BaseCard {...props} title="Supplementary alignments">
+      <Typography>List of supplementary alignment locations</Typography>
+      <ul>
+        {tag
+          .split(';')
+          .filter(SA => !!SA)
+          .map((SA, index) => {
+            const [saRef, saStart, saStrand, saCigar] = SA.split(',')
+            const saLength = getLengthOnRef(saCigar)
+            const extra = Math.floor(saLength / 5)
+            const start = +saStart
+            const end = +saStart + saLength
+            const locString = `${saRef}:${Math.max(1, start - extra)}-${
+              end + extra
+            }`
+            const displayStart = start.toLocaleString('en-US')
+            const displayEnd = end.toLocaleString('en-US')
+            const displayString = `${saRef}:${displayStart}-${displayEnd} (${saStrand}) [${saLength}bp]`
+            return (
+              <li key={`${locString}-${index}`}>
+                <Link
+                  onClick={async event => {
+                    event.preventDefault()
+
+                    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                    navToLoc(locString, model)
+                  }}
+                  href="#"
+                >
+                  {displayString}
+                </Link>
+              </li>
+            )
+          })}
+      </ul>
+    </BaseCard>
+  )
+}

package/src/AlignmentsFeatureDetail/__snapshots__/index.test.tsx.snap

@@ -197,8 +197,9 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1q83rf3-fieldName"
-                  style="width: 96px;"
+                  aria-label="Mapping quality of the mate/next segment"
+                  class="css-18vnxxj-fieldDescription-fieldName"
+                  data-mui-internal-clone-element="true"
                 >
                   MQ
                 </div>

package/src/AlignmentsFeatureDetail/index.test.tsx

@@ -18,7 +18,7 @@ test('open up a widget', () => {
   })
   const session = Session.create(
     {
-      // @ts-ignore
+      // @ts-expect-error
       widget: { type: 'AlignmentsFeatureWidget' },
     },
     { pluginManager },

package/src/AlignmentsFeatureDetail/util.ts

@@ -0,0 +1,27 @@
+import { getSession } from '@jbrowse/core/util'
+import { IAnyStateTreeNode } from 'mobx-state-tree'
+
+export function getTag(
+  tag: string,
+  feat: {
+    tags?: { [key: string]: unknown }
+    [key: string]: unknown
+  },
+) {
+  return feat.tags?.[tag] || feat[tag]
+}
+
+export async function navToLoc(locString: string, model: IAnyStateTreeNode) {
+  const session = getSession(model)
+  const { view } = model
+  try {
+    if (view) {
+      await view.navToLocString(locString)
+    } else {
+      throw new Error('No view associated with this view anymore')
+    }
+  } catch (e) {
+    console.error(e)
+    session.notify(`${e}`)
+  }
+}

package/src/BamAdapter/BamAdapter.ts

@@ -151,7 +151,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
         const trimEnd = Math.min(end - chunkStart, chunkEnd - chunkStart)
         const trimLength = trimEnd - trimStart
         const chunkSeq = chunk.get('seq') || chunk.get('residues')
-        sequence += chunkSeq.substr(trimStart, trimLength)
+        sequence += chunkSeq.slice(trimStart, trimStart + trimLength)
       })
 
     if (sequence.length !== end - start) {
@@ -230,7 +230,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
   async estimateRegionsStats(regions: Region[], opts?: BaseOptions) {
     const { bam } = await this.configure()
     // this is a method to avoid calling on htsget adapters
-    // @ts-ignore
+    // @ts-expect-error
     if (bam.index.filehandle !== '?') {
       const bytes = await bytesForRegions(regions, bam)
       const fetchSizeLimit = this.getConf('fetchSizeLimit')

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,
+    height: 5,
     position: 'absolute',
     zIndex: 2,
   },
-}))
+})
 
 function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
   const { PileupDisplay, SNPCoverageDisplay } = model
@@ -33,7 +33,7 @@ function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
           return delta
         }}
         className={classes.resizeHandle}
-        style={{ top }}
+        style={{ top: top - 4 }}
       />
 
       <div

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
@@ -235,7 +234,7 @@ function stateModelFactory(
       /**
        * #action
        */
-      updateStatsLimit(stats: unknown) {
+      updateStatsLimit(stats?: unknown) {
         self.PileupDisplay.updateStatsLimit(stats)
         self.SNPCoverageDisplay.updateStatsLimit(stats)
       },
@@ -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

@@ -327,23 +327,22 @@ export function getModificationPositions(
 }
 
 export function getModificationTypes(mm: string) {
-  const mods = mm.split(';')
-  return mods
+  return mm
+    .split(';')
     .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/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'