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

JBrowse 2 core libraries used by plugins

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Typography } from '@mui/material';
import { observer } from 'mobx-react';
import SequenceFeatureMenu from "./dialogs/SequenceFeatureMenu.js";
import SequenceTypeSelector from "./dialogs/SequenceTypeSelector.js";
import { createSequenceFeatureDetailsModel, destroySequenceFeatureDetailsModel, } from "./model.js";
import { ErrorMessage, LoadingEllipses } from "../../ui/index.js";
import { SimpleFeature, getSession } from "../../util/index.js";
import { useFeatureSequence } from "../../util/useFeatureSequence.js";
const SequencePanel = lazy(() => import("./SequencePanel.js"));
const SequenceDialog = lazy(() => import("./dialogs/SequenceDialog.js"));
const SequenceFeatureDetails = observer(function SequenceFeatureDetails({ model, feature, }) {
    const [sequenceFeatureDetails] = useState(() => createSequenceFeatureDetailsModel());
    useEffect(() => {
        return () => {
            destroySequenceFeatureDetailsModel(sequenceFeatureDetails);
        };
    }, [sequenceFeatureDetails]);
    const { upDownBp } = sequenceFeatureDetails;
    const seqPanelRef = useRef(null);
    const [openInDialog, setOpenInDialog] = useState(false);
    const [forceLoad, setForceLoad] = useState(false);
    const session = getSession(model);
    const assemblyName = model.view?.assemblyNames?.[0];
    const simpleFeature = useMemo(() => new SimpleFeature(feature), [feature]);
    const { sequence, error } = useFeatureSequence({
        assemblyName,
        session,
        feature: simpleFeature,
        upDownBp,
        forceLoad,
    });
    useEffect(() => {
        sequenceFeatureDetails.setFeature(feature);
    }, [sequenceFeatureDetails, feature]);
    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx(SequenceTypeSelector, { model: sequenceFeatureDetails }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: sequenceFeatureDetails, extraItems: [
                            {
                                label: 'Open in dialog',
                                onClick: () => {
                                    setOpenInDialog(true);
                                },
                            },
                        ] })] }), openInDialog ? (_jsxs("div", { children: ["Open in dialog...", _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceDialog, { model: model, sequenceFeatureDetails: sequenceFeatureDetails, feature: feature, handleClose: () => {
                                setOpenInDialog(false);
                            } }) })] })) : (_jsxs("div", { children: [feature.type === 'gene' ? (_jsx(Typography, { children: "Note: inspect subfeature sequences for protein/CDS computations" })) : null, error ? (_jsx(ErrorMessage, { error: error })) : !sequence ? (_jsx(LoadingEllipses, {})) : 'error' in sequence ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "error", children: sequence.error }), _jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
                                    setForceLoad(true);
                                }, children: "Force load" })] })) : (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: sequenceFeatureDetails }) }))] }))] }));
});
export default SequenceFeatureDetails;