@jbrowse/plugin-alignments 2.5.0 → 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'))
@@ -66,6 +74,7 @@ export interface Filter {
 
 /**
  * #stateModel LinearPileupDisplay
+ * #category display
  * extends `BaseLinearDisplay`
  */
 function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
@@ -142,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
@@ -182,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(),
+            )
           }
         })
       },
@@ -222,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])
           }
         })
       },
@@ -233,130 +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.featureDensityStatsReady ||
-                  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: 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')
-            }
-          }),
-        )
-      },
 
       /**
        * #action
@@ -428,6 +337,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           return
         }
 
+        self.sortReady = false
         self.sortedBy = {
           type,
           pos: centerBp,
@@ -435,7 +345,6 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           assemblyName,
           tag,
         }
-        self.ready = false
       },
       setFilterBy(filter: Filter) {
         self.filterBy = cast(filter)
@@ -509,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 {
@@ -534,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)
@@ -549,7 +469,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                 {
                   label: 'Copy info to clipboard',
                   icon: ContentCopyIcon,
-                  onClick: () => {
+                  onClick: (): void => {
                     if (feat) {
                       self.copyFeatureToClipboard(feat)
                     }
@@ -557,7 +477,6 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
                 },
               ]
             : []
-          return contextMenuItems
         },
 
         /**
@@ -569,8 +488,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         /**
          * #method
          */
-        renderProps() {
-          const view = getContainingView(self) as LGV
+        renderPropsPre() {
           const {
             colorTagMap,
             modificationTagMap,
@@ -578,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()),
@@ -665,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
          */
@@ -829,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

package/src/LinearReadArcsDisplay/components/ReactComponent.tsx

@@ -1,56 +1,38 @@
-import React from 'react'
-import { isAlive } from 'mobx-state-tree'
-import { makeStyles } from 'tss-react/mui'
+import React, { useCallback } from 'react'
 import { observer } from 'mobx-react'
 import { getContainingView } from '@jbrowse/core/util'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-import {
-  BlockMsg,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 // local
 import { LinearReadArcsDisplayModel } from '../model'
+import BaseDisplayComponent from '../../shared/BaseDisplayComponent'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(theme => {
-  const bg = theme.palette.action.disabledBackground
-  return {
-    loading: {
-      paddingLeft: '0.6em',
-      backgroundColor: theme.palette.background.default,
-      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
-      height: '100%',
-      width: '100%',
-      pointerEvents: 'none',
-      textAlign: 'center',
-    },
-  }
-})
-
 const Arcs = observer(function ({
   model,
 }: {
   model: LinearReadArcsDisplayModel
 }) {
   const view = getContainingView(model) as LGV
+  const width = Math.round(view.dynamicBlocks.totalWidthPx)
+  const height = model.height
+  const cb = useCallback(
+    (ref: HTMLCanvasElement) => {
+      model.setRef(ref)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, width, height],
+  )
+
+  // note: the position absolute below avoids scrollbar from appearing on track
   return (
     <canvas
-      data-testid={`Arc-display-${model.drawn}`}
-      ref={ref => {
-        if (isAlive(model)) {
-          model.setRef(ref)
-        }
-      }}
-      style={{
-        position: 'absolute',
-        left: -view.offsetPx + model.lastDrawnOffsetPx,
-        width: view.dynamicBlocks.totalWidthPx,
-        height: model.height,
-      }}
-      width={view.dynamicBlocks.totalWidthPx * 2}
-      height={model.height * 2}
+      data-testid="arc-canvas"
+      ref={cb}
+      style={{ width, height, position: 'absolute' }}
+      width={width * 2}
+      height={height * 2}
     />
   )
 })
@@ -60,29 +42,9 @@ export default observer(function ({
 }: {
   model: LinearReadArcsDisplayModel
 }) {
-  const view = getContainingView(model)
-  const { classes } = useStyles()
-  const err = model.error
-  return err ? (
-    <BlockMsg
-      message={`${err}`}
-      severity="error"
-      buttonText={'Reload'}
-      action={model.reload}
-    />
-  ) : model.loading ? (
-    <div
-      className={classes.loading}
-      style={{
-        width: view.dynamicBlocks.totalWidthPx,
-        height: 20,
-        position: 'absolute',
-        left: Math.max(0, -view.offsetPx),
-      }}
-    >
-      <LoadingEllipses message={model.message} />
-    </div>
-  ) : (
-    <Arcs model={model} />
+  return (
+    <BaseDisplayComponent model={model}>
+      <Arcs model={model} />
+    </BaseDisplayComponent>
   )
 })