@jbrowse/plugin-alignments 2.3.4 → 2.4.1

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

@@ -29,7 +29,7 @@ exports[`open up a widget 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-125qixp-MuiSvgIcon-root-expandIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
           data-testid="ExpandMoreIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -66,7 +66,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                 >
                   Position
                 </div>
@@ -80,7 +80,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                 >
                   Name
                 </div>
@@ -96,7 +96,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                 >
                   Length
                 </div>
@@ -112,7 +112,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                 >
                   Type
                 </div>
@@ -136,7 +136,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   seq
@@ -153,7 +153,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   score
@@ -170,7 +170,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   qual
@@ -197,7 +197,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   MQ
@@ -214,7 +214,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   CIGAR
@@ -231,7 +231,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   length_on_ref
@@ -248,7 +248,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   template_length
@@ -265,7 +265,7 @@ exports[`open up a widget 1`] = `
                 class="css-1m8nxnb-field"
               >
                 <div
-                  class="css-1y9c7n2-fieldName"
+                  class="css-1q83rf3-fieldName"
                   style="width: 96px;"
                 >
                   seq_length

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/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,
     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/configSchema.ts

@@ -21,6 +21,14 @@ export default function configModelFactory(pm: PluginManager) {
        */
       snpCoverageDisplay: pm.getDisplayType('LinearSNPCoverageDisplay')
         .configSchema,
+
+      /**
+       * #slot
+       */
+      height: {
+        type: 'number',
+        defaultValue: 250,
+      },
     },
     {
       /**

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
@@ -111,7 +110,7 @@ function AlignmentsModel(
     /**
      * #property
      */
-    height: 250,
+    heightPreConfig: types.maybe(types.number),
     /**
      * #property
      */
@@ -155,6 +154,14 @@ function stateModelFactory(
         self.snpCovHeight = n
       },
     }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get height() {
+        return self.heightPreConfig ?? getConf(self, 'height')
+      },
+    }))
     .views(self => ({
       /**
        * #getter
@@ -245,8 +252,8 @@ function stateModelFactory(
        * #action
        */
       setHeight(n: number) {
-        self.height = Math.max(n, minDisplayHeight)
-        return self.height
+        self.heightPreConfig = Math.max(n, minDisplayHeight)
+        return self.heightPreConfig
       },
       /**
        * #action
@@ -369,6 +376,14 @@ function stateModelFactory(
         },
       }
     })
+    .preProcessSnapshot(snap => {
+      if (!snap) {
+        return snap
+      }
+      // @ts-expect-error
+      const { height, ...rest } = snap
+      return { heightPreConfig: height, ...rest }
+    })
 }
 
 export default stateModelFactory

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/LinearReadArcsDisplay/components/ReactComponent.tsx

@@ -14,18 +14,20 @@ import { LinearReadArcsDisplayModel } from '../model'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(theme => ({
-  loading: {
-    paddingLeft: '0.6em',
-    backgroundColor: theme.palette.action.disabledBackground,
-    backgroundImage:
-      'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-    height: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-    textAlign: 'center',
-  },
-}))
+const useStyles = makeStyles()(theme => {
+  const bg = theme.palette.action.disabledBackground
+  return {
+    loading: {
+      paddingLeft: '0.6em',
+      backgroundColor: theme.palette.background.default,
+      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+      height: '100%',
+      width: '100%',
+      pointerEvents: 'none',
+      textAlign: 'center',
+    },
+  }
+})
 
 const Arcs = observer(function ({
   model,

package/src/LinearReadArcsDisplay/model.tsx

@@ -22,11 +22,16 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 import { FilterModel } from '../shared'
 import drawFeats from './drawFeats'
 import { fetchChains, ChainData } from '../shared/fetchChains'
-import { ExportSvgOptions } from '@jbrowse/plugin-linear-genome-view/src/LinearGenomeView'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
 
+// stabilize clipid under test for snapshot
+function getId(id: string) {
+  const isJest = typeof jest === 'undefined'
+  return `arc-clip-${isJest ? id : 'jest'}`
+}
+
 interface Filter {
   flagInclude: number
   flagExclude: number
@@ -333,7 +338,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #method
        */
-      async renderSvg(opts: ExportSvgOptions) {
+      async renderSvg(opts: { rasterizeLayers?: boolean }) {
         const view = getContainingView(self) as LGV
         const width = view.dynamicBlocks.totalWidthPx
         const height = self.height
@@ -360,13 +365,26 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           const C2S = await import('canvas2svg')
           const ctx = new C2S.default(width, height)
           await drawFeats(self, ctx)
+          const clipid = getId(self.id)
           str = (
-            // eslint-disable-next-line react/no-danger
-            <g dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }} />
+            <>
+              <defs>
+                <clipPath id={clipid}>
+                  <rect x={0} y={0} width={width} height={height} />
+                </clipPath>
+              </defs>
+              <g
+                /* eslint-disable-next-line react/no-danger */
+                dangerouslySetInnerHTML={{
+                  __html: ctx.getSvg().innerHTML,
+                }}
+                clipPath={`url(#${clipid})`}
+              />
+            </>
           )
         }
 
-        return <g>{str}</g>
+        return <>{str}</>
       },
     }))
     .actions(self => ({

package/src/LinearReadCloudDisplay/model.tsx

@@ -17,10 +17,7 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 import { FilterModel } from '../shared'
 import { fetchChains, ChainData } from '../shared/fetchChains'
 import drawFeats from './drawFeats'
-import {
-  ExportSvgOptions,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view/src/LinearGenomeView'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
@@ -32,6 +29,12 @@ interface Filter {
   tagFilter?: { tag: string; value: string }
 }
 
+// stabilize clipid under test for snapshot
+function getId(id: string) {
+  const isJest = typeof jest === 'undefined'
+  return `cloud-clip-${isJest ? id : 'jest'}`
+}
+
 /**
  * #stateModel LinearReadCloudDisplay
  * extends `BaseLinearDisplay`
@@ -205,7 +208,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         /**
          * #method
          */
-        async renderSvg(opts: ExportSvgOptions) {
+        async renderSvg(opts: { rasterizeLayers?: boolean }) {
           const view = getContainingView(self) as LinearGenomeViewModel
           const width = view.dynamicBlocks.totalWidthPx
           const height = self.height
@@ -232,9 +235,22 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
             const C2S = await import('canvas2svg')
             const ctx = new C2S.default(width, height)
             await drawFeats(self, ctx)
+            const clipid = getId(self.id)
             str = (
-              // eslint-disable-next-line react/no-danger
-              <g dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }} />
+              <>
+                <defs>
+                  <clipPath id={clipid}>
+                    <rect x={0} y={0} width={width} height={height} />
+                  </clipPath>
+                </defs>
+                <g
+                  /* eslint-disable-next-line react/no-danger */
+                  dangerouslySetInnerHTML={{
+                    __html: ctx.getSvg().innerHTML,
+                  }}
+                  clipPath={`url(#${clipid})`}
+                />
+              </>
             )
           }
 

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

@@ -25,7 +25,7 @@ export function cigarToMismatches(
   seq?: string,
   ref?: string,
   qual?: Buffer,
-): Mismatch[] {
+) {
   let roffset = 0 // reference offset
   let soffset = 0 // seq offset
   const mismatches: Mismatch[] = []
@@ -125,7 +125,7 @@ export function mdToMismatches(
   cigarMismatches: Mismatch[],
   seq: string,
   qual?: Buffer,
-): Mismatch[] {
+) {
   const mismatchRecords: Mismatch[] = []
   let curr: Mismatch = { start: 0, base: '', length: 0, type: 'mismatch' }
   const skips = cigarMismatches.filter(cigar => cigar.type === 'skip')
@@ -216,7 +216,7 @@ export function getMismatches(
   seq?: string,
   ref?: string,
   qual?: Buffer,
-): Mismatch[] {
+) {
   let mismatches: Mismatch[] = []
   const ops = parseCigar(cigar)
 
@@ -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
     }