From 858a86b03322438cdbe4d14fdaa631f740490a22 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Wed, 29 Jan 2025 16:13:07 -0500
Subject: [PATCH] Updates

---
 .../components/HeaderRegionWidth.tsx          |  25 +----
 .../components/HeaderZoomControls.tsx         |  65 ++++++-----
 .../components/RegionWidthEditorDialog.tsx    |  30 +++---
 .../components/ZoomControls.tsx               | 101 ------------------
 4 files changed, 57 insertions(+), 164 deletions(-)
 delete mode 100644 plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx
index 07d081e6a3..92e91eca83 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx
+++ b/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>
   )
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx
index 6162afbcb2..74e9825fa2 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx
@@ -1,5 +1,7 @@
-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'
@@ -7,6 +9,10 @@ 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>
   )
 })
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/RegionWidthEditorDialog.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/RegionWidthEditorDialog.tsx
index e61cbe3f28..16ed339134 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/RegionWidthEditorDialog.tsx
+++ b/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()
           }}
         >
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx
deleted file mode 100644
index 4712d9cdcf..0000000000
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { 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 '..'
-
-const useStyles = makeStyles()(theme => ({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  slider: {
-    width: 100,
-    color: theme.palette.text.secondary,
-  },
-}))
-
-const ZoomControls = observer(function ({
-  model,
-}: {
-  model: LinearGenomeViewModel
-}) {
-  const { classes } = useStyles()
-  const { maxBpPerPx, minBpPerPx, bpPerPx } = model
-  const [value, setValue] = useState(-Math.log2(bpPerPx) * 100)
-  useEffect(() => {
-    setValue(-Math.log2(bpPerPx) * 100)
-  }, [bpPerPx])
-  const zoomInDisabled = bpPerPx <= minBpPerPx + 0.0001
-  const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001
-  return (
-    <div className={classes.container}>
-      <Tooltip title="Zoom out 2x">
-        <span>
-          <IconButton
-            data-testid="zoom_out"
-            disabled={zoomOutDisabled}
-            onClick={() => {
-              model.zoom(bpPerPx * 2)
-            }}
-          >
-            <ZoomOut />
-          </IconButton>
-        </span>
-      </Tooltip>
-
-      <Slider
-        size="small"
-        className={classes.slider}
-        value={value}
-        min={-Math.log2(maxBpPerPx) * 100}
-        max={-Math.log2(minBpPerPx) * 100}
-        onChangeCommitted={() => model.zoomTo(2 ** (-value / 100))}
-        onChange={(_, val) => {
-          setValue(val as number)
-        }}
-      />
-      <Tooltip title="Zoom in 2x">
-        <span>
-          <IconButton
-            data-testid="zoom_in"
-            disabled={zoomInDisabled}
-            onClick={() => {
-              model.zoom(model.bpPerPx / 2)
-            }}
-          >
-            <ZoomIn />
-          </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)
-            },
-          })),
-        ]}
-      >
-        <MoreVert />
-      </CascadingMenuButton>
-    </div>
-  )
-})
-
-export default ZoomControls