@jbrowse/core/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.js

JBrowse 2 core libraries used by plugins

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Suspense, lazy, useState } from 'react';
import Help from '@mui/icons-material/Help';
import { Button, FormControl, IconButton } from '@mui/material';
import { observer } from 'mobx-react';
import { LoadingEllipses } from "../../ui/index.js";
import { getSession } from "../../util/index.js";
import { makeStyles } from "../../util/tss-react/index.js";
const SequenceFeatureDetails = lazy(() => import("./SequenceFeatureDetails.js"));
const HelpDialog = lazy(() => import("./dialogs/HelpDialog.js"));
const useStyles = makeStyles()(theme => ({
    formControl: {
        margin: 0,
    },
    container: {
        marginTop: theme.spacing(4),
        marginBottom: theme.spacing(4),
    },
}));
const SequenceFeaturePanel = observer(function SequenceFeaturePanel({ model, feature, }) {
    const { classes } = useStyles();
    const [shown, setShown] = useState(false);
    return (_jsxs("div", { className: classes.container, children: [_jsx(FormControl, { className: classes.formControl, children: _jsx(Button, { variant: "contained", onClick: () => {
                        setShown(!shown);
                    }, children: shown ? 'Hide feature sequence' : 'Show feature sequence' }) }), _jsx(IconButton, { onClick: () => {
                    getSession(model).queueDialog(handleClose => [
                        HelpDialog,
                        {
                            handleClose,
                        },
                    ]);
                }, children: _jsx(Help, {}) }), shown ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceFeatureDetails, { model: model, feature: feature }, feature.uniqueId) })) : null] }));
});
export default SequenceFeaturePanel;