@jbrowse/plugin-alignments 2.4.2 → 2.6.0

package/src/LinearPileupDisplay/model.ts

@@ -1,6 +1,12 @@
 import { lazy } from 'react'
 import { autorun, observable } from 'mobx'
-import { cast, types, addDisposer, Instance } from 'mobx-state-tree'
+import {
+  cast,
+  types,
+  addDisposer,
+  getSnapshot,
+  Instance,
+} from 'mobx-state-tree'
 import copy from 'copy-to-clipboard'
 import {
   AnyConfigurationModel,
@@ -40,6 +46,8 @@ import {
   FilterModel,
 } from '../shared'
 import { SimpleFeatureSerialized } from '@jbrowse/core/util/simpleFeature'
+import { createAutorun, modificationColors } from '../util'
+import { randomColor } from '../util'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
@@ -57,8 +65,16 @@ const rendererTypes = new Map([
 
 type LGV = LinearGenomeViewModel
 
+export interface Filter {
+  flagInclude: number
+  flagExclude: number
+  readName?: string
+  tagFilter?: { tag: string; value: string }
+}
+
 /**
  * #stateModel LinearPileupDisplay
+ * #category display
  * extends `BaseLinearDisplay`
  */
 function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
@@ -99,6 +115,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
          * #property
          */
         mismatchAlpha: types.maybe(types.boolean),
+
         /**
          * #property
          */
@@ -134,14 +151,38 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       modificationTagMap: observable.map<string, string>({}),
       featureUnderMouseVolatile: undefined as undefined | Feature,
       currSortBpPerPx: 0,
-      ready: false,
+      modificationsReady: false,
+      sortReady: false,
+      tagsReady: false,
+    }))
+    .views(self => ({
+      get autorunReady() {
+        const view = getContainingView(self) as LGV
+        return (
+          view.initialized &&
+          self.featureDensityStatsReady &&
+          !self.regionTooLarge
+        )
+      },
     }))
     .actions(self => ({
       /**
        * #action
        */
-      setReady(flag: boolean) {
-        self.ready = flag
+      setModificationsReady(flag: boolean) {
+        self.modificationsReady = flag
+      },
+      /**
+       * #action
+       */
+      setTagsReady(flag: boolean) {
+        self.tagsReady = flag
+      },
+      /**
+       * #action
+       */
+      setSortReady(flag: boolean) {
+        self.sortReady = flag
       },
       /**
        * #action
@@ -174,19 +215,20 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       setColorScheme(colorScheme: { type: string; tag?: string }) {
         self.colorTagMap = observable.map({}) // clear existing mapping
         self.colorBy = cast(colorScheme)
-        self.ready = false
+        self.tagsReady = false
+        self.modificationsReady = false
       },
 
       /**
        * #action
        */
       updateModificationColorMap(uniqueModifications: string[]) {
-        const colorPalette = ['red', 'blue', 'green', 'orange', 'purple']
         uniqueModifications.forEach(value => {
           if (!self.modificationTagMap.has(value)) {
-            const totalKeys = [...self.modificationTagMap.keys()].length
-            const newColor = colorPalette[totalKeys]
-            self.modificationTagMap.set(value, newColor)
+            self.modificationTagMap.set(
+              value,
+              modificationColors[value] || randomColor(),
+            )
           }
         })
       },
@@ -214,8 +256,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         uniqueTag.forEach(value => {
           if (!self.colorTagMap.has(value)) {
             const totalKeys = [...self.colorTagMap.keys()].length
-            const newColor = colorPalette[totalKeys]
-            self.colorTagMap.set(value, newColor)
+            self.colorTagMap.set(value, colorPalette[totalKeys])
           }
         })
       },
@@ -225,132 +266,6 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       setFeatureUnderMouse(feat?: Feature) {
         self.featureUnderMouseVolatile = feat
       },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        addDisposer(
-          self,
-          autorun(
-            async () => {
-              try {
-                const { rpcManager } = getSession(self)
-                const view = getContainingView(self) as LGV
-                const {
-                  sortedBy,
-                  colorBy,
-                  parentTrack,
-                  adapterConfig,
-                  rendererType,
-                } = self
-
-                if (
-                  !view.initialized ||
-                  !self.estimatedStatsReady ||
-                  self.regionTooLarge
-                ) {
-                  return
-                }
-
-                const { staticBlocks, bpPerPx } = view
-                // continually generate the vc pairing, set and rerender if any
-                // new values seen
-                if (colorBy?.tag) {
-                  self.updateColorTagMap(
-                    await getUniqueTagValues(self, colorBy, staticBlocks),
-                  )
-                }
-
-                if (colorBy?.type === 'modifications') {
-                  const adapter = getConf(parentTrack, ['adapter'])
-                  self.updateModificationColorMap(
-                    await getUniqueModificationValues(
-                      self,
-                      adapter,
-                      colorBy,
-                      staticBlocks,
-                    ),
-                  )
-                }
-
-                if (sortedBy) {
-                  const { pos, refName, assemblyName } = sortedBy
-                  // render just the sorted region first
-                  // @ts-expect-error
-                  await self.rendererType.renderInClient(rpcManager, {
-                    assemblyName,
-                    regions: [
-                      {
-                        start: pos,
-                        end: pos + 1,
-                        refName,
-                        assemblyName,
-                      },
-                    ],
-                    adapterConfig: adapterConfig,
-                    rendererType: rendererType.name,
-                    sessionId: getRpcSessionId(self),
-                    layoutId: view.id,
-                    timeout: 1000000,
-                    ...self.renderProps(),
-                  })
-                  self.setReady(true)
-                  self.setCurrSortBpPerPx(bpPerPx)
-                } else {
-                  self.setReady(true)
-                }
-              } catch (e) {
-                console.error(e)
-                self.setError(e)
-              }
-            },
-            { delay: 1000 },
-          ),
-        )
-
-        // autorun synchronizes featureUnderMouse with featureIdUnderMouse
-        // asynchronously. this is needed due to how we do not serialize all
-        // features from the BAM/CRAM over the rpc
-        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-expect-error
-                  if (self.featureIdUnderMouse === feature.uniqueId) {
-                    // @ts-expect-error
-                    self.setFeatureUnderMouse(new SimpleFeature(feature))
-                  }
-                }
-              }
-            } catch (e) {
-              console.error(e)
-              session.notify(`${e}`, 'error')
-            }
-          }),
-        )
-      },
 
       /**
        * #action
@@ -403,8 +318,8 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #action
        */
