Add ability to use colorBy for alignments track configs

plugins/alignments/src/LinearAlignmentsDisplay/models/configSchema.ts

@@ -6,21 +6,25 @@ import PluginManager from '@jbrowse/core/PluginManager'
  * #config LinearAlignmentsDisplay
  * has a "pileup" sub-display, where you can see individual reads and a
  * quantitative "snpcoverage" sub-display track showing SNP frequencies
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
-export default function configModelFactory(pm: PluginManager) {
+export default function configModelFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(
     'LinearAlignmentsDisplay',
     {
       /**
        * #slot
        */
-      pileupDisplay: pm.getDisplayType('LinearPileupDisplay').configSchema,
+      pileupDisplay: pluginManager.getDisplayType('LinearPileupDisplay')
+        .configSchema,
 
       /**
        * #slot
        */
-      snpCoverageDisplay: pm.getDisplayType('LinearSNPCoverageDisplay')
-        .configSchema,
+      snpCoverageDisplay: pluginManager.getDisplayType(
+        'LinearSNPCoverageDisplay',
+      ).configSchema,
 
       /**
        * #slot

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

@@ -6,7 +6,6 @@ import {
   isAlive,
   types,
   Instance,
-  IStateTreeNode,
 } from 'mobx-state-tree'
 import deepEqual from 'fast-deep-equal'
 
@@ -23,20 +22,10 @@ import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 
 // locals
 import { LinearAlignmentsDisplayMixin } from './alignmentsModel'
-import { getLowerPanelDisplays } from './util'
+import { deepSnap, getLowerPanelDisplays } from './util'
 
 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: AlignmentsDisplayModel) {
   const { PileupDisplay, SNPCoverageDisplay } = self
   return (
@@ -53,7 +42,7 @@ function propagateColorBy(self: AlignmentsDisplayModel) {
     return
   }
   if (!deepSnap(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
-    SNPCoverageDisplay.setColorBy(getSnapshot(PileupDisplay.colorBy))
+    SNPCoverageDisplay.setColorBy(PileupDisplay.colorBy)
   }
 }
 
@@ -63,10 +52,9 @@ function propagateFilterBy(self: AlignmentsDisplayModel) {
     return
   }
   if (!deepSnap(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
-    SNPCoverageDisplay.setFilterBy(getSnapshot(PileupDisplay.filterBy))
+    SNPCoverageDisplay.setFilterBy(PileupDisplay.filterBy)
   }
 }
-
 /**
  * #stateModel LinearAlignmentsDisplay
  * extends

plugins/alignments/src/LinearAlignmentsDisplay/models/util.ts

@@ -1,4 +1,6 @@
 import PluginManager from '@jbrowse/core/PluginManager'
+import { getSnapshot, isStateTreeNode } from 'mobx-state-tree'
+import deepEqual from 'fast-deep-equal'
 
 export function getLowerPanelDisplays(pluginManager: PluginManager) {
   return (
@@ -10,3 +12,15 @@ export function getLowerPanelDisplays(pluginManager: PluginManager) {
       .filter(f => f.subDisplay?.lowerPanel)
   )
 }
+
+function snapOrObj(r: unknown) {
+  return isStateTreeNode(r) ? getSnapshot(r) : r
+}
+
+function snap(r: unknown) {
+  return r ? snapOrObj(r) : undefined
+}
+
+export function deepSnap(x1: unknown, x2: unknown) {
+  return deepEqual(snap(x1), snap(x2))
+}

plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts

@@ -56,7 +56,8 @@ type LGV = LinearGenomeViewModel
 /**
  * #stateModel SharedLinearPileupDisplayMixin
  * #category display
- * extends `BaseLinearDisplay`
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 export function SharedLinearPileupDisplayMixin(
   configSchema: AnyConfigurationSchemaType,
@@ -88,7 +89,7 @@ export function SharedLinearPileupDisplayMixin(
         /**
          * #property
          */
-        colorBy: ColorByModel,
+        colorBySetting: ColorByModel,
         /**
          * #property
          */
@@ -104,6 +105,13 @@ export function SharedLinearPileupDisplayMixin(
       featureUnderMouseVolatile: undefined as undefined | Feature,
       tagsReady: false,
     }))
+    .views(self => ({
+      get colorBy() {
+        return self.colorBySetting
+          ? getSnapshot(self.colorBySetting)
+          : getConf(self, 'colorBy')
+      },
+    }))
     .views(self => ({
       get autorunReady() {
         const view = getContainingView(self) as LGV
@@ -152,7 +160,7 @@ export function SharedLinearPileupDisplayMixin(
         extra?: ExtraColorBy
       }) {
         self.colorTagMap = observable.map({}) // clear existing mapping
-        self.colorBy = cast(colorScheme)
+        self.colorBySetting = cast(colorScheme)
         if (colorScheme.tag) {
           self.tagsReady = false
         }
@@ -363,7 +371,7 @@ export function SharedLinearPileupDisplayMixin(
             notReady: superProps.notReady || !self.renderReady(),
             rpcDriverName,
             displayModel: self,
-            colorBy: colorBy ? getSnapshot(colorBy) : undefined,
+            colorBy: colorBy,
             filterBy: JSON.parse(JSON.stringify(filterBy)),
             filters: self.filters,
             colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
@@ -601,4 +609,12 @@ export function SharedLinearPileupDisplayMixin(
         )
       },
     }))
+    .preProcessSnapshot(snap => {
+      if (snap) {
+        // @ts-expect-error
+        const { colorBy, ...rest } = snap
+        return { ...rest, colorBySetting: colorBy }
+      }
+      return snap
+    })
 }

plugins/alignments/src/LinearPileupDisplay/configSchema.ts

@@ -53,6 +53,11 @@ function configSchemaF(pluginManager: PluginManager) {
         description: 'color scheme to use',
         defaultValue: 'normal',
       },
+
+      colorBy: {
+        type: 'frozen',
+        defaultValue: {},
+      },
     },
     {
       /**

test_data/volvox/config.json

@@ -364,7 +364,8 @@
         {
           "type": "LinearPileupDisplay",
           "displayId": "volvox_cram_pileup_pileup",
-          "height": 400
+          "height": 400,
+          "colorBy": { "type": "mappingQuality" }
         }
       ]
     },
@@ -512,7 +513,8 @@
           "displayId": "volvox_alignments_alignments",
           "pileupDisplay": {
             "type": "LinearPileupDisplay",
-            "displayId": "volvox_bam_altname_alignments_pileup"
+            "displayId": "volvox_bam_altname_alignments_pileup",
+            "colorBy": { "type": "mappingQuality" }
           }
         }
       ]