Add menu items to more easily create compact view of alignments (#3384)

GMOD · Dec 8, 2022 · bcb1b67 · bcb1b67
1 parent 4ebc3ad
commit bcb1b67
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/plugins/alignments/src/LinearPileupDisplay/components/SetFeatureHeight.tsx b/plugins/alignments/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={

diff --git a/plugins/alignments/src/LinearPileupDisplay/model.ts b/plugins/alignments/src/LinearPileupDisplay/model.ts
@@ -164,13 +164,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 +788,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',