Centralize some of the parsing logic

GMOD · Nov 10, 2024 · 4a5e7cf · 4a5e7cf
1 parent 25f9857
commit 4a5e7cf
Show file tree

Hide file tree

Showing 16 changed files with 178 additions and 278 deletions.
diff --git a/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts b/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts
@@ -95,7 +95,10 @@ export function SharedLinearPileupDisplayMixin(
         /**
          * #property
          */
-        filterBy: types.frozen<FilterBy>(),
+        filterBy: types.optional(types.frozen<FilterBy>(), {
+          flagInclude: 0,
+          flagExclude: 1540,
+        }),
         /**
          * #property
          */

diff --git a/plugins/alignments/src/LinearPileupDisplay/components/ColorByModificationsDialog.tsx b/plugins/alignments/src/LinearPileupDisplay/components/ColorByModificationsDialog.tsx
diff --git a/plugins/alignments/src/LinearPileupDisplay/components/ModificationsTable.tsx b/plugins/alignments/src/LinearPileupDisplay/components/ModificationsTable.tsx
diff --git a/plugins/alignments/src/LinearPileupDisplay/model.ts b/plugins/alignments/src/LinearPileupDisplay/model.ts
@@ -362,7 +362,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                         })
                       },
                     })),
-
+                    { type: 'divider' },
                     {
                       label: 'All modifications (2-color)',
                       onClick: () => {
@@ -386,8 +386,9 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                         })
                       },
                     })),
