@jbrowse/plugin-alignments 2.2.1 → 2.3.0

package/src/HtsgetBamAdapter/index.ts

@@ -3,19 +3,15 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
 export default (pluginManager: PluginManager) => {
-  pluginManager.addAdapterType(
-    () =>
-      new AdapterType({
-        name: 'HtsgetBamAdapter',
-        adapterMetadata: {
-          category: null,
-          hiddenFromGUI: true,
-          displayName: null,
-          description: null,
-        },
-        configSchema,
-        getAdapterClass: () =>
-          import('./HtsgetBamAdapter').then(r => r.default),
-      }),
-  )
+  pluginManager.addAdapterType(() => {
+    return new AdapterType({
+      name: 'HtsgetBamAdapter',
+      displayName: 'Htsget BAM adapter',
+      adapterMetadata: {
+        hiddenFromGUI: true,
+      },
+      configSchema,
+      getAdapterClass: () => import('./HtsgetBamAdapter').then(r => r.default),
+    })
+  })
 }

package/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles()(() => ({
 }))
 
 function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
-  const { PileupDisplay, SNPCoverageDisplay, showPileup, showCoverage } = model
+  const { PileupDisplay, SNPCoverageDisplay } = model
   const { classes } = useStyles()
   const top = SNPCoverageDisplay.height
   return (
@@ -24,35 +24,27 @@ function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
       data-testid={`display-${getConf(model, 'displayId')}`}
       style={{ position: 'relative' }}
     >
-      {showCoverage ? (
-        <>
-          <div data-testid="Blockset-snpcoverage">
-            <SNPCoverageDisplay.RenderingComponent model={SNPCoverageDisplay} />
-          </div>
-          <ResizeHandle
-            onDrag={delta => {
-              SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta)
-              return delta
-            }}
-            className={classes.resizeHandle}
-            style={{
-              top,
-            }}
-          />
-        </>
-      ) : null}
+      <div data-testid="Blockset-snpcoverage">
+        <SNPCoverageDisplay.RenderingComponent model={SNPCoverageDisplay} />
+      </div>
+      <ResizeHandle
+        onDrag={delta => {
+          SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta)
+          return delta
+        }}
+        className={classes.resizeHandle}
+        style={{ top }}
+      />
 
-      {showPileup ? (
-        <div
-          data-testid="Blockset-pileup"
-          style={{
-            position: 'absolute',
-            top: showCoverage ? SNPCoverageDisplay.height : 0,
-          }}
-        >
-          <PileupDisplay.RenderingComponent model={PileupDisplay} />
-        </div>
-      ) : null}
+      <div
+        data-testid="Blockset-pileup"
+        style={{
+          position: 'absolute',
+          top,
+        }}
+      >
+        <PileupDisplay.RenderingComponent model={PileupDisplay} />
+      </div>
     </div>
   )
 }

package/src/LinearAlignmentsDisplay/index.ts

@@ -10,6 +10,7 @@ export default function (pluginManager: PluginManager) {
     const configSchema = configSchemaFactory(pluginManager)
     return new DisplayType({
       name: 'LinearAlignmentsDisplay',
+      displayName: 'Alignments display (combination)',
       configSchema,
       stateModel: modelFactory(pluginManager, configSchema),
       trackType: 'AlignmentsTrack',

package/src/LinearAlignmentsDisplay/models/configSchema.ts

@@ -7,9 +7,7 @@ import PluginManager from '@jbrowse/core/PluginManager'
  * has a "pileup" sub-display, where you can see individual reads and a
  * quantitative "snpcoverage" sub-display track showing SNP frequencies
  */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-const configModelFactory = (pm: PluginManager) => {
+export default function configModelFactory(pm: PluginManager) {
   return ConfigurationSchema(
     'LinearAlignmentsDisplay',
     {
@@ -17,6 +15,7 @@ const configModelFactory = (pm: PluginManager) => {
        * #slot
        */
       pileupDisplay: pm.getDisplayType('LinearPileupDisplay').configSchema,
+
       /**
        * #slot
        */
@@ -32,6 +31,3 @@ const configModelFactory = (pm: PluginManager) => {
     },
   )
 }
-
-export type AlignmentsConfigModel = ReturnType<typeof configModelFactory>
-export default configModelFactory

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