@jbrowse/plugin-alignments 2.2.2 → 2.3.1

package/src/LinearAlignmentsDisplay/models/model.tsx

@@ -1,4 +1,16 @@
 import React from 'react'
+import { autorun, when } from 'mobx'
+import {
+  addDisposer,
+  getSnapshot,
+  isAlive,
+  types,
+  Instance,
+  IStateTreeNode,
+} from 'mobx-state-tree'
+import deepEqual from 'fast-deep-equal'
+
+// jbrowse
 import {
   ConfigurationReference,
   AnyConfigurationModel,
@@ -8,13 +20,109 @@ import {
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { MenuItem } from '@jbrowse/core/ui'
-import { autorun, when } from 'mobx'
-import { addDisposer, getSnapshot, Instance, types } from 'mobx-state-tree'
-import { getContainingTrack } from '@jbrowse/core/util'
-import deepEqual from 'fast-deep-equal'
 
 const minDisplayHeight = 20
 
+function getLowerPanelDisplays(pluginManager: PluginManager) {
+  return (
+    pluginManager
+      .getDisplayElements()
+      // @ts-ignore
+      .filter(f => f.subDisplay?.type === 'LinearAlignmentsDisplay')
+      // @ts-ignore
+      .filter(f => f.subDisplay?.lowerPanel)
+  )
+}
+
+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: AlignmentsDisplayModel) {
+  const { PileupDisplay, SNPCoverageDisplay } = self
+  return (
+    PileupDisplay ||
+    isAlive(PileupDisplay) ||
+    SNPCoverageDisplay ||
+    isAlive(SNPCoverageDisplay)
+  )
+}
+
+function propagateColorBy(self: AlignmentsDisplayModel) {
+  const { PileupDisplay, SNPCoverageDisplay } = self
+  if (!preCheck(self) || !PileupDisplay.colorBy) {
+    return
+  }
+  if (!deepSnap(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
+    SNPCoverageDisplay.setColorBy(getSnapshot(PileupDisplay.colorBy))
+  }
+}
+
+function propagateFilterBy(self: AlignmentsDisplayModel) {
+  const { PileupDisplay, SNPCoverageDisplay } = self
+  if (!preCheck(self) || !PileupDisplay.filterBy) {
+    return
+  }
+  if (!deepSnap(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
+    SNPCoverageDisplay.setFilterBy(getSnapshot(PileupDisplay.filterBy))
+  }
+}
+
+function AlignmentsModel(
+  pluginManager: PluginManager,
+  configSchema: AnyConfigurationSchemaType,
+) {
+  const lowerPanelDisplays = getLowerPanelDisplays(pluginManager).map(
+    f => f.stateModel,
+  )
+
+  return types.model({
+    /**
+     * #property
+     * refers to LinearPileupDisplay sub-display model
+     */
+    // @ts-ignore
+    PileupDisplay: types.maybe(types.union(...lowerPanelDisplays)),
+    /**
+     * #property
+     * refers to LinearSNPCoverageDisplay sub-display model
+     */
+    SNPCoverageDisplay: types.maybe(
+      pluginManager.getDisplayType('LinearSNPCoverageDisplay').stateModel,
+    ),
+    /**
+     * #property
+     */
+    snpCovHeight: 45,
+    /**
+     * #property
+     */
+    type: types.literal('LinearAlignmentsDisplay'),
+    /**
+     * #property
+     */
+    configuration: ConfigurationReference(configSchema),
+    /**
+     * #property
+     */
+    height: 250,
+    /**
+     * #property
+     */
+    userFeatureScreenDensity: types.maybe(types.number),
+    /**
+     * #property
+     */
+    lowerPanelType: 'LinearPileupDisplay',
+  })
+}
+
 /**
  * #stateModel LinearAlignmentsDisplay
  * extends `BaseDisplay`
@@ -27,67 +135,12 @@ function stateModelFactory(
     .compose(
       'LinearAlignmentsDisplay',
       BaseDisplay,
-      types.model({
-        /**
-         * #property
-         * refers to LinearPileupDisplay sub-display model
-         */
-        PileupDisplay: types.maybe(
-          pluginManager.getDisplayType('LinearPileupDisplay').stateModel,
-        ),
-        /**
-         * #property
-         * refers to LinearSNPCoverageDisplay sub-display model
-         */
-        SNPCoverageDisplay: types.maybe(
-          pluginManager.getDisplayType('LinearSNPCoverageDisplay').stateModel,
-        ),
-        /**
-         * #property
-         */
-        snpCovHeight: 45,
-        /**
-         * #property
-         */
-        type: types.literal('LinearAlignmentsDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
-        height: 250,
-        /**
-         * #property
-         */
-        showCoverage: true,
-        /**
-         * #property
-         */
-        showPileup: true,
-        /**
-         * #property
-         */
-        userFeatureScreenDensity: types.maybe(types.number),
-      }),
+      AlignmentsModel(pluginManager, configSchema),
     )
     .volatile(() => ({
       scrollTop: 0,
     }))
     .actions(self => ({
-      /**
-       * #action
-       */
-      toggleCoverage() {
-        self.showCoverage = !self.showCoverage
-      },
-      /**
-       * #action
-       */
-      togglePileup() {
-        self.showPileup = !self.showPileup
-      },
       /**
        * #action
        */
@@ -102,103 +155,64 @@ function stateModelFactory(
         self.snpCovHeight = n
       },
     }))
-    .views(self => {
-      const { trackMenuItems: superTrackMenuItems } = self
-      return {
-        /**
-         * #getter
-         */
-        get pileupDisplayConfig() {
-          const conf = getConf(self, 'pileupDisplay')
-          const track = getContainingTrack(self)
-          return {
-            ...conf,
-            type: 'LinearPileupDisplay',
-            name: `${getConf(track, 'name')} pileup`,
-            displayId: `${self.configuration.displayId}_pileup_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
-          }
-        },
-
-        /**
-         * #method
-         */
-        getFeatureByID(blockKey: string, id: string) {
-          return self.PileupDisplay.getFeatureByID(blockKey, id)
-        },
-        /**
-         * #method
-         */
-        searchFeatureByID(id: string) {
-          return self.PileupDisplay.searchFeatureByID(id)
-        },
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get pileupConf() {
+        const conf = getConf(self, 'pileupDisplay')
+        return {
+          ...conf,
+          type: self.lowerPanelType,
+          displayId: `${self.configuration.displayId}_${self.lowerPanelType}_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
+        }
+      },
 
-        /**
-         * #getter
-         */
-        get features() {
-          return self.PileupDisplay.features
-        },
+      /**
+       * #method
+       */
+      getFeatureByID(blockKey: string, id: string) {
+        return self.PileupDisplay.getFeatureByID(blockKey, id)
+      },
+      /**
+       * #method
+       */
+      searchFeatureByID(id: string) {
+        return self.PileupDisplay.searchFeatureByID(id)
+      },
 
-        /**
-         * #getter
-         */
-        get DisplayBlurb() {
-          return self.PileupDisplay?.DisplayBlurb
-        },
+      /**
+       * #getter
+       */
+      get features() {
+        return self.PileupDisplay.features
+      },
 
-        /**
-         * #getter
-         */
-        get sortedBy() {
-          return self.PileupDisplay.sortedBy
-        },
-        /**
-         * #getter
-         */
-        get sortedByPosition() {
-          return self.PileupDisplay.sortedByPosition
-        },
-        /**
-         * #getter
-         */
-        get sortedByRefName() {
-          return self.PileupDisplay.sortedByRefName
-        },
+      /**
+       * #getter
+       */
+      get DisplayBlurb() {
+        return self.PileupDisplay?.DisplayBlurb
+      },
 
-        /**
-         * #getter
-         */
-        get snpCoverageDisplayConfig() {
-          const conf = getConf(self, 'snpCoverageDisplay')
-          const track = getContainingTrack(self)
-          return {
-            ...conf,
-            type: 'LinearSNPCoverageDisplay',
-            name: `${getConf(track, 'name')} snp coverage`,
-            displayId: `${self.configuration.displayId}_snpcoverage_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
-          }
-        },
+      /**
+       * #getter
+       */
+      get sortedBy() {
+        return self.PileupDisplay.sortedBy
+      },
 
-        /**
-         * #method
-         */
-        trackMenuItems(): MenuItem[] {
-          return [
-            ...superTrackMenuItems(),
-            {
-              type: 'subMenu',
-              label: 'Pileup settings',
-              subMenu: self.PileupDisplay.trackMenuItems(),
-            },
-            {
-              type: 'subMenu',
-              label: 'SNPCoverage settings',
-              subMenu: self.SNPCoverageDisplay.trackMenuItems(),
-            },
-          ]
-        },
-      }
-    })
+      /**
+       * #getter
+       */
+      get coverageConf() {
+        const conf = getConf(self, 'snpCoverageDisplay')
+        return {
+          ...conf,
+          displayId: `${self.configuration.displayId}_snpcoverage_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
+        }
+      },
+    }))
     .actions(self => ({
       /**
        * #action
@@ -223,21 +237,23 @@ function stateModelFactory(
        */
       setPileupDisplay(configuration: AnyConfigurationModel) {
         self.PileupDisplay = {
-          type: 'LinearPileupDisplay',
+          type: configuration.type || 'LinearPileupDisplay',
           configuration,
         }
       },
       /**
        * #action
        */
-      setHeight(displayHeight: number) {
-        if (displayHeight > minDisplayHeight) {
-          self.height = displayHeight
-        } else {
-          self.height = minDisplayHeight
-        }
+      setHeight(n: number) {
+        self.height = Math.max(n, minDisplayHeight)
         return self.height
       },
+      /**
+       * #action
+       */
+      setLowerPanelType(type: string) {
+        self.lowerPanelType = type
+      },
       /**
        * #action
        */
@@ -252,64 +268,53 @@ function stateModelFactory(
         addDisposer(
           self,
           autorun(() => {
-            if (!self.SNPCoverageDisplay) {
-              self.setSNPCoverageDisplay(self.snpCoverageDisplayConfig)
+            const {
+              SNPCoverageDisplay,
+              PileupDisplay,
+              coverageConf,
+              pileupConf,
+            } = self
+
+            if (!SNPCoverageDisplay) {
+              self.setSNPCoverageDisplay(coverageConf)
             } else if (
               !deepEqual(
-                self.snpCoverageDisplayConfig,
-                getSnapshot(self.SNPCoverageDisplay.configuration),
+                coverageConf,
+                getSnapshot(SNPCoverageDisplay.configuration),
               )
             ) {
-              self.SNPCoverageDisplay.setHeight(self.snpCovHeight)
-              self.SNPCoverageDisplay.setConfig(self.snpCoverageDisplayConfig)
+              SNPCoverageDisplay.setHeight(self.snpCovHeight)
+              SNPCoverageDisplay.setConfig(self.coverageConf)
             }
 
-            if (!self.PileupDisplay) {
-              self.setPileupDisplay(self.pileupDisplayConfig)
+            if (!PileupDisplay || self.lowerPanelType !== PileupDisplay.type) {
+              self.setPileupDisplay(pileupConf)
             } else if (
-              !deepEqual(
-                self.pileupDisplayConfig,
-                getSnapshot(self.PileupDisplay.configuration),
-              )
+              !deepEqual(pileupConf, getSnapshot(PileupDisplay.configuration))
             ) {
-              self.PileupDisplay.setConfig(self.pileupDisplayConfig)
+              PileupDisplay.setConfig(self.pileupConf)
             }
 
-            // propagate the filterBy setting from pileupdisplay to snpcoverage
-            // note: the snpcoverage display is not able to control filterBy
-            // itself
-            if (
-              self.PileupDisplay.filterBy &&
-              !deepEqual(
-                getSnapshot(self.PileupDisplay.filterBy),
-                getSnapshot(self.SNPCoverageDisplay.filterBy),
-              )
-            ) {
-              self.SNPCoverageDisplay.setFilterBy(
-                getSnapshot(self.PileupDisplay.filterBy),
-              )
-            }
-            if (
-              self.PileupDisplay.colorBy &&
-              !deepEqual(
-                getSnapshot(self.PileupDisplay.colorBy),
-                self.SNPCoverageDisplay.colorBy
-                  ? getSnapshot(self.SNPCoverageDisplay.colorBy)
-                  : {},
-              )
-            ) {
-              self.SNPCoverageDisplay.setColorBy(
-                getSnapshot(self.PileupDisplay.colorBy),
-              )
-            }
+            propagateColorBy(self as AlignmentsDisplayModel)
+            propagateFilterBy(self as AlignmentsDisplayModel)
           }),
         )
+
         addDisposer(
           self,
           autorun(() => {
             self.setSNPCoverageHeight(self.SNPCoverageDisplay.height)
           }),
         )
+
+        addDisposer(
+          self,
+          autorun(() => {
+            self.PileupDisplay.setHeight(
+              self.height - self.SNPCoverageDisplay.height,
+            )
+          }),
+        )
       },
       /**
        * #action
@@ -330,6 +335,40 @@ function stateModelFactory(
         )
       },
     }))
+    .views(self => {
+      const { trackMenuItems: superTrackMenuItems } = self
+      return {
+        /**
+         * #method
+         */
+        trackMenuItems(): MenuItem[] {
+          const extra = getLowerPanelDisplays(pluginManager).map(d => ({
+            type: 'radio',
+            label: d.displayName,
+            checked: d.name === self.PileupDisplay.type,
+            onClick: () => self.setLowerPanelType(d.name),
+          }))
+          return [
+            ...superTrackMenuItems(),
+            {
+              type: 'subMenu',
+              label: 'Pileup settings',
+              subMenu: self.PileupDisplay.trackMenuItems(),
+            },
+            {
+              type: 'subMenu',
+              label: 'SNPCoverage settings',
+              subMenu: self.SNPCoverageDisplay.trackMenuItems(),
+            },
+            {
+              type: 'subMenu',
+              label: `Replace lower panel with...`,
+              subMenu: extra,
+            },
+          ]
+        },
+      }
+    })
 }
 
 export default stateModelFactory

package/src/LinearPileupDisplay/components/SetFeatureHeight.tsx

@@ -13,8 +13,8 @@ import { Dialog } from '@jbrowse/core/ui'
 
 function SetFeatureHeightDlg(props: {
   model: {
-    setFeatureHeight: Function
-    setNoSpacing: Function
+    setFeatureHeight: (arg?: number) => void
+    setNoSpacing: (arg?: boolean) => void
     featureHeightSetting: number
     noSpacing?: boolean
   }
@@ -28,7 +28,7 @@ function SetFeatureHeightDlg(props: {
   const ok = height !== '' && !Number.isNaN(+height)
 
   return (
-    <Dialog open onClose={handleClose} title={'Set feature height'}>
+    <Dialog open onClose={handleClose} title="Set feature height">
       <DialogContent>
         <Typography>
           Adjust the feature height and whether there is any spacing between
@@ -38,9 +38,7 @@ function SetFeatureHeightDlg(props: {
         <TextField
           value={height}
           helperText="Feature height"
-          onChange={event => {
-            setHeight(event.target.value)
-          }}
+          onChange={event => setHeight(event.target.value)}
         />
         <FormControlLabel
           control={

package/src/LinearPileupDisplay/configSchema.ts

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
-import { types, Instance } from 'mobx-state-tree'
+import { types } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
 
 /**
@@ -64,6 +64,4 @@ function configSchemaF(pluginManager: PluginManager) {
   )
 }
 
-export type LinearPileupDisplayConfigModel = ReturnType<typeof configSchemaF>
-export type LinearPileupDisplayConfig = Instance<LinearPileupDisplayConfigModel>
 export default configSchemaF

package/src/LinearPileupDisplay/index.ts

@@ -9,8 +9,10 @@ export default function register(pluginManager: PluginManager) {
     const configSchema = configSchemaFactory(pluginManager)
     return new DisplayType({
       name: 'LinearPileupDisplay',
+      displayName: 'Pileup display',
       configSchema,
       stateModel: modelFactory(configSchema),
+      subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
       trackType: 'AlignmentsTrack',
       viewType: 'LinearGenomeView',
       ReactComponent: BaseLinearDisplayComponent,

package/src/LinearPileupDisplay/model.ts

@@ -4,6 +4,7 @@ import { cast, types, addDisposer, Instance } from 'mobx-state-tree'
 import copy from 'copy-to-clipboard'
 import {
   AnyConfigurationModel,
+  AnyConfigurationSchemaType,
   ConfigurationReference,
   readConfObject,
   getConf,
@@ -32,14 +33,17 @@ import PaletteIcon from '@mui/icons-material/Palette'
 import FilterListIcon from '@mui/icons-material/ClearAll'
 
 // locals
-import { LinearPileupDisplayConfigModel } from './configSchema'
 import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb'
-import { getUniqueTagValues, getUniqueModificationValues } from '../shared'
+import {
+  getUniqueTagValues,
+  getUniqueModificationValues,
+  FilterModel,
+} from '../shared'
 import { SimpleFeatureSerialized } from '@jbrowse/core/util/simpleFeature'
 
 // async
+const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
 const ColorByTagDlg = lazy(() => import('./components/ColorByTag'))
-const FilterByTagDlg = lazy(() => import('./components/FilterByTag'))
 const SortByTagDlg = lazy(() => import('./components/SortByTag'))
 const SetFeatureHeightDlg = lazy(() => import('./components/SetFeatureHeight'))
 const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
@@ -57,7 +61,7 @@ type LGV = LinearGenomeViewModel
  * #stateModel LinearPileupDisplay
  * extends `BaseLinearDisplay`
  */
-function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
+function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearPileupDisplay',
@@ -122,17 +126,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
         /**
          * #property
          */
-        filterBy: types.optional(
-          types.model({
-            flagInclude: types.optional(types.number, 0),
-            flagExclude: types.optional(types.number, 1540),
-            readName: types.maybe(types.string),
-            tagFilter: types.maybe(
-              types.model({ tag: types.string, value: types.string }),
-            ),
-          }),
-          {},
-        ),
+        filterBy: types.optional(FilterModel, {}),
       }),
     )
     .volatile(() => ({
@@ -164,13 +158,13 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
       /**
        * #action
        */
-      setFeatureHeight(n: number) {
+      setFeatureHeight(n?: number) {
         self.featureHeight = n
       },
       /**
        * #action
        */
-      setNoSpacing(flag: boolean) {
+      setNoSpacing(flag?: boolean) {
         self.noSpacing = flag
       },
 
@@ -788,12 +782,31 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             },
             {
               label: 'Set feature height',
-              onClick: () => {
-                getSession(self).queueDialog(doneCallback => [
-                  SetFeatureHeightDlg,
-                  { model: self, handleClose: doneCallback },
-                ])
-              },
+              subMenu: [
+                {
+                  label: 'Normal',
+                  onClick: () => {
+                    self.setFeatureHeight(7)
+                    self.setNoSpacing(false)
+                  },
+                },
+                {
+                  label: 'Compact',
+                  onClick: () => {
+                    self.setFeatureHeight(2)
+                    self.setNoSpacing(true)
+                  },
+                },
+                {
+                  label: 'Manually set height',
+                  onClick: () => {
+                    getSession(self).queueDialog(doneCallback => [
+                      SetFeatureHeightDlg,
+                      { model: self, handleClose: doneCallback },
+                    ])
+                  },
+                },
+              ],
             },
             {
               label: 'Set max height',