@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
49 lines (48 loc) • 3.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Dialog } from '@jbrowse/core/ui';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { Button, DialogActions, DialogContent, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, TextField, } from '@mui/material';
import { observer } from 'mobx-react';
const useStyles = makeStyles()(theme => ({
formElt: {
margin: theme.spacing(3),
width: 400,
},
dialogContent: {
width: '80em',
},
root: {
padding: 4,
},
}));
function TextField2(props) {
return (_jsx("div", { children: _jsx(TextField, { ...props }) }));
}
function FormControl2({ children }) {
return (_jsx("div", { children: _jsx(FormControl, { children: children }) }));
}
const SequenceFeatureSettingsDialog = observer(function SequenceFeatureSettingsDialog({ handleClose, model, }) {
const { classes } = useStyles();
const { upperCaseCDS } = model;
const [intronBp, setIntronBp] = useState(`${model.intronBp}`);
const [upDownBp, setUpDownBp] = useState(`${model.upDownBp}`);
const intronBpValid = !Number.isNaN(+intronBp);
const upDownBpValid = !Number.isNaN(+upDownBp);
return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: () => {
handleClose();
}, title: "Feature sequence settings", children: [_jsxs(DialogContent, { className: classes.dialogContent, children: [_jsx(TextField2, { label: "Number of intronic bases around splice site to display", className: classes.formElt, value: intronBp, helperText: !intronBpValid ? 'Not a number' : '', error: !intronBpValid, onChange: event => {
setIntronBp(event.target.value);
} }), _jsx(TextField2, { label: "Number of bases up/down stream of feature to display", className: classes.formElt, value: upDownBp, helperText: !upDownBpValid ? 'Not a number' : '', error: !upDownBpValid, onChange: event => {
setUpDownBp(event.target.value);
} }), _jsxs(FormControl2, { children: [_jsx(FormLabel, { children: "Sequence capitalization" }), _jsxs(RadioGroup, { value: upperCaseCDS ? 'cds' : 'unchanged', onChange: e => {
model.setUpperCaseCDS(e.target.value === 'cds');
}, children: [_jsx(FormControlLabel, { value: "cds", control: _jsx(Radio, { className: classes.root, size: "small" }), label: "Capitalize CDS and lower case everything else" }), _jsx(FormControlLabel, { value: "unchanged", control: _jsx(Radio, { className: classes.root, size: "small" }), label: "Capitalization from reference genome sequence" })] })] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
model.setIntronBp(+intronBp);
model.setUpDownBp(+upDownBp);
handleClose();
}, disabled: !intronBpValid || !upDownBpValid, color: "primary", variant: "contained", children: "Submit" }), _jsx(Button, { onClick: () => {
handleClose();
}, color: "secondary", autoFocus: true, variant: "contained", children: "Cancel" })] })] }));
});
export default SequenceFeatureSettingsDialog;