@jbrowse/plugin-alignments 1.7.7 → 1.7.10

package/src/CramAdapter/CramAdapter.ts

@@ -20,6 +20,13 @@ interface Header {
   readGroups?: number[]
 }
 
+interface FilterBy {
+  flagInclude: number
+  flagExclude: number
+  tagFilter: { tag: string; value: unknown }
+  readName: string
+}
+
 export default class CramAdapter extends BaseFeatureDataAdapter {
   samHeader: Header = {}
 
@@ -206,12 +213,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
   getFeatures(
     region: Region & { originalRefName?: string },
     opts?: BaseOptions & {
-      filterBy: {
-        flagInclude: number
-        flagExclude: number
-        tagFilter: { tag: string; value: unknown }
-        name: string
-      }
+      filterBy: FilterBy
     },
   ) {
     const { signal, filterBy, statusCallback = () => {} } = opts || {}
@@ -234,7 +236,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
           flagInclude = 0,
           flagExclude = 0,
           tagFilter,
-          name,
+          readName,
         } = filterBy || {}
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -251,9 +253,11 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
           })
         }
 
-        if (name) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          filtered = filtered.filter((record: any) => record.name === name)
+        if (readName) {
+          filtered = filtered.filter(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (record: any) => record.readName === readName,
+          )
         }
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/CramAdapter/CramSlightlyLazyFeature.ts

@@ -131,7 +131,8 @@ export default class CramSlightlyLazyFeature implements Feature {
     let sublen = 0
     if (typeof this.record.readFeatures !== 'undefined') {
       // @ts-ignore
-      this.record.readFeatures.forEach(({ code, refPos, sub, data }) => {
+      for (let i = 0; i < this.record.readFeatures.length; i++) {
+        const { code, refPos, sub, data } = this.record.readFeatures[i]
         sublen = refPos - last_pos
         seq += ref.substring(last_pos - refStart, refPos - refStart)
         last_pos = refPos
@@ -200,7 +201,7 @@ export default class CramSlightlyLazyFeature implements Feature {
           cigar += `${data}H`
           oplen = 0
         } // else q or Q
-      })
+      }
     } else {
       sublen = this.record.readLength - seq.length
     }
@@ -303,95 +304,87 @@ export default class CramSlightlyLazyFeature implements Feature {
       return []
     }
     const start = this.get('start')
-    const mismatches: Mismatch[] = []
-    readFeatures.forEach(
-      (args: {
-        code: string
-        refPos: number
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        data: any
-        pos: number
-        sub: string
-        ref: string
-      }) => {
-        const { code, pos, data, sub, ref } = args
-        const refPos = args.refPos - 1 - start
-        if (code === 'X') {
-          // substitution
-          mismatches.push({
-            start: refPos,
-            length: 1,
-            base: sub,
-            qual: qual?.[pos],
-            altbase: ref,
-            type: 'mismatch',
-          })
-        } else if (code === 'I') {
-          // insertion
-          mismatches.push({
-            start: refPos,
-            type: 'insertion',
-            base: `${data.length}`,
-            length: 0,
-          })
-        } else if (code === 'N') {
-          // reference skip
-          mismatches.push({
-            type: 'skip',
-            length: data,
-            start: refPos,
-            base: 'N',
-          })
-        } else if (code === 'S') {
-          // soft clip
-          const len = data.length
-          mismatches.push({
-            start: refPos,
-            type: 'softclip',
-            base: `S${len}`,
-            cliplen: len,
-            length: 1,
-          })
-        } else if (code === 'P') {
-          // padding
-        } else if (code === 'H') {
-          // hard clip
-          const len = data
-          mismatches.push({
-            start: refPos,
-            type: 'hardclip',
-            base: `H${len}`,
-            cliplen: len,
-            length: 1,
-          })
-        } else if (code === 'D') {
-          // deletion
-          mismatches.push({
-            type: 'deletion',
-            length: data,
-            start: refPos,
-            base: '*',
-          })
-        } else if (code === 'b') {
-          // stretch of bases
-        } else if (code === 'q') {
-          // stretch of qual scores
-        } else if (code === 'B') {
-          // a pair of [base, qual]
-        } else if (code === 'i') {
-          // single-base insertion
-          // insertion
-          mismatches.push({
-            start: refPos,
-            type: 'insertion',
-            base: data,
-            length: 1,
-          })
-        } else if (code === 'Q') {
-          // single quality value
+    const mismatches: Mismatch[] = new Array(readFeatures.length)
+    let j = 0
+    for (let i = 0; i < readFeatures.length; i++) {
+      const f = readFeatures[i]
+      const { code, pos, data, sub, ref } = f
+      const refPos = f.refPos - 1 - start
+      if (code === 'X') {
+        // substitution
+        mismatches[j++] = {
+          start: refPos,
+          length: 1,
+          base: sub,
+          qual: qual?.[pos],
+          altbase: ref,
+          type: 'mismatch',
         }
-      },
-    )
-    return mismatches
+      } else if (code === 'I') {
+        // insertion
+        mismatches[j++] = {
+          start: refPos,
+          type: 'insertion',
+          base: `${data.length}`,
+          length: 0,
+        }
+      } else if (code === 'N') {
+        // reference skip
+        mismatches[j++] = {
+          type: 'skip',
+          length: data,
+          start: refPos,
+          base: 'N',
+        }
+      } else if (code === 'S') {
+        // soft clip
+        const len = data.length
+        mismatches[j++] = {
+          start: refPos,
+          type: 'softclip',
+          base: `S${len}`,
+          cliplen: len,
+          length: 1,
+        }
+      } else if (code === 'P') {
+        // padding
+      } else if (code === 'H') {
+        // hard clip
+        const len = data
+        mismatches[j++] = {
+          start: refPos,
+          type: 'hardclip',
+          base: `H${len}`,
+          cliplen: len,
+          length: 1,
+        }
+      } else if (code === 'D') {
+        // deletion
+        mismatches[j++] = {
+          type: 'deletion',
+          length: data,
+          start: refPos,
+          base: '*',
+        }
+      } else if (code === 'b') {
+        // stretch of bases
+      } else if (code === 'q') {
+        // stretch of qual scores
+      } else if (code === 'B') {
+        // a pair of [base, qual]
+      } else if (code === 'i') {
+        // single-base insertion
+        // insertion
+        mismatches[j++] = {
+          start: refPos,
+          type: 'insertion',
+          base: data,
+          length: 1,
+        }
+      } else if (code === 'Q') {
+        // single quality value
+      }
+    }
+    return mismatches.slice(0, j)
   }
 }

