Improved rendering of modifications (#4647)

plugins/alignments/src/AlignmentsFeatureDetail/getSAFeatures.ts

@@ -3,7 +3,6 @@ import { Feature, getSession } from '@jbrowse/core/util'
 // locals
 import { featurizeSA, getClip, getLengthSansClipping } from '../MismatchParser'
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { getTag } from '../util'
 
 export interface ReducedFeature {
   refName: string
@@ -33,7 +32,7 @@ export async function getSAFeatures({
   const { assemblyManager } = getSession(view)
   const cigar = feature.get('CIGAR') as string
   const origStrand = feature.get('strand') as number
-  const SA = (getTag(feature, 'SA') as string) || ''
+  const SA = (feature.get('tags')?.SA as string) || ''
   const readName = feature.get('name') as string
   const clipPos = getClip(cigar, 1)
 

plugins/alignments/src/BamAdapter/BamAdapter.ts

@@ -12,7 +12,7 @@ import { firstValueFrom } from 'rxjs'
 
 // locals
 import BamSlightlyLazyFeature from './BamSlightlyLazyFeature'
-import { IFilter } from '../shared'
+import { FilterBy } from '../shared/types'
 
 interface Header {
   idToName: string[]
@@ -162,7 +162,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
   getFeatures(
     region: Region & { originalRefName?: string },
     opts?: BaseOptions & {
-      filterBy: IFilter
+      filterBy: FilterBy
     },
   ) {
     const { refName, start, end, originalRefName } = region

plugins/alignments/src/CramAdapter/CramAdapter.ts

@@ -4,21 +4,16 @@ import {
   BaseOptions,
   BaseSequenceAdapter,
 } from '@jbrowse/core/data_adapters/BaseAdapter'
-import {
-  checkAbortSignal,
-  Region,
-  Feature,
-  updateStatus,
-  toLocale,
-} from '@jbrowse/core/util'
+import type { Region, Feature } from '@jbrowse/core/util'
+import { checkAbortSignal, updateStatus, toLocale } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { toArray } from 'rxjs/operators'
 import { firstValueFrom } from 'rxjs'
 
 // locals
 import CramSlightlyLazyFeature from './CramSlightlyLazyFeature'
-import { IFilter } from '../shared'
+import { FilterBy } from '../shared/types'
 
 interface Header {
   idToName?: string[]
@@ -214,7 +209,7 @@ export default class CramAdapter extends BaseFeatureDataAdapter {
   getFeatures(
     region: Region & { originalRefName?: string },
     opts?: BaseOptions & {
-      filterBy: IFilter
+      filterBy: FilterBy
     },
   ) {
     const { signal, filterBy, statusCallback = () => {} } = opts || {}

plugins/alignments/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -5,7 +5,7 @@ import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
 
 // locals
-import { LinearAlignmentsDisplayModel } from '../models/model'
+import { LinearAlignmentsDisplayModel } from '../model'
 
 const useStyles = makeStyles()({
   resizeHandle: {

plugins/alignments/src/LinearAlignmentsDisplay/index.ts

@@ -1,8 +1,8 @@
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
 import PluginManager from '@jbrowse/core/PluginManager'
 // locals
-import configSchemaFactory from './models/configSchema'
-import modelFactory from './models/model'
+import configSchemaFactory from './configSchema'
+import modelFactory from './model'
 import ReactComponent from './components/AlignmentsDisplay'
 
 export default function LinearAlignmentsDisplayF(pluginManager: PluginManager) {

plugins/alignments/src/LinearAlignmentsDisplay/models/model.tsx → plugins/alignments/src/LinearAlignmentsDisplay/model.tsx

@@ -6,7 +6,6 @@ import {
   isAlive,
   types,
   Instance,
-  IStateTreeNode,
 } from 'mobx-state-tree'
 import deepEqual from 'fast-deep-equal'
 
@@ -24,20 +23,10 @@ import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 // locals
 import { LinearAlignmentsDisplayMixin } from './alignmentsModel'
 import { getLowerPanelDisplays } from './util'
-import { IFilter } from '../../shared'
+import { FilterBy } from '../shared/types'
 
 const minDisplayHeight = 20
 
-function deepSnap<T extends IStateTreeNode, U extends IStateTreeNode>(
-  x1?: T,
-  x2?: U,
-) {
-  return deepEqual(
-    x1 ? getSnapshot(x1) : undefined,
-    x2 ? getSnapshot(x2) : undefined,
-  )
-}
-
 function preCheck(self: LinearAlignmentsDisplayModel) {
   const { PileupDisplay, SNPCoverageDisplay } = self
   return (
@@ -53,8 +42,10 @@ function propagateColorBy(self: LinearAlignmentsDisplayModel) {
   if (!preCheck(self) || !PileupDisplay.colorBy) {
     return
   }
-  if (!deepSnap(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
-    SNPCoverageDisplay.setColorBy(getSnapshot(PileupDisplay.colorBy))
+  if (!deepEqual(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
+    SNPCoverageDisplay.setColorScheme({
+      ...PileupDisplay.colorBy,
+    })
   }
 }
 
@@ -63,8 +54,10 @@ function propagateFilterBy(self: LinearAlignmentsDisplayModel) {
   if (!preCheck(self) || !PileupDisplay.filterBy) {
     return
   }
-  if (!deepSnap(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
-    SNPCoverageDisplay.setFilterBy(getSnapshot(PileupDisplay.filterBy))
+  if (!deepEqual(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
+    SNPCoverageDisplay.setFilterBy({
+      ...PileupDisplay.filterBy,
+    })
   }
 }
 
@@ -85,6 +78,9 @@ function stateModelFactory(
       LinearAlignmentsDisplayMixin(pluginManager, configSchema),
     )
     .volatile(() => ({
+      /**
+       * #volatile
+       */
       scrollTop: 0,
     }))
     .actions(self => ({
@@ -216,7 +212,7 @@ function stateModelFactory(
       /**
        * #action
        */
-      setFilterBy(filter: IFilter) {
+      setFilterBy(filter: FilterBy) {
         self.PileupDisplay.setFilterBy(filter)
         self.SNPCoverageDisplay.setFilterBy(filter)
       },

plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts

@@ -1,6 +1,6 @@
 import { lazy } from 'react'
 import { autorun, observable } from 'mobx'
-import { cast, types, addDisposer, getSnapshot } from 'mobx-state-tree'
+import { cast, types, addDisposer, isAlive } from 'mobx-state-tree'
 import copy from 'copy-to-clipboard'
 import {
   AnyConfigurationModel,
@@ -14,12 +14,12 @@ import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import {
   getEnv,
   getSession,
-  isSessionModelWithWidgets,
   getContainingView,
+  getContainingTrack,
+  isSessionModelWithWidgets,
   SimpleFeature,
   SimpleFeatureSerialized,
   Feature,
-  getContainingTrack,
 } from '@jbrowse/core/util'
 
 import {
@@ -34,12 +34,15 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 
 // locals
 import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb'
-import { getUniqueTagValues, FilterModel, IFilter } from '../shared'
 import { createAutorun } from '../util'
-import { ColorByModel, ExtraColorBy } from '../shared/color'
+import { ColorBy, FilterBy } from '../shared/types'
+import { getUniqueTags } from '../shared/getUniqueTags'
+import { defaultFilterFlags } from '../shared/util'
 
 // lazies
-const FilterByTagDialog = lazy(() => import('../shared/FilterByTagDialog'))
+const FilterByTagDialog = lazy(
+  () => import('../shared/components/FilterByTagDialog'),
+)
 const ColorByTagDialog = lazy(() => import('./components/ColorByTagDialog'))
 const SetFeatureHeightDialog = lazy(
   () => import('./components/SetFeatureHeightDialog'),
@@ -89,11 +92,11 @@ export function SharedLinearPileupDisplayMixin(
         /**
          * #property
          */
-        colorBy: ColorByModel,
+        colorBy: types.frozen<ColorBy | undefined>(),
         /**
          * #property
          */
-        filterBy: types.optional(FilterModel, {}),
+        filterBy: types.optional(types.frozen<FilterBy>(), defaultFilterFlags),
         /**
          * #property
          */
@@ -147,13 +150,11 @@ export function SharedLinearPileupDisplayMixin(
       /**
        * #action
        */
-      setColorScheme(colorScheme: {
-        type: string
-        tag?: string
-        extra?: ExtraColorBy
-      }) {
-        self.colorTagMap = observable.map({}) // clear existing mapping
-        self.colorBy = cast(colorScheme)
+      setColorScheme(colorScheme: ColorBy) {
+        self.colorTagMap = observable.map({})
+        self.colorBy = {
+          ...colorScheme,
+        }
         if (colorScheme.tag) {
           self.tagsReady = false
         }
@@ -235,8 +236,10 @@ export function SharedLinearPileupDisplayMixin(
       /**
        * #action
        */
-      setFilterBy(filter: IFilter) {
-        self.filterBy = cast(filter)
+      setFilterBy(filter: FilterBy) {
+        self.filterBy = {
+          ...filter,
+        }
       },
 
       /**
@@ -357,15 +360,14 @@ export function SharedLinearPileupDisplayMixin(
          */
         renderPropsPre() {
           const { colorTagMap, colorBy, filterBy, rpcDriverName } = self
-
           const superProps = superRenderProps()
           return {
             ...superProps,
             notReady: superProps.notReady || !self.renderReady(),
             rpcDriverName,
             displayModel: self,
-            colorBy: colorBy ? getSnapshot(colorBy) : undefined,
-            filterBy: JSON.parse(JSON.stringify(filterBy)),
+            colorBy,
+            filterBy,
             filters: self.filters,
             colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
             config: self.rendererConfig,
@@ -443,37 +445,49 @@ export function SharedLinearPileupDisplayMixin(
             {
               label: 'Normal',
               onClick: () => {
-                self.setColorScheme({ type: 'normal' })
+                self.setColorScheme({
+                  type: 'normal',
+                })
               },
             },
             {
               label: 'Mapping quality',
               onClick: () => {
-                self.setColorScheme({ type: 'mappingQuality' })
+                self.setColorScheme({
+                  type: 'mappingQuality',
+                })
               },
             },
             {
               label: 'Strand',
               onClick: () => {
-                self.setColorScheme({ type: 'strand' })
+                self.setColorScheme({
+                  type: 'strand',
+                })
               },
             },
             {
               label: 'Per-base quality',
               onClick: () => {
-                self.setColorScheme({ type: 'perBaseQuality' })
+                self.setColorScheme({
+                  type: 'perBaseQuality',
+                })
               },
             },
             {
               label: 'Per-base lettering',
               onClick: () => {
-                self.setColorScheme({ type: 'perBaseLettering' })
+                self.setColorScheme({
+                  type: 'perBaseLettering',
+                })
               },
             },
             {
               label: 'First-of-pair strand',
               onClick: () => {
-                self.setColorScheme({ type: 'stranded' })
+                self.setColorScheme({
+                  type: 'stranded',
+                })
               },
             },
             {
@@ -578,14 +592,18 @@ export function SharedLinearPileupDisplayMixin(
             const { colorBy, tagsReady } = self
             const { staticBlocks } = view
             if (colorBy?.tag && !tagsReady) {
-              const vals = await getUniqueTagValues({
+              const vals = await getUniqueTags({
                 self,
                 tag: colorBy.tag,
                 blocks: staticBlocks,
               })
-              self.updateColorTagMap(vals)
+              if (isAlive(self)) {
+                self.updateColorTagMap(vals)
+                self.setTagsReady(true)
+              }
+            } else {
+              self.setTagsReady(true)
             }
-            self.setTagsReady(true)
           },
           { delay: 1000 },
         )
@@ -621,6 +639,7 @@ export function SharedLinearPileupDisplayMixin(
                   // moused over to a new position during the async operation
                   // above
                   if (
+                    isAlive(self) &&
                     feature &&
                     self.featureIdUnderMouse === feature.uniqueId
                   ) {