Separate out PileupDisplay functionality shared with SyntenyDisplay i…

…nto a Mixin (#3781) * separating out shared functionality into a mixin for pileup and synteny to inherit separately with their own implementations * fixing lint with strict typing * mv interface to shared file and add maybe type back * revert change to package.json
GMOD · Jul 6, 2023 · 2c858fb · 2c858fb
1 parent e87c23a
commit 2c858fb
Show file tree

Hide file tree

Showing 10 changed files with 748 additions and 511 deletions.
diff --git a/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts b/plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts
diff --git a/plugins/alignments/src/LinearPileupDisplay/components/ColorByCustom.tsx b/plugins/alignments/src/LinearPileupDisplay/components/ColorByCustom.tsx
@@ -4,17 +4,20 @@ import { Button, DialogContent, DialogActions, Typography } from '@mui/material'
 import { Dialog } from '@jbrowse/core/ui'
 import { ColorPicker } from '@jbrowse/core/ui/ColorPicker'
 
-import { fillColor } from '../../shared/color'
+import { fillColor, IColorByModel } from '../../shared/color'
 
 function ColorByCustomDlg(props: {
   model: {
-    colorBy: any
+    colorBy: IColorByModel
     setColorScheme: Function
   }
   handleClose: () => void
 }) {
   const { model, handleClose } = props
-  const { type = 'normal', tag, extra } = model.colorBy
+
+  const type = model.colorBy ? model.colorBy.type : 'normal'
+  const tag = model.colorBy ? model.colorBy.tag : ''
+  const extra = model.colorBy ? model.colorBy.extra : undefined
 
   const colorOptionMap = {
     normal: ['color_unknown'],
@@ -71,7 +74,7 @@ function ColorByCustomDlg(props: {
                     color={extra?.custom[colorOption] || fillColor[colorOption]}
                     onChange={event => {
                       const scheme = {
-                        type: model.colorBy.type,
+                        type: type,
                         tag: tag,
                         extra: {
                           ...extra,
@@ -95,12 +98,12 @@ function ColorByCustomDlg(props: {
             color="secondary"
             onClick={() => {
               const scheme = {
-                type: model.colorBy.type,
-                tag: model.colorBy?.tag,
+                type: type,
+                tag: tag,
                 extra: {
-                  ...model.colorBy?.extra,
+                  ...extra,
                   custom: {
-                    ...model.colorBy?.extra?.custom,
+                    ...extra?.custom,
                     ...fillColor,
                   },
                 },

diff --git a/plugins/alignments/src/LinearPileupDisplay/index.ts b/plugins/alignments/src/LinearPileupDisplay/index.ts
@@ -22,3 +22,4 @@ export default function register(pluginManager: PluginManager) {
 
 export { default as linearPileupDisplayStateModelFactory } from './model'
 export { default as linearPileupDisplayConfigSchemaFactory } from './configSchema'
+export { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin'