@jbrowse/plugin-alignments 2.4.1 → 2.5.0

package/src/AlignmentsFeatureDetail/AlignmentsFeatureDetail.tsx

@@ -1,196 +1,121 @@
 import React, { useState } from 'react'
-import {
-  Typography,
-  Link,
-  Paper,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
+import { Link, Paper } from '@mui/material'
 import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
 import copy from 'copy-to-clipboard'
 import clone from 'clone'
-import {
-  FeatureDetails,
-  BaseCard,
-  SimpleValue,
-} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import { parseCigar } from '../MismatchParser'
+import { FeatureDetails } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import { IAnyStateTreeNode } from 'mobx-state-tree'
 
-const useStyles = makeStyles()({
-  compact: {
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-})
+// locals
+import { getTag, navToLoc } from './util'
+import SupplementaryAlignments from './AlignmentsFeatureSuppAligns'
+import AlignmentFlags from './AlignmentsFeatureFlags'
 
 const omit = ['clipPos', 'flags']
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function AlignmentFlags(props: { feature: any }) {
-  const { classes } = useStyles()
-  const { feature } = props
-  const { flags } = feature
-  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',
-  ]
-  return (
-    <BaseCard {...props} title="Flags">
-      <SimpleValue name={'Flag'} value={flags} />
-
-      <FormGroup>
-        {flagNames.map((name, index) => {
-          const val = flags & (1 << index)
-          const key = `${name}_${val}`
-          return (
-            <FormControlLabel
-              key={key}
-              control={
-                <Checkbox
-                  className={classes.compact}
-                  checked={Boolean(val)}
-                  name={name}
-                  readOnly
-                />
-              }
-              label={name}
-            />
-          )
-        })}
-      </FormGroup>
-    </BaseCard>
-  )
+const tags = {
+  AM: 'The smallest template-independent mapping quality in the template',
+  AS: 'Alignment score generated by aligner',
+  BC: 'Barcode sequence identifying the sample',
+  BQ: 'Offset to base alignment quality (BAQ)',
+  BZ: 'Phred quality of the unique molecular barcode bases in the {OX} tag',
+  CB: 'Cell identifier',
+  CC: 'Reference name of the next hit',
+  CM: 'Edit distance between the color sequence and the color reference (see also {NM})',
+  CO: 'Free-text comments',
+  CP: 'Leftmost coordinate of the next hit',
+  CQ: 'Color read base qualities',
+  CR: 'Cellular barcode sequence bases (uncorrected)',
+  CS: 'Color read sequence',
+  CT: 'Complete read annotation tag, used for consensus annotation dummy features',
+  CY: 'Phred quality of the cellular barcode sequence in the {CR} tag',
+  E2: 'The 2nd most likely base calls',
+  FI: 'The index of segment in the template',
+  FS: 'Segment suffix',
+  FZ: 'Flow signal intensities',
+  GC: 'Reserved for backwards compatibility reasons',
+  GQ: 'Reserved for backwards compatibility reasons',
+  GS: 'Reserved for backwards compatibility reasons',
+  H0: 'Number of perfect hits',
+  H1: 'Number of 1-difference hits (see also {NM})',
+  H2: 'Number of 2-difference hits',
+  HI: 'Query hit index',
+  IH: 'Query hit total count',
+  LB: 'Library',
+  MC: 'CIGAR string for mate/next segment',
+  MD: 'String encoding mismatched and deleted reference bases',
+  MF: 'Reserved for backwards compatibility reasons',
+  MI: 'Molecular identifier; a string that uniquely identifies the molecule from which the record was derived',
+  ML: 'Base modification probabilities',
+  MM: 'Base modifications / methylation ',
+  MQ: 'Mapping quality of the mate/next segment',
+  NH: 'Number of reported alignments that contain the query in the current record',
+  NM: 'Edit distance to the reference',
+  OA: 'Original alignment',
+  OC: 'Original CIGAR (deprecated; use {OA} instead)',
+  OP: 'Original mapping position (deprecated; use {OA} instead)',
+  OQ: 'Original base quality',
+  OX: 'Original unique molecular barcode bases',
+  PG: 'Program',
+  PQ: 'Phred likelihood of the template',
+  PT: 'Read annotations for parts of the padded read sequence',
+  PU: 'Platform unit',
+  Q2: 'Phred quality of the mate/next segment sequence in the {R2} tag',
+  QT: 'Phred quality of the sample barcode sequence in the {BC} tag',
+  QX: 'Quality score of the unique molecular identifier in the {RX} tag',
+  R2: 'Sequence of the mate/next segment in the template',
+  RG: 'Read group',
+  RT: 'Reserved for backwards compatibility reasons',
+  RX: 'Sequence bases of the (possibly corrected) unique molecular identifier',
+  S2: 'Reserved for backwards compatibility reasons',
+  SA: 'Other canonical alignments in a chimeric alignment',
+  SM: 'Template-independent mapping quality',
+  SQ: 'Reserved for backwards compatibility reasons',
+  TC: 'The number of segments in the template',
+  TS: 'Transcript strand',
+  U2: 'Phred probability of the 2nd call being wrong conditional on the best being wrong',
+  UQ: 'Phred likelihood of the segment, conditional on the mapping being correct',
 }
 
 function Formatter({ value }: { value: unknown }) {
   const [show, setShow] = useState(false)
   const [copied, setCopied] = useState(false)
   const display = String(value)
-  if (display.length > 100) {
-    return (
-      <>
-        <button
-          type="button"
-          onClick={() => {
-            copy(display)
-            setCopied(true)
-            setTimeout(() => {
-              setCopied(false)
-            }, 700)
-          }}
-        >
-          {copied ? 'Copied to clipboard' : 'Copy'}
-        </button>
-        <button type="button" onClick={() => setShow(val => !val)}>
-          {show ? 'Show less' : 'Show more'}
-        </button>
-        <div>{show ? display : `${display.slice(0, 100)}...`}</div>
-      </>
-    )
-  }
-  return <div>{display}</div>
-}
-
-// utility function to get length of alignment from cigar
-function getLengthOnRef(cigar: string) {
-  const cigarOps = parseCigar(cigar)
-  let lengthOnRef = 0
-  for (let i = 0; i < cigarOps.length; i += 2) {
-    const len = +cigarOps[i]
-    const op = cigarOps[i + 1]
-    if (op !== 'H' && op !== 'S' && op !== 'I') {
-      lengthOnRef += len
-    }
-  }
-  return lengthOnRef
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function SupplementaryAlignments(props: { tag: string; model: any }) {
-  const { tag, model } = props
-  const session = getSession(model)
-  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})`
-            return (
-              <li key={`${locString}-${index}`}>
-                <Link
-                  onClick={async event => {
-                    event.preventDefault()
-                    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}`)
-                    }
-                  }}
-                  href="#"
-                >
-                  {displayString}
-                </Link>
-              </li>
-            )
-          })}
-      </ul>
-    </BaseCard>
+  return display.length > 100 ? (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          copy(display)
+          setCopied(true)
+          setTimeout(() => setCopied(false), 700)
+        }}
+      >
+        {copied ? 'Copied to clipboard' : 'Copy'}
+      </button>
+      <button type="button" onClick={() => setShow(val => !val)}>
+        {show ? 'Show less' : 'Show more'}
+      </button>
+      <div>{show ? display : `${display.slice(0, 100)}...`}</div>
+    </>
+  ) : (
+    <div>{display}</div>
   )
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function PairLink({ locString, model }: { locString: string; model: any }) {
-  const session = getSession(model)
+function PairLink({
+  locString,
+  model,
+}: {
+  locString: string
+  model: IAnyStateTreeNode
+}) {
   return (
     <Link
-      onClick={async () => {
-        const { view } = model
-        if (!view) {
-          throw new Error(
-            'No view associated with this feature detail panel anymore',
-          )
-        }
-        try {
-          await view.navToLocString(locString)
-        } catch (e) {
-          console.error(e)
-          session.notify(`${e}`)
-        }
+      onClick={event => {
+        event.preventDefault()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        navToLoc(locString, model)
       }}
       href="#"
     >
@@ -199,24 +124,27 @@ function PairLink({ locString, model }: { locString: string; model: any }) {
   )
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function AlignmentFeatureDetails(props: { model: any }) {
+export default observer(function AlignmentFeatureDetails(props: {
+  model: IAnyStateTreeNode
+}) {
   const { model } = props
   const feat = clone(model.featureData)
-  const SA = (feat.tags && feat.tags.SA) || feat.SA
+  const SA = getTag('SA', feat) as string
   return (
     <Paper data-testid="alignment-side-drawer">
       <FeatureDetails
         {...props}
         omit={omit}
+        // @ts-expect-error
+        descriptions={{ ...tags, tags }}
         feature={feat}
-        formatter={(value, key) => {
-          return key === 'next_segment_position' ? (
+        formatter={(value, key) =>
+          key === 'next_segment_position' ? (
             <PairLink model={model} locString={value as string} />
           ) : (
             <Formatter value={value} />
           )
-        }}
+        }
       />
       {SA ? <SupplementaryAlignments model={model} tag={SA} /> : null}
       {feat.flags !== undefined ? (
@@ -224,6 +152,4 @@ function AlignmentFeatureDetails(props: { model: any }) {
       ) : null}
     </Paper>
   )
-}
-
-export default observer(AlignmentFeatureDetails)
+})

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>
@@ -279,7 +280,7 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="css-1upvn7b-container2"
+                class="css-1lttu3w-container"
               >
                 <button
                   class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-sghohy-MuiButtonBase-root-MuiButton-root"
@@ -315,7 +316,6 @@ exports[`open up a widget 1`] = `
                     />
                   </button>
                 </div>
-                <br />
               </div>
             </div>
           </div>

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/AlignmentsTrack/configSchemaF.ts

@@ -0,0 +1,22 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+/**
+ * #config AlignmentsTrack
+ * has very little config; most config and state logic is on the display
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+export default function configSchemaFactory(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'AlignmentsTrack',
+    {},
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: createBaseTrackConfig(pluginManager),
+    },
+  )
+}

package/src/AlignmentsTrack/index.ts

@@ -1,32 +1,11 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import {
-  createBaseTrackConfig,
-  createBaseTrackModel,
-} from '@jbrowse/core/pluggableElementTypes/models'
+import { createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+import configSchemaF from './configSchemaF'
 
-/**
- * #config AlignmentsTrack
- * has very little config; most config and state logic is on the display
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-function configSchemaFactory(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'AlignmentsTrack',
-    {},
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: createBaseTrackConfig(pluginManager),
-    },
-  )
-}
 export default function register(pm: PluginManager) {
   pm.addTrackType(() => {
-    const configSchema = configSchemaFactory(pm)
+    const configSchema = configSchemaF(pm)
     const track = new TrackType({
       name: 'AlignmentsTrack',
       displayName: 'Alignments track',

package/src/BamAdapter/BamAdapter.ts

@@ -227,7 +227,10 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
     }, signal)
   }
 
-  async estimateRegionsStats(regions: Region[], opts?: BaseOptions) {
+  async getMultiRegionFeatureDensityStats(
+    regions: Region[],
+    opts?: BaseOptions,
+  ) {
     const { bam } = await this.configure()
     // this is a method to avoid calling on htsget adapters
     // @ts-expect-error
@@ -236,7 +239,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
       const fetchSizeLimit = this.getConf('fetchSizeLimit')
       return { bytes, fetchSizeLimit }
     } else {
-      return super.estimateRegionsStats(regions, opts)
+      return super.getMultiRegionFeatureDensityStats(regions, opts)
     }
   }
 

package/src/CramAdapter/CramAdapter.ts

@@ -278,7 +278,10 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
   }
 
   // we return the configured fetchSizeLimit, and the bytes for the region
-  async estimateRegionsStats(regions: Region[], opts?: BaseOptions) {
+  async getMultiRegionFeatureDensityStats(
+    regions: Region[],
+    opts?: BaseOptions,
+  ) {
     const bytes = await this.bytesForRegions(regions, opts)
     const fetchSizeLimit = this.getConf('fetchSizeLimit')
     return {

package/src/CramAdapter/CramTestAdapters.ts

@@ -2,7 +2,7 @@ import { GenericFilehandle } from 'generic-filehandle'
 import { Observable } from 'rxjs'
 import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
-import { ConfigurationSchema } from '@jbrowse/core/configuration/configurationSchema'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
 
 // setup for Cram Adapter Testing
 export function parseSmallFasta(text: string) {

package/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -9,7 +9,7 @@ import { AlignmentsDisplayModel } from '../models/model'
 
 const useStyles = makeStyles()({
   resizeHandle: {
-    height: 2,
+    height: 5,
     position: 'absolute',
     zIndex: 2,
   },
@@ -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/model.tsx

@@ -20,6 +20,7 @@ import {
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { MenuItem } from '@jbrowse/core/ui'
+import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 
 const minDisplayHeight = 20
 
@@ -161,6 +162,13 @@ function stateModelFactory(
       get height() {
         return self.heightPreConfig ?? getConf(self, 'height')
       },
+
+      get featureIdUnderMouse() {
+        return (
+          self.PileupDisplay.featureIdUnderMouse ||
+          self.SNPCoverageDisplay.featureIdUnderMouse
+        )
+      },
     }))
     .views(self => ({
       /**
@@ -234,9 +242,9 @@ function stateModelFactory(
       /**
        * #action
        */
-      updateStatsLimit(stats: unknown) {
-        self.PileupDisplay.updateStatsLimit(stats)
-        self.SNPCoverageDisplay.updateStatsLimit(stats)
+      setFeatureDensityStatsLimit(stats?: FeatureDensityStats) {
+        self.PileupDisplay.setFeatureDensityStatsLimit(stats)
+        self.SNPCoverageDisplay.setFeatureDensityStatsLimit(stats)
       },
 
       /**