package/src/LinearPileupDisplay/model.ts

@@ -1,5 +1,9 @@
 import { lazy } from 'react'
+import { autorun, observable } from 'mobx'
+import { cast, types, addDisposer, getEnv, Instance } from 'mobx-state-tree'
+import copy from 'copy-to-clipboard'
 import {
+  AnyConfigurationModel,
   ConfigurationReference,
   readConfObject,
   getConf,
@@ -13,26 +17,25 @@ import {
   Feature,
 } from '@jbrowse/core/util'
 
-import VisibilityIcon from '@material-ui/icons/Visibility'
-import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
 import {
   LinearGenomeViewModel,
   BaseLinearDisplay,
 } from '@jbrowse/plugin-linear-genome-view'
-import { cast, types, addDisposer, getEnv, Instance } from 'mobx-state-tree'
-import copy from 'copy-to-clipboard'
+
+// icons
+import VisibilityIcon from '@material-ui/icons/Visibility'
+import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
 import MenuOpenIcon from '@material-ui/icons/MenuOpen'
 import SortIcon from '@material-ui/icons/Sort'
 import PaletteIcon from '@material-ui/icons/Palette'
 import FilterListIcon from '@material-ui/icons/ClearAll'
 
-import { autorun, observable } from 'mobx'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+// locals
 import { LinearPileupDisplayConfigModel } from './configSchema'
 import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb'
-
 import { getUniqueTagValues, getUniqueModificationValues } from '../shared'
 
+// async
 const ColorByTagDlg = lazy(() => import('./components/ColorByTag'))
 const FilterByTagDlg = lazy(() => import('./components/FilterByTag'))
 const SortByTagDlg = lazy(() => import('./components/SortByTag'))
@@ -94,6 +97,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
     .volatile(() => ({
       colorTagMap: observable.map<string, string>({}),
       modificationTagMap: observable.map<string, string>({}),
+      featureUnderMouseVolatile: undefined as undefined | Feature,
       ready: false,
     }))
     .actions(self => ({
@@ -128,7 +132,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
       },
 
       updateColorTagMap(uniqueTag: string[]) {
-        // pale color scheme https://cran.r-project.org/web/packages/khroma/vignettes/tol.html e.g. "tol_light"
+        // pale color scheme
+        // https://cran.r-project.org/web/packages/khroma/vignettes/tol.html
+        // e.g. "tol_light"
         const colorPalette = [
           '#BBCCEE',
           'pink',
@@ -150,6 +156,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
           }
         })
       },
+      setFeatureUnderMouse(feat?: Feature) {
+        self.featureUnderMouseVolatile = feat
+      },
     }))
     .actions(self => ({
       afterAttach() {
@@ -226,6 +235,48 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             { delay: 1000 },
           ),
         )
+
+        // autorun synchronizes featureUnderMouse with featureIdUnderMouse
+        addDisposer(
+          self,
+          autorun(async () => {
+            const session = getSession(self)
+            try {
+              const featureId = self.featureIdUnderMouse
+              if (self.featureUnderMouse?.id() !== featureId) {
+                if (!featureId) {
+                  self.setFeatureUnderMouse(undefined)
+                } else {
+                  const sessionId = getRpcSessionId(self)
+                  const view = getContainingView(self)
+                  const { feature } = (await session.rpcManager.call(
+                    sessionId,
+                    'CoreGetFeatureDetails',
+                    {
+                      featureId,
+                      sessionId,
+                      layoutId: view.id,
+                      rendererType: 'PileupRenderer',
+                    },
+                  )) as { feature: unknown }
+
+                  // check featureIdUnderMouse is still the same as the
+                  // 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
+                  if (self.featureIdUnderMouse === feature.uniqueId) {
+                    // @ts-ignore
+                    self.setFeatureUnderMouse(new SimpleFeature(feature))
+                  }
+                }
+              }
+            } catch (e) {
+              console.error(e)
+              session.notify(`${e}`, 'error')
+            }
+          }),
+        )
       },
       selectFeature(feature: Feature) {
         const session = getSession(self)
@@ -337,6 +388,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
           ? self.mismatchAlpha
           : readConfObject(this.rendererConfig, 'mismatchAlpha')
       },
+      get featureUnderMouse() {
+        return self.featureUnderMouseVolatile
+      },
     }))
     .views(self => {
       const {
@@ -395,6 +449,8 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             colorBy,
             filterBy,
             rpcDriverName,
+            currBpPerPx,
+            ready,
           } = self
 
           const superProps = superRenderProps()
@@ -403,18 +459,18 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             ...superProps,
             notReady:
               superProps.notReady ||
-              !self.ready ||
-              (sortedBy && self.currBpPerPx !== view.bpPerPx),
+              !ready ||
+              (sortedBy && currBpPerPx !== view.bpPerPx),
             rpcDriverName,
             displayModel: self,
             sortedBy,
             colorBy,
-            filterBy,
+            filterBy: JSON.parse(JSON.stringify(filterBy)),
             colorTagMap: JSON.parse(JSON.stringify(colorTagMap)),
             modificationTagMap: JSON.parse(JSON.stringify(modificationTagMap)),
             showSoftClip: self.showSoftClipping,
             config: self.rendererConfig,
-            async onFeatureClick(_: unknown, featureId: string | undefined) {
+            async onFeatureClick(_: unknown, featureId?: string) {
               const session = getSession(self)
               const { rpcManager } = session
               try {
@@ -444,14 +500,12 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 session.notify(`${e}`)
               }
             },
+
             onClick() {
               self.clearFeatureSelection()
             },
             // similar to click but opens a menu with further options
-            async onFeatureContextMenu(
-              _: unknown,
-              featureId: string | undefined,
-            ) {
+            async onFeatureContextMenu(_: unknown, featureId?: string) {
               const session = getSession(self)
               const { rpcManager } = session
               try {
@@ -507,19 +561,17 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
               disabled: self.showSoftClipping,
               subMenu: [
                 ...['Start location', 'Read strand', 'Base pair'].map(
-                  option => {
-                    return {
-                      label: option,
-                      onClick: () => self.setSortedBy(option),
-                    }
-                  },
+                  option => ({
+                    label: option,
+                    onClick: () => self.setSortedBy(option),
+                  }),
                 ),
                 {
                   label: 'Sort by tag...',
                   onClick: () => {
-                    getSession(self).queueDialog(doneCallback => [
+                    getSession(self).queueDialog(handleClose => [
                       SortByTagDlg,
-                      { model: self, handleClose: doneCallback },
+                      { model: self, handleClose },
                     ])
                   },
                 },

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -7,35 +7,51 @@ import { Tooltip } from '@jbrowse/plugin-wiggle'
 type Count = {
   [key: string]: {
     total: number
-    strands: { [key: string]: number }
+    '-1': number
+    '0': number
+    '1': number
   }
 }
 
 type SNPInfo = {
-  ref: Count
   cov: Count
   lowqual: Count
   noncov: Count
   delskips: Count
+  refbase: string
   total: number
+  ref: number
+  all: number
+  '-1': number
+  '0': number
+  '1': number
 }
 
 const en = (n: number) => n.toLocaleString('en-US')
+const toP = (s = 0) => +(+s).toFixed(1)
+const pct = (n: number, total: number) => `${toP((n / (total || 1)) * 100)}%`
 
 const TooltipContents = React.forwardRef(
-  ({ feature }: { feature: Feature }, ref: any) => {
+  ({ feature }: { feature: Feature }, reactRef: any) => {
     const start = feature.get('start')
     const end = feature.get('end')
     const name = feature.get('refName')
-    const info = feature.get('snpinfo') as SNPInfo
+    const {
+      refbase,
+      all,
+      total,
+      ref,
+      '-1': rn1,
+      '1': r1,
+      '0': r0,
+      ...info
+    } = feature.get('snpinfo') as SNPInfo
     const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
       .filter(f => !!f)
       .join(':')
 
-    const total = info?.total
-
     return (
-      <div ref={ref}>
+      <div ref={reactRef}>
         <table>
           <caption>{loc}</caption>
           <thead>
@@ -50,33 +66,38 @@ const TooltipContents = React.forwardRef(
           <tbody>
             <tr>
               <td>Total</td>
-              <td>{total}</td>
+              <td>{all}</td>
+            </tr>
+            <tr>
+              <td>REF {refbase ? `(${refbase.toUpperCase()})` : ''}</td>
+              <td>{ref}</td>
+              <td>{pct(ref, all)}</td>
+              <td>
+                {rn1 ? `${rn1}(-)` : ''}
+                {r1 ? `${r1}(+)` : ''}
+              </td>
               <td />
             </tr>
 
-            {Object.entries(info).map(([key, entry]) => {
-              return Object.entries(entry).map(([base, score]) => {
-                const { strands } = score
-                return (
+            {Object.entries(info as unknown as Record<string, Count>).map(
+              ([key, entry]) =>
+                Object.entries(entry).map(([base, score]) => (
                   <tr key={base}>
                     <td>{base.toUpperCase()}</td>
                     <td>{score.total}</td>
                     <td>
                       {base === 'total' || base === 'skip'
                         ? '---'
-                        : `${Math.floor(
-                            (score.total / (total || score.total || 1)) * 100,
-                          )}%`}
+                        : pct(score.total, all)}
                     </td>
                     <td>
-                      {strands['-1'] ? `${strands['-1']}(-)` : ''}
-                      {strands['1'] ? `${strands['1']}(+)` : ''}
+                      {score['-1'] ? `${score['-1']}(-)` : ''}
+                      {score['1'] ? `${score['1']}(+)` : ''}
                     </td>
                     <td>{key}</td>
                   </tr>
-                )
-              })
-            })}
+                )),
+            )}
           </tbody>
         </table>
       </div>

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -143,7 +143,7 @@ const stateModelFactory = (
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read
             colorBy: self.colorBy ? getSnapshot(self.colorBy) : undefined,
-            filterBy: self.filterBy,
+            filterBy: self.filterBy ? getSnapshot(self.filterBy) : undefined,
           }
         },
       }

package/src/PileupRenderer/PileupLayoutSession.ts

@@ -10,6 +10,7 @@ export interface PileupLayoutSessionProps {
   config: AnyConfigurationModel
   bpPerPx: number
   filters: SerializableFilterChain
+  filterBy: unknown
   sortedBy: unknown
   showSoftClip: unknown
 }
@@ -19,6 +20,7 @@ interface CachedPileupLayout {
   layout: MyMultiLayout
   config: AnyConfigurationModel
   filters: SerializableFilterChain
+  filterBy: unknown
   sortedBy: unknown
   showSoftClip: boolean
 }
@@ -26,6 +28,7 @@ interface CachedPileupLayout {
 // Adds extra conditions to see if cached layout is valid
 export class PileupLayoutSession extends LayoutSession {
   sortedBy: unknown
+  filterBy: unknown
 
   showSoftClip = false
 
@@ -38,7 +41,8 @@ export class PileupLayoutSession extends LayoutSession {
     return (
       super.cachedLayoutIsValid(cachedLayout) &&
       this.showSoftClip === cachedLayout.showSoftClip &&
-      deepEqual(this.sortedBy, cachedLayout.sortedBy)
+      deepEqual(this.sortedBy, cachedLayout.sortedBy) &&
+      deepEqual(this.filterBy, cachedLayout.filterBy)
     )
   }
 
@@ -50,6 +54,7 @@ export class PileupLayoutSession extends LayoutSession {
         layout: this.makeLayout(),
         config: readConfObject(this.config),
         filters: this.filters,
+        filterBy: this.filterBy,
         sortedBy: this.sortedBy,
         showSoftClip: this.showSoftClip,
       }