Updates

plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx

@@ -1,24 +1,16 @@
-import { lazy } from 'react'
-
-import { getBpDisplayStr, getSession } from '@jbrowse/core/util'
+import { getBpDisplayStr } from '@jbrowse/core/util'
 import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import type { LinearGenomeViewModel } from '..'
 
-const RegionWidthEditorDialog = lazy(() => import('./RegionWidthEditorDialog'))
-
 const useStyles = makeStyles()({
   bp: {
     display: 'flex',
     alignItems: 'center',
     marginLeft: 5,
     cursor: 'pointer',
-    minWidth: 50,
-    '&:hover': {
-      backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    },
   },
 })
 
@@ -30,20 +22,7 @@ const HeaderRegionWidth = observer(function ({
   const { classes } = useStyles()
   const { coarseTotalBp } = model
   return (
-    <Typography
-      variant="body2"
-      color="textSecondary"
-      className={classes.bp}
-      onClick={() => {
-        getSession(model).queueDialog(handleClose => [
-          RegionWidthEditorDialog,
-          {
-            model,
-            handleClose,
-          },
-        ])
-      }}
-    >
+    <Typography variant="body2" color="textSecondary" className={classes.bp}>
       {getBpDisplayStr(coarseTotalBp)}
     </Typography>
   )

plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx

@@ -1,12 +1,18 @@
-import { useEffect, useState } from 'react'
+import { lazy, useEffect, useState } from 'react'
 
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import MoreVert from '@mui/icons-material/MoreVert'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton, Slider, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import type { LinearGenomeViewModel } from '..'
+import { getSession } from '@jbrowse/core/util'
+
+// lazies
+const RegionWidthEditorDialog = lazy(() => import('./RegionWidthEditorDialog'))
 
 const useStyles = makeStyles()(theme => ({
   container: {
@@ -35,19 +41,6 @@ const HeaderZoomControls = observer(function ({
   const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001
   return (
     <div className={classes.container}>
-      <Tooltip title="Zoom out 15x">
-        <span>
-          <IconButton
-            data-testid="zoom_out_more"
-            disabled={zoomOutDisabled}
-            onClick={() => {
-              model.zoom(bpPerPx * 15)
-            }}
-          >
-            <ZoomOut fontSize="large" />
-          </IconButton>
-        </span>
-      </Tooltip>
       <Tooltip title="Zoom out 2x">
         <span>
           <IconButton
@@ -86,19 +79,37 @@ const HeaderZoomControls = observer(function ({
           </IconButton>
         </span>
       </Tooltip>
-      <Tooltip title="Zoom in 15x">
-        <span>
-          <IconButton
-            data-testid="zoom_in_more"
-            disabled={zoomInDisabled}
-            onClick={() => {
-              model.zoom(model.bpPerPx / 15)
-            }}
-          >
-            <ZoomIn fontSize="large" />
-          </IconButton>
-        </span>
-      </Tooltip>
+
+      <CascadingMenuButton
+        menuItems={[
+          ...[100, 50, 10].map(r => ({
+            label: `Zoom in ${r}x`,
+            onClick: () => {
+              model.zoom(model.bpPerPx / r)
+            },
+          })),
+          ...[10, 50, 100].map(r => ({
+            label: `Zoom out ${r}x`,
+            onClick: () => {
+              model.zoom(model.bpPerPx * r)
+            },
+          })),
+          {
+            label: 'Custom zoom',
+            onClick: () => {
+              getSession(model).queueDialog(handleClose => [
+                RegionWidthEditorDialog,
+                {
+                  model,
+                  handleClose,
+                },
+              ])
+            },
+          },
+        ]}
+      >
+        <MoreVert />
+      </CascadingMenuButton>
     </div>
   )
 })

plugins/linear-genome-view/src/LinearGenomeView/components/RegionWidthEditorDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
 import {
@@ -11,6 +11,7 @@ import {
 import { observer } from 'mobx-react'
 
 import type { LinearGenomeViewModel } from '../model'
+import { toLocale } from '@jbrowse/core/util'
 
 const toP = (s = 0) => +(+s).toFixed(1)
 
@@ -21,29 +22,32 @@ const RegionWidthEditorDialog = observer(function ({
   model: LinearGenomeViewModel
   handleClose: () => void
 }) {
-  const [val, setVal] = useState(`${toP(model.bpPerPx)}`)
+  const { bpPerPx, width } = model
+  const [val, setVal] = useState(`${toLocale(toP(bpPerPx * width))}`)
+  useEffect(() => {
+    setVal(`${toLocale(bpPerPx * width)}`)
+  }, [bpPerPx, width])
+  const val2 = val.replace(/,/g, '')
   return (
     <Dialog title="Edit zoom level" open onClose={handleClose}>
       <DialogContent
-        style={{ display: 'flex', flexDirection: 'column', gap: 30 }}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 30,
+        }}
       >
         <Typography>
-          Allows editing the zoom level using the 'base pairs per pixel'
-          measurement
-        </Typography>
-        <Typography>
-          Large numbers e.g. 10 means there are 10 base pairs in each pixel,
-          small numbers e.g. 0.1 means there are 10 pixels for each base pair
+          Editing zoom level. This is approximate and does not account for
+          padding between regions or off-screen scrolling
         </Typography>
         <TextField
-          helperText="current bpPerPx"
+          helperText="current zoom level (in bp)"
           value={val}
           onChange={event => {
             setVal(event.target.value)
           }}
         />
-        Resulting region width: approximatly{' '}
-        {!Number.isNaN(+val) ? model.width / +val : '(error parsing number)'}
       </DialogContent>
       <DialogActions>
         <Button
@@ -59,7 +63,7 @@ const RegionWidthEditorDialog = observer(function ({
           variant="contained"
           color="primary"
           onClick={() => {
-            model.zoomTo(+val)
+            model.zoomTo(+val2 / model.width)
             handleClose()
           }}
         >