+                    { type: 'divider' },
                     {
-                      label: 'All reference CpG',
+                      label: 'All reference CpGs',
                       onClick: () => {
                         self.setColorScheme({
                           type: 'methylation',

diff --git a/plugins/alignments/src/LinearReadArcsDisplay/model.ts b/plugins/alignments/src/LinearReadArcsDisplay/model.ts
@@ -1,5 +1,5 @@
 import React, { lazy } from 'react'
-import { cast, types, Instance } from 'mobx-state-tree'
+import { types, Instance } from 'mobx-state-tree'
 import {
   AnyConfigurationSchemaType,
   ConfigurationReference,
@@ -20,7 +20,7 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 import { ColorBy, FilterBy } from '../shared/types'
 import { ChainData } from '../shared/fetchChains'
 
-// async
+// lazies
 const FilterByTagDialog = lazy(
   () => import('../shared/components/FilterByTagDialog'),
 )
@@ -127,8 +127,10 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #action
        */
-      setColorScheme(s: { type: string }) {
-        self.colorBy = cast(s)
+      setColorScheme(colorBy: { type: string }) {
+        self.colorBy = {
+          ...colorBy,
+        }
       },
 
       /**
@@ -156,7 +158,9 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
        * #action
        */
       setFilterBy(filter: FilterBy) {
-        self.filterBy = cast(filter)
+        self.filterBy = {
+          ...filter,
+        }
       },
 
       /**

diff --git a/plugins/alignments/src/LinearReadCloudDisplay/model.ts b/plugins/alignments/src/LinearReadCloudDisplay/model.ts
@@ -1,5 +1,5 @@
 import React, { lazy } from 'react'
-import { cast, types, Instance } from 'mobx-state-tree'
+import { types, Instance } from 'mobx-state-tree'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
 import {
   AnyConfigurationSchemaType,
@@ -113,8 +113,10 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         self.ref = ref
       },
 
-      setColorScheme(s: { type: string }) {
-        self.colorBy = cast(s)
+      setColorScheme(colorBy: { type: string }) {
+        self.colorBy = {
+          ...colorBy,
+        }
       },
 
       /**
@@ -128,7 +130,9 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
        * #action
        */
       setFilterBy(filter: FilterBy) {
-        self.filterBy = cast(filter)
+        self.filterBy = {
+          ...filter,
+        }
       },
     }))
     .views(self => ({

diff --git a/plugins/alignments/src/LinearSNPCoverageDisplay/components/Tooltip.tsx b/plugins/alignments/src/LinearSNPCoverageDisplay/components/Tooltip.tsx
@@ -2,10 +2,10 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { Feature, toLocale } from '@jbrowse/core/util'
 import { Tooltip } from '@jbrowse/plugin-wiggle'
+import { makeStyles } from 'tss-react/mui'
 
 // locals
 import { BaseCoverageBin } from '../../shared/types'
-import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()(() => ({
   td: {
@@ -22,7 +22,8 @@ interface Props {
 }
 
 const TooltipContents = React.forwardRef<HTMLDivElement, Props>(
-  function TooltipContents2({ feature }, reactRef) {
+  function TooltipContents2(props, reactRef) {
+    const { feature, model } = props
     const { classes } = useStyles()
     const start = feature.get('start') + 1
     const end = feature.get('end')
@@ -43,6 +44,7 @@ const TooltipContents = React.forwardRef<HTMLDivElement, Props>(
           <caption>{loc}</caption>
           <thead>
             <tr>
+              <th />
               <th>Base</th>
               <th>Count</th>
               <th>% of Total</th>
@@ -51,12 +53,14 @@ const TooltipContents = React.forwardRef<HTMLDivElement, Props>(
           </thead>
           <tbody>
             <tr>
+              <td />
               <td>Total</td>
               <td>{readsCounted}</td>
               <td> </td>
               <td> </td>
             </tr>
             <tr>
+              <td />
               <td>REF {refbase ? `(${refbase.toUpperCase()})` : ''}</td>
               <td>{ref.entryDepth}</td>
               <td>{pct(ref.entryDepth, readsCounted)}</td>
@@ -68,8 +72,11 @@ const TooltipContents = React.forwardRef<HTMLDivElement, Props>(
 
             {Object.entries(info).map(([key, entry]) =>
               Object.entries(entry).map(([base, score]) => (
-                <tr key={base}>
-                  <td>{base.toUpperCase()}</td>
+                <tr key={`${key}_${base}`}>
+                  <td>
+                    <ColorSquare model={model} base={base} />
+                  </td>
+                  <td>{base.toUpperCase()} </td>
                   <td className={classes.td}>
                     {[
                       score.entryDepth,
@@ -100,6 +107,25 @@ const TooltipContents = React.forwardRef<HTMLDivElement, Props>(
   },
 )
 
+function ColorSquare({
+  base,
+  model,
+}: {
+  base: string
+  model: { visibleModifications: Map<string, { color: string }> }
+}) {
+  const { visibleModifications } = model
+  return base.startsWith('mod_') ? (
+    <div
+      style={{
+        width: 10,
+        height: 10,
+        background: visibleModifications.get(base.replace('mod_', ''))?.color,
+      }}
+    />
+  ) : null
+}
+
 type Coord = [number, number]
 
 const SNPCoverageTooltip = observer(function (props: {

diff --git a/plugins/alignments/src/LinearSNPCoverageDisplay/model.ts b/plugins/alignments/src/LinearSNPCoverageDisplay/model.ts
@@ -1,5 +1,5 @@
 import { lazy } from 'react'
-import { types, cast, getEnv, getSnapshot, isAlive } from 'mobx-state-tree'
+import { types, cast, getEnv, isAlive } from 'mobx-state-tree'
 import { observable } from 'mobx'
 
 // jbrowse
@@ -62,7 +62,10 @@ function stateModelFactory(
         /**
          * #property
          */
-        filterBy: types.frozen<FilterBy>(),
+        filterBy: types.optional(types.frozen<FilterBy>(), {
+          flagInclude: 0,
+          flagExclude: 1540,
+        }),
         /**
          * #property
          */

diff --git a/plugins/alignments/src/ModificationParser/index.ts b/plugins/alignments/src/ModificationParser/index.ts
@@ -3,7 +3,14 @@ import { getTagAlt } from '../util'
 import { getNextRefPos } from '../MismatchParser'
 
 const modificationRegex = new RegExp(/([A-Z])([-+])([^,.?]+)([.?])?/)
-
+// ML stores probabilities as array of numerics and MP is scaled phred scores
+// https://github.com/samtools/hts-specs/pull/418/files#diff-e765c6479316309f56b636f88189cdde8c40b854c7bdcce9ee7fe87a4e76febcR596
+//
+// if we have ML or Ml, it is an 8bit probability, divide by 255
+//
+// if we have MP or Mp it is phred scaled ASCII, which can go up to 90 but has
+// very high likelihood basecalls at that point, we really only care about low
+// qual calls <20 approx
 export function getModProbabilities(feature: Feature) {
   const m = (getTagAlt(feature, 'ML', 'Ml') as number[] | string) || []
   return m

diff --git a/plugins/alignments/src/PileupRenderer/PileupRenderer.ts b/plugins/alignments/src/PileupRenderer/PileupRenderer.ts
@@ -19,7 +19,7 @@ import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 // locals
 import { fetchSequence } from '../util'
 import { layoutFeats } from './layoutFeatures'
-import { ModificationTypeWithColor } from '../shared/types'
+import { ColorBy, ModificationTypeWithColor } from '../shared/types'
 
 interface SortedBy {
   type: string
@@ -29,14 +29,6 @@ interface SortedBy {
   tag?: string
 }
 
-interface ColorBy {
-  type: string
-  tag?: string
-  modifications?: {
-    isolatedModification?: string
-  }
-}
-
 export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
   colorBy?: ColorBy
   colorTagMap?: Record<string, string>