@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
78 lines (77 loc) • 4.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
import { getSession } from '@jbrowse/core/util';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import CloseIcon from '@mui/icons-material/Close';
import { Button, CircularProgress, Container, FormControl, Grid as Grid, } from '@mui/material';
import { observer } from 'mobx-react';
import ImportFormRefNameAutocomplete from "./ImportFormRefNameAutocomplete.js";
import { handleSelectedRegion, navToOption } from "../../searchUtils.js";
const useStyles = makeStyles()(theme => ({
importFormContainer: {
padding: theme.spacing(2),
},
button: {
margin: theme.spacing(2),
},
container: {
padding: theme.spacing(4),
},
}));
const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm({ model }) {
const { classes } = useStyles();
const session = getSession(model);
const { assemblyNames, assemblyManager } = session;
const { initialized, error } = model;
const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0]);
const [option, setOption] = useState();
const assembly = assemblyManager.get(selectedAsm);
const assemblyError = assemblyNames.length
? assembly?.error
: 'No configured assemblies';
const displayError = assemblyError || error;
const [value, setValue] = useState('');
const regions = assembly?.regions;
const assemblyLoaded = !!regions;
const r0 = regions ? regions[0]?.refName || '' : '';
useEffect(() => {
setValue(r0);
}, [r0, selectedAsm]);
return (_jsxs("div", { className: classes.container, children: [displayError ? _jsx(ErrorMessage, { error: displayError }) : null, initialized ? (_jsx(Container, { className: classes.importFormContainer, children: _jsx("form", { onSubmit: async (event) => {
event.preventDefault();
model.setError(undefined);
if (value) {
try {
if (option?.getDisplayString() === value &&
option.hasLocation()) {
await navToOption({
option,
model,
assemblyName: selectedAsm,
});
}
else if (option?.results?.length) {
model.setSearchResults(option.results, option.getLabel(), selectedAsm);
}
else if (assembly) {
await handleSelectedRegion({
input: value,
assembly,
model,
});
}
}
catch (e) {
console.error(e);
session.notify(`${e}`, 'warning');
}
}
}, children: _jsxs(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [_jsx(FormControl, { children: _jsx(AssemblySelector, { onChange: val => {
setSelectedAsm(val);
}, localStorageKey: "lgv", session: session, selected: selectedAsm }) }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { style: { color: 'red' } })) : assemblyLoaded ? (_jsx(FormControl, { children: _jsx(ImportFormRefNameAutocomplete, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }) })) : (_jsx(CircularProgress, { size: 20, disableShrink: true }))) : null, _jsx(FormControl, { children: _jsx(Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary", children: "Open" }) }), _jsx(FormControl, { children: _jsx(Button, { disabled: !value, className: classes.button, onClick: () => {
model.setError(undefined);
model.showAllRegionsInAssembly(selectedAsm);
}, variant: "contained", color: "secondary", children: "Show all regions in assembly" }) })] }) }) })) : null] }));
});
export default LinearGenomeViewImportForm;