generic-sequence-panel/esm/components/GenericGeneSeqPanel.js

read feature and sequence data and produce highlighted fasta

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import GenericSeqPanel from "./GenericSeqPanel";
import transcriptList from "../fetchTranscripts";
import { SequenceFeatureDetailsF } from "@jbrowse/core/BaseFeatureWidget/SequenceFeatureDetails/model";
import Selector from "./Selector";
import { observer } from "mobx-react";
import { types } from "mobx-state-tree";
import NCListFeature from "../NCListFeature";
// blank parent Model to allow afterAttach autorun to execute
const Model = types.model({
    sequenceFeatureDetails: SequenceFeatureDetailsF(),
});
const GenericGeneSeqPanel = observer(function ({ nclistbaseurl, fastaurl, refseq, start, end, gene, urltemplate, }) {
    var _a;
    const [result, setResult] = useState();
    const [error, setError] = useState();
    const [{ sequenceFeatureDetails }] = useState(() => {
        const model = Model.create({
            sequenceFeatureDetails: {},
        });
        model.sequenceFeatureDetails.setUpDownBp(500);
        return model;
    });
    useEffect(() => {
        // eslint-disable-next-line @typescript-eslint/no-floating-promises
        (async () => {
            var _a;
            try {
                setError(undefined);
                const res = await transcriptList({
                    nclistbaseurl,
                    refseq,
                    start,
                    end,
                    gene,
                    urltemplate,
                });
                const r = res.map(r => new NCListFeature(r));
                setResult(r);
                sequenceFeatureDetails.setFeature((_a = r[0]) === null || _a === void 0 ? void 0 : _a.toJSON());
            }
            catch (e) {
                console.error(e);
                setError(e);
            }
        })();
    }, [
        sequenceFeatureDetails,
        nclistbaseurl,
        fastaurl,
        refseq,
        start,
        end,
        gene,
        urltemplate,
    ]);
    if (error) {
        return _jsx("div", { style: { color: "red" }, children: `${error}` });
    }
    else if (!result) {
        return _jsx("div", { children: "Loading..." });
    }
    else {
        return (_jsxs("div", { className: "GenericGeneSeqPanel", children: [_jsxs("div", { children: ["Transcript:", _jsx("select", { value: (_a = sequenceFeatureDetails.feature) === null || _a === void 0 ? void 0 : _a.uniqueId, onChange: e => {
                                var _a;
                                sequenceFeatureDetails.setFeature(
                                // @ts-expect-error
                                (_a = result.find(r => r.id() === e.target.value)) === null || _a === void 0 ? void 0 : _a.toJSON());
                            }, children: result.map(r => (_jsx("option", { value: r.id(), children: r.get("name") }, r.id()))) }), "\u00A0", _jsx(Selector, { model: sequenceFeatureDetails })] }), sequenceFeatureDetails.feature ? (_jsx(GenericSeqPanel, { refseq: refseq, fastaurl: fastaurl, model: sequenceFeatureDetails })) : null] }));
    }
});
export default GenericGeneSeqPanel;