@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
29 lines (28 loc) • 1.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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';
const toP = (s = 0) => +s.toFixed(1);
const RegionWidthEditorDialog = observer(function ({ model, handleClose, }) {
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 (_jsxs(Dialog, { title: "Edit zoom level", open: true, onClose: handleClose, children: [_jsxs(DialogContent, { style: {
display: 'flex',
flexDirection: 'column',
gap: 30,
}, children: [_jsx(Typography, { children: "Enter a specific number of base pairs to change the viewport to show. This is approximate and does not account for padding between regions or off-screen scrolling" }), _jsx(TextField, { helperText: "current zoom level (in bp)", value: val, onChange: event => {
setVal(event.target.value);
} })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
handleClose();
}, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
model.zoomTo(+val2 / model.width);
handleClose();
}, children: "Submit" })] })] }));
});
export default RegionWidthEditorDialog;