diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx
index ee2da4c6ef..add32a4c74 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/Header.tsx
@@ -1,20 +1,17 @@
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import { getBpDisplayStr } from '@jbrowse/core/util'
-import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
-import { Button, FormGroup, IconButton, Typography, alpha } from '@mui/material'
+import { FormGroup } from '@mui/material'
import { observer } from 'mobx-react'
import { makeStyles } from 'tss-react/mui'
+import HeaderPanControls from './HeaderPanControls'
+import HeaderRegionWidth from './HeaderRegionWidth'
+import HeaderTrackSelectorButton from './HeaderTrackSelectorButton'
+import HeaderZoomControls from './HeaderZoomControls'
import OverviewScalebar from './OverviewScalebar'
import SearchBox from './SearchBox'
-import ZoomControls from './ZoomControls'
-import { SPACING } from '../consts'
import type { LinearGenomeViewModel } from '..'
-type LGV = LinearGenomeViewModel
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
headerBar: {
display: 'flex',
},
@@ -25,95 +22,30 @@ const useStyles = makeStyles()(theme => ({
spacer: {
flexGrow: 1,
},
-
- panButton: {
- background: alpha(theme.palette.background.paper, 0.8),
- color: theme.palette.text.primary,
- margin: SPACING,
- },
- bp: {
- display: 'flex',
- alignItems: 'center',
- marginLeft: 5,
- },
- toggleButton: {
- height: 44,
- border: 'none',
- marginLeft: theme.spacing(4),
- },
- buttonSpacer: {
- marginRight: theme.spacing(2),
- },
-}))
-
-const HeaderButtons = observer(({ model }: { model: LGV }) => {
- const { classes } = useStyles()
- return (
-
-
-
- )
-})
-
-function PanControls({ model }: { model: LGV }) {
- const { classes } = useStyles()
- return (
- <>
-
-
-
- )
-}
-
-const RegionWidth = observer(function ({ model }: { model: LGV }) {
- const { classes } = useStyles()
- const { coarseTotalBp } = model
- return (
-
- {getBpDisplayStr(coarseTotalBp)}
-
- )
})
-const Controls = ({ model }: { model: LGV }) => {
+const Controls = function ({ model }: { model: LinearGenomeViewModel }) {
const { classes } = useStyles()
return (
)
}
-const LinearGenomeViewHeader = observer(function ({ model }: { model: LGV }) {
+const LinearGenomeViewHeader = observer(function ({
+ model,
+}: {
+ model: LinearGenomeViewModel
+}) {
const { hideHeader, hideHeaderOverview } = model
return !hideHeader ? (
hideHeaderOverview ? (
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderPanControls.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderPanControls.tsx
new file mode 100644
index 0000000000..df4b32c772
--- /dev/null
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderPanControls.tsx
@@ -0,0 +1,47 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import { Button, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+import { SPACING } from '../consts'
+
+import type { LinearGenomeViewModel } from '..'
+
+type LGV = LinearGenomeViewModel
+const useStyles = makeStyles()(theme => ({
+ panButton: {
+ background: alpha(theme.palette.background.paper, 0.8),
+ color: theme.palette.text.primary,
+ margin: SPACING,
+ },
+
+ buttonSpacer: {
+ marginRight: theme.spacing(2),
+ },
+}))
+
+export default function HeaderPanControls({ model }: { model: LGV }) {
+ const { classes } = useStyles()
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx
new file mode 100644
index 0000000000..92e91eca83
--- /dev/null
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderRegionWidth.tsx
@@ -0,0 +1,31 @@
+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 useStyles = makeStyles()({
+ bp: {
+ display: 'flex',
+ alignItems: 'center',
+ marginLeft: 5,
+ cursor: 'pointer',
+ },
+})
+
+const HeaderRegionWidth = observer(function ({
+ model,
+}: {
+ model: LinearGenomeViewModel
+}) {
+ const { classes } = useStyles()
+ const { coarseTotalBp } = model
+ return (
+
+ {getBpDisplayStr(coarseTotalBp)}
+
+ )
+})
+
+export default HeaderRegionWidth
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderTrackSelectorButton.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderTrackSelectorButton.tsx
new file mode 100644
index 0000000000..117fc62194
--- /dev/null
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderTrackSelectorButton.tsx
@@ -0,0 +1,34 @@
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import type { LinearGenomeViewModel } from '..'
+
+const useStyles = makeStyles()(theme => ({
+ toggleButton: {
+ height: 44,
+ border: 'none',
+ marginLeft: theme.spacing(4),
+ },
+}))
+
+const HeaderTrackSelectorButton = observer(function ({
+ model,
+}: {
+ model: LinearGenomeViewModel
+}) {
+ const { classes } = useStyles()
+ return (
+
+
+
+ )
+})
+
+export default HeaderTrackSelectorButton
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx
similarity index 81%
rename from plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx
rename to plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx
index 4712d9cdcf..8376917e99 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/HeaderZoomControls.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react'
+import { lazy, useEffect, useState } from 'react'
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import { getSession } from '@jbrowse/core/util'
import MoreVert from '@mui/icons-material/MoreVert'
import ZoomIn from '@mui/icons-material/ZoomIn'
import ZoomOut from '@mui/icons-material/ZoomOut'
@@ -10,6 +11,9 @@ import { makeStyles } from 'tss-react/mui'
import type { LinearGenomeViewModel } from '..'
+// lazies
+const RegionWidthEditorDialog = lazy(() => import('./RegionWidthEditorDialog'))
+
const useStyles = makeStyles()(theme => ({
container: {
display: 'flex',
@@ -22,7 +26,7 @@ const useStyles = makeStyles()(theme => ({
},
}))
-const ZoomControls = observer(function ({
+const HeaderZoomControls = observer(function ({
model,
}: {
model: LinearGenomeViewModel
@@ -90,6 +94,18 @@ const ZoomControls = observer(function ({
model.zoom(model.bpPerPx * r)
},
})),
+ {
+ label: 'Custom zoom',
+ onClick: () => {
+ getSession(model).queueDialog(handleClose => [
+ RegionWidthEditorDialog,
+ {
+ model,
+ handleClose,
+ },
+ ])
+ },
+ },
]}
>
@@ -98,4 +114,4 @@ const ZoomControls = observer(function ({
)
})
-export default ZoomControls
+export default HeaderZoomControls
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/RegionWidthEditorDialog.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/RegionWidthEditorDialog.tsx
new file mode 100644
index 0000000000..b1b61c950e
--- /dev/null
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/RegionWidthEditorDialog.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import { toLocale } from '@jbrowse/core/util'
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ TextField,
+ Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { LinearGenomeViewModel } from '../model'
+
+const toP = (s = 0) => +(+s).toFixed(1)
+
+const RegionWidthEditorDialog = observer(function ({
+ model,
+ handleClose,
+}: {
+ model: LinearGenomeViewModel
+ handleClose: () => void
+}) {
+ 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 (
+
+ )
+})
+
+export default RegionWidthEditorDialog
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
index db7755f118..7b999a3dff 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
@@ -101,7 +101,7 @@ exports[`renders one track, one region 1`] = `
>