-      setConfig(configuration: AnyConfigurationModel) {
-        self.configuration = configuration
+      setConfig(conf: AnyConfigurationModel) {
+        self.configuration = conf
       },
 
       /**
@@ -422,6 +337,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           return
         }
 
+        self.sortReady = false
         self.sortedBy = {
           type,
           pos: centerBp,
@@ -429,14 +345,8 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           assemblyName,
           tag,
         }
-        self.ready = false
       },
-      setFilterBy(filter: {
-        flagInclude: number
-        flagExclude: number
-        readName?: string
-        tagFilter?: { tag: string; value: string }
-      }) {
+      setFilterBy(filter: Filter) {
         self.filterBy = cast(filter)
       },
     }))
@@ -456,49 +366,51 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
     })
 
     .views(self => ({
-      /**
-       * #getter
-       */
-      get maxHeight() {
-        const conf = getConf(self, ['renderers', self.rendererTypeName]) || {}
-        return self.trackMaxHeight !== undefined
-          ? self.trackMaxHeight
-          : conf.maxHeight
-      },
-
       /**
        * #getter
        */
       get rendererConfig() {
-        const configBlob =
-          getConf(self, ['renderers', self.rendererTypeName]) || {}
+        const {
+          featureHeight,
+          noSpacing,
+          trackMaxHeight,
+          mismatchAlpha,
+          rendererTypeName,
+        } = self
+        const configBlob = getConf(self, ['renderers', rendererTypeName]) || {}
         return self.rendererType.configSchema.create(
           {
             ...configBlob,
-            height: self.featureHeight,
-            noSpacing: self.noSpacing,
-            maxHeight: this.maxHeight,
-            mismatchAlpha: self.mismatchAlpha,
+            ...(featureHeight !== undefined ? { height: featureHeight } : {}),
+            ...(noSpacing !== undefined ? { noSpacing } : {}),
+            ...(mismatchAlpha !== undefined ? { mismatchAlpha } : {}),
+            ...(trackMaxHeight !== undefined
+              ? { maxHeight: trackMaxHeight }
+              : {}),
           },
           getEnv(self),
         )
       },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get maxHeight() {
+        return readConfObject(self.rendererConfig, 'maxHeight')
+      },
 
       /**
        * #getter
        */
       get featureHeightSetting() {
-        return (
-          self.featureHeight || readConfObject(this.rendererConfig, 'height')
-        )
+        return readConfObject(self.rendererConfig, 'height')
       },
       /**
        * #getter
        */
       get mismatchAlphaSetting() {
-        return self.mismatchAlpha !== undefined
-          ? self.mismatchAlpha
-          : readConfObject(this.rendererConfig, 'mismatchAlpha')
+        return readConfObject(self.rendererConfig, 'mismatchAlpha')
       },
       /**
        * #getter
@@ -506,6 +418,17 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       get featureUnderMouse() {
         return self.featureUnderMouseVolatile
       },
+      /**
+       * #getter
+       */
+      get renderReady() {
+        const view = getContainingView(self) as LGV
+        return (
+          self.modificationsReady &&
+          self.tagsReady &&
+          self.currSortBpPerPx === view.bpPerPx
+        )
+      },
     }))
     .views(self => {
       const {
@@ -531,12 +454,12 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
          */
         contextMenuItems() {
           const feat = self.contextMenuFeature
-          const contextMenuItems = feat
+          return feat
             ? [
                 {
                   label: 'Open feature details',
                   icon: MenuOpenIcon,
-                  onClick: () => {
+                  onClick: (): void => {
                     self.clearFeatureSelection()
                     if (feat) {
                       self.selectFeature(feat)
@@ -546,7 +469,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                 {
                   label: 'Copy info to clipboard',
                   icon: ContentCopyIcon,
-                  onClick: () => {
+                  onClick: (): void => {
                     if (feat) {
                       self.copyFeatureToClipboard(feat)
                     }
@@ -554,7 +477,6 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                 },
               ]
             : []
-          return contextMenuItems
         },
 
         /**
@@ -566,8 +488,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         /**
          * #method
          */
-        renderProps() {
-          const view = getContainingView(self) as LGV
+        renderPropsPre() {
           const {
             colorTagMap,
             modificationTagMap,
@@ -575,22 +496,16 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
             colorBy,
             filterBy,
             rpcDriverName,
-            currSortBpPerPx,
-            ready,
           } = self
 
           const superProps = superRenderProps()
-
           return {
             ...superProps,
-            notReady:
-              superProps.notReady ||
-              !ready ||
-              (sortedBy && currSortBpPerPx !== view.bpPerPx),
+            notReady: superProps.notReady || !self.renderReady,
             rpcDriverName,
             displayModel: self,
-            sortedBy,
-            colorBy,
+            sortedBy: sortedBy ? getSnapshot(sortedBy) : undefined,
+            colorBy: colorBy ? getSnapshot(colorBy) : undefined,
             filterBy: JSON.parse(JSON.stringify(filterBy)),
             colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
             modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
@@ -614,10 +529,9 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                       layoutId: getContainingView(self).id,
                       rendererType: 'PileupRenderer',
                     },
-                  )) as { feature: unknown }
+                  )) as { feature: SimpleFeatureSerialized | undefined }
 
                   if (feature) {
-                    // @ts-expect-error
                     self.selectFeature(new SimpleFeature(feature))
                   }
                 }
@@ -663,6 +577,20 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           }
         },
 
+        // renderProps and renderPropsPre are separated due to sortReady
+        // causing a infinite loop in the sort autorun, since the sort autorun
+        // uses renderProps
+        /**
+         * #method
+         */
+        renderProps() {
+          const pre = this.renderPropsPre()
+          return {
+            ...pre,
+            notReady: pre.notReady || !self.sortReady,
+          }
+        },
+
         /**
          * #method
          */
@@ -827,9 +755,130 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         },
       }
     })
