Manually set row height on matrix

plugins/variants/src/MultiLinearVariantDisplay/components/Crosshair.tsx

@@ -35,7 +35,7 @@ const Crosshair = observer(function ({
   const { hoveredGenotype, height, scrollTop, rowHeight, sources } = model
   const { width } = getContainingView(model) as LinearGenomeViewModel
   const source = sources?.[Math.floor(mouseY / rowHeight)]
-  const y = mouseY - scrollTop
+  const y = mouseY - lineZoneHeight - scrollTop
   return source ? (
     <div className={classes.rel}>
       <svg

plugins/variants/src/MultiLinearVariantDisplay/model.ts

@@ -22,105 +22,25 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
          * #property
          */
         type: types.literal('MultiLinearVariantDisplay'),
-
         /**
          * #property
          * used only if autoHeight is false
          */
         rowHeightSetting: types.optional(types.number, 11),
-
-        /**
-         * #property
-         * adjust to height of track/display
-         */
-        autoHeight: false,
         /**
          * #property
          */
         minorAlleleFrequencyFilter: types.optional(types.number, 0),
       }),
     )
-    .actions(self => ({
-      /**
-       * #action
-       */
-      setRowHeight(arg: number) {
-        self.rowHeightSetting = arg
-      },
-      /**
-       * #action
-       */
-      setAutoHeight(arg: boolean) {
-        self.autoHeight = arg
-      },
-    }))
-
-    .views(self => ({
+    .views(() => ({
       /**
        * #getter
        */
       get rendererTypeName() {
         return 'MultiVariantRenderer'
       },
-      /**
-       * #getter
-       */
-      get rowHeight() {
-        const { autoHeight, sources, rowHeightSetting, height } = self
-        return autoHeight ? height / (sources?.length || 1) : rowHeightSetting
-      },
     }))
-    .views(self => {
-      return {
-        get canDisplayLabels() {
-          return self.rowHeight > 8 && self.showSidebarLabelsSetting
-        },
-        /**
-         * #getter
-         */
-        get totalHeight() {
-          return self.rowHeight * (self.sources?.length || 1)
-        },
-      }
-    })
-
-    .views(self => {
-      const { trackMenuItems: superTrackMenuItems } = self
-      return {
-        /**
-         * #method
-         */
-        trackMenuItems() {
-          return [
-            ...superTrackMenuItems(),
-            {
-              label: 'Adjust to height of display?',
-              type: 'checkbox',
-              checked: self.autoHeight,
-              onClick: () => {
-                self.setAutoHeight(!self.autoHeight)
-              },
-            },
-          ]
-        },
-
-        renderProps() {
-          const superProps = self.adapterProps()
-          return {
-            ...superProps,
-            notReady:
-              superProps.notReady || !self.sources || !self.featuresVolatile,
-            height: self.height,
-            totalHeight: self.totalHeight,
-            renderingMode: self.renderingMode,
-            minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
-            rowHeight: self.rowHeight,
-            sources: self.sources,
-            scrollTop: self.scrollTop,
-          }
-        },
-      }
-    })
     .actions(self => {
       const { renderSvg: superRenderSvg } = self
       return {

plugins/variants/src/MultiLinearVariantMatrixDisplay/components/Crosshair.tsx

@@ -25,14 +25,23 @@ const Crosshair = observer(function ({
   model: MultiLinearVariantMatrixDisplayModel
 }) {
   const { classes } = useStyles()
-  const { hoveredGenotype, lineZoneHeight, height, rowHeight, sources } = model
+  const { hoveredGenotype, lineZoneHeight, totalHeight, rowHeight, sources } =
+    model
   const { width } = getContainingView(model) as LinearGenomeViewModel
   const source = sources?.[Math.floor((mouseY - lineZoneHeight) / rowHeight)]
+  const yoff = mouseY - lineZoneHeight
   return source ? (
     <>
-      <svg className={classes.cursor} width={width} height={height}>
-        <line x1={0} x2={width} y1={mouseY} y2={mouseY} stroke="black" />
-        <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
+      <svg
+        className={classes.cursor}
+        width={width}
+        height={totalHeight}
+        style={{
+          top: lineZoneHeight,
+        }}
+      >
+        <line x1={0} x2={width} y1={yoff} y2={yoff} stroke="black" />
+        <line x1={mouseX} x2={mouseX} y1={0} y2={totalHeight} stroke="black" />
       </svg>
       <MultiVariantTooltip source={{ ...source, hoveredGenotype }} />
     </>

plugins/variants/src/MultiLinearVariantMatrixDisplay/model.ts

@@ -24,6 +24,11 @@ export default function stateModelFactory(
          * #property
          */
         type: types.literal('LinearVariantMatrixDisplay'),
+
+        /**
+         * #property
+         */
+        rowHeightSetting: types.optional(types.number, 1),
       }),
     )
 
@@ -38,16 +43,21 @@ export default function stateModelFactory(
        * #getter
        */
       get totalHeight() {
-        return self.height - self.lineZoneHeight
+        return self.autoHeight
+          ? self.height - self.lineZoneHeight
+          : (self.sources?.length || 1) * self.rowHeightSetting
       },
 
       /**
        * #getter
        */
       get rowHeight() {
-        return this.totalHeight / (self.sources?.length || 1)
+        return self.autoHeight
+          ? self.height / (self.sources?.length || 1)
+          : self.rowHeightSetting
       },
     }))
+
     .views(self => ({
       /**
        * #method

plugins/variants/src/shared/MultiVariantBaseModel.tsx

@@ -5,6 +5,7 @@ import { getSession } from '@jbrowse/core/util'
 import { stopStopToken } from '@jbrowse/core/util/stopToken'
 import { linearBareDisplayStateModelFactory } from '@jbrowse/plugin-linear-genome-view'
 import FilterListIcon from '@mui/icons-material/FilterList'
+import HeightIcon from '@mui/icons-material/Height'
 import PaletteIcon from '@mui/icons-material/Palette'
 import VisibilityIcon from '@mui/icons-material/Visibility'
 import deepEqual from 'fast-deep-equal'
@@ -19,6 +20,7 @@ import type { Instance } from 'mobx-state-tree'
 const SetColorDialog = lazy(() => import('../shared/SetColorDialog'))
 const MAFFilterDialog = lazy(() => import('../shared/MAFFilterDialog'))
 const ClusterDialog = lazy(() => import('../shared/ClusterDialog'))
+const SetRowHeightDialog = lazy(() => import('../shared/SetRowHeightDialog'))
 
 /**
  * #stateModel MultiVariantBaseModel
@@ -61,6 +63,18 @@ export default function MultiVariantBaseModelF(
          * #property
          */
         renderingMode: types.optional(types.string, 'alleleCount'),
+
+        /**
+         * #property
+         * used only if autoHeight is false
+         */
+        rowHeightSetting: types.optional(types.number, 1),
+
+        /**
+         * #property
+         * used only if autoHeight is false
+         */
+        autoHeight: true,
       }),
     )
     .volatile(() => ({
@@ -98,6 +112,12 @@ export default function MultiVariantBaseModelF(
       hoveredGenotype: undefined as string | undefined,
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setRowHeight(arg: number) {
+        self.rowHeightSetting = arg
+      },
       /**
        * #action
        */
@@ -158,6 +178,12 @@ export default function MultiVariantBaseModelF(
       setPhasedMode(arg: string) {
         self.renderingMode = arg
       },
+      /**
+       * #action
+       */
+      setAutoHeight(arg: boolean) {
+        self.autoHeight = arg
+      },
       /**
        * #action
        */
@@ -229,6 +255,13 @@ export default function MultiVariantBaseModelF(
       } = self
 
       return {
+        /**
+         * #getter
+         */
+        get rowHeight() {
+          const { sources, autoHeight, rowHeightSetting, height } = self
+          return autoHeight ? height / (sources?.length || 1) : rowHeightSetting
+        },
         /**
          * #method
          */
@@ -257,6 +290,33 @@ export default function MultiVariantBaseModelF(
               },
             },
 
+            {
+              label: 'Row height',
+              icon: HeightIcon,
+              subMenu: [
+                {
+                  label: 'Manually set row height',
+                  disabled: self.autoHeight,
+                  onClick: () => {
+                    getSession(self).queueDialog(handleClose => [
+                      SetRowHeightDialog,
+                      {
+                        model: self,
+                        handleClose,
+                      },
+                    ])
+                  },
+                },
+                {
+                  label: 'Auto-adjust to display height',
+                  type: 'checkbox',
+                  checked: self.autoHeight,
+                  onClick: () => {
+                    self.setAutoHeight(!self.autoHeight)
+                  },
+                },
+              ],
+            },
             {
               label: 'Color by',
               icon: PaletteIcon,
@@ -329,6 +389,34 @@ export default function MultiVariantBaseModelF(
         },
       }
     })
+    .views(self => ({
+      get canDisplayLabels() {
+        return self.rowHeight > 8 && self.showSidebarLabelsSetting
+      },
+      /**
+       * #getter
+       */
+      get totalHeight() {
+        return self.rowHeight * (self.sources?.length || 1)
+      },
+    }))
+    .views(self => ({
+      renderProps() {
+        const superProps = self.adapterProps()
+        return {
+          ...superProps,
+          notReady:
+            superProps.notReady || !self.sources || !self.featuresVolatile,
+          height: self.height,
+          totalHeight: self.totalHeight,
+          renderingMode: self.renderingMode,
+          minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
+          rowHeight: self.rowHeight,
+          sources: self.sources,
+          scrollTop: self.scrollTop,
+        }
+      },
+    }))
 }
 
 export type MultiVariantBaseStateModel = ReturnType<

plugins/variants/src/shared/SetRowHeightDialog.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
+
+import type { Source } from '../types'
+
+export default function SetRowHeight({
+  model,
+  handleClose,
+}: {
+  model: {
+    rowHeight?: Source[]
+    setRowHeight: (arg: number) => void
+  }
+  handleClose: () => void
+}) {
+  const [value, setValue] = useState<string>(`${model.rowHeight}`)
+
+  return (
+    <Dialog open title="Set row height" onClose={handleClose}>
+      <DialogContent>
+        <TextField
+          value={value}
+          onChange={event => { setValue(event.target.value) }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          disabled={Number.isNaN(+value)}
+          variant="contained"
+          onClick={() => {
+            model.setRowHeight(+value)
+            handleClose()
+          }}
+        >
+          Submit
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}