+    .actions(self => ({
+      afterAttach() {
+        createAutorun(
+          self,
+          async () => {
+            const view = getContainingView(self) as LGV
+            if (!self.autorunReady) {
+              return
+            }
+
+            const { colorBy } = self
+            const { staticBlocks } = view
+            if (colorBy?.tag) {
+              const vals = await getUniqueTagValues(self, colorBy, staticBlocks)
+              self.updateColorTagMap(vals)
+            }
+            self.setTagsReady(true)
+          },
+          { delay: 1000 },
+        )
+        createAutorun(self, async () => {
+          if (!self.autorunReady) {
+            return
+          }
+          const { parentTrack, colorBy } = self
+          const { staticBlocks } = getContainingView(self) as LGV
+          if (colorBy?.type === 'modifications') {
+            const adapter = getConf(parentTrack, ['adapter'])
+            const vals = await getUniqueModificationValues(
+              self,
+              adapter,
+              colorBy,
+              staticBlocks,
+            )
+            self.updateModificationColorMap(vals)
+          }
+          self.setModificationsReady(true)
+        })
+
+        createAutorun(
+          self,
+          async () => {
+            const { rpcManager } = getSession(self)
+            const view = getContainingView(self) as LGV
+            if (!self.autorunReady) {
+              return
+            }
+
+            const { sortedBy, adapterConfig, rendererType } = self
+            const { bpPerPx } = view
+
+            if (sortedBy) {
+              const { pos, refName, assemblyName } = sortedBy
+              // render just the sorted region first
+              // @ts-expect-error
+              await self.rendererType.renderInClient(rpcManager, {
+                assemblyName,
+                regions: [
+                  {
+                    start: pos,
+                    end: pos + 1,
+                    refName,
+                    assemblyName,
+                  },
+                ],
+                adapterConfig,
+                rendererType: rendererType.name,
+                sessionId: getRpcSessionId(self),
+                layoutId: view.id,
+                timeout: 1_000_000,
+                ...self.renderPropsPre(),
+              })
+            }
+            self.setCurrSortBpPerPx(bpPerPx)
+            self.setSortReady(true)
+          },
+          { delay: 1000 },
+        )
+
+        // autorun synchronizes featureUnderMouse with featureIdUnderMouse
+        // asynchronously. this is needed due to how we do not serialize all
+        // features from the BAM/CRAM over the rpc
+        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: SimpleFeatureSerialized }
+
+                  // 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
+                  if (self.featureIdUnderMouse === feature.uniqueId) {
+                    self.setFeatureUnderMouse(new SimpleFeature(feature))
+                  }
+                }
+              }
+            } catch (e) {
+              console.error(e)
+              session.notify(`${e}`, 'error')
+            }
+          }),
+        )
+      },
+    }))
 }
 
 export type LinearPileupDisplayStateModel = ReturnType<typeof stateModelFactory>
 export type LinearPileupDisplayModel = Instance<LinearPileupDisplayStateModel>
-
 export default stateModelFactory