@jbrowse/core 2.1.5 → 2.1.6

package/BaseFeatureWidget/BaseFeatureDetail.d.ts

@@ -37,6 +37,7 @@ interface AttributeProps {
     formatter?: (val: unknown, key: string) => React.ReactNode;
     descriptions?: Record<string, React.ReactNode>;
     prefix?: string[];
+    hideUris?: boolean;
 }
 export declare function UriLink({ value, }: {
     value: {
@@ -59,5 +60,5 @@ export declare const FeatureDetails: (props: {
     omit?: string[] | undefined;
     formatter?: ((val: unknown, key: string) => React.ReactNode) | undefined;
 }) => JSX.Element;
-declare const BaseFeatureDetails: (props: BaseInputProps) => JSX.Element | null;
+declare const BaseFeatureDetails: ({ model }: BaseInputProps) => JSX.Element | null;
 export default BaseFeatureDetails;

package/BaseFeatureWidget/BaseFeatureDetail.js

@@ -37,9 +37,8 @@ const x_data_grid_1 = require("@mui/x-data-grid");
 const mobx_react_1 = require("mobx-react");
 const is_object_1 = __importDefault(require("is-object"));
 // locals
-const configuration_1 = require("../configuration");
 const util_1 = require("../util");
-const SanitizedHTML_1 = __importDefault(require("../ui/SanitizedHTML"));
+const ui_1 = require("../ui");
 const SequenceFeatureDetails_1 = __importDefault(require("./SequenceFeatureDetails"));
 const util_2 = require("./util");
 const MAX_FIELD_NAME_WIDTH = 170;
@@ -129,7 +128,7 @@ exports.FieldName = FieldName;
 const BasicValue = ({ value }) => {
     const { classes } = (0, exports.useStyles)();
     const isLink = `${value}`.match(/^https?:\/\//);
-    return (react_1.default.createElement("div", { className: classes.fieldValue }, react_1.default.isValidElement(value) ? (value) : isLink ? (react_1.default.createElement(SanitizedHTML_1.default, { html: `<a href="${value}">${value}</a>` })) : (react_1.default.createElement(SanitizedHTML_1.default, { html: (0, is_object_1.default)(value) ? JSON.stringify(value) : String(value) }))));
+    return (react_1.default.createElement("div", { className: classes.fieldValue }, react_1.default.isValidElement(value) ? (value) : isLink ? (react_1.default.createElement(ui_1.SanitizedHTML, { html: `<a href="${value}">${value}</a>` })) : (react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, is_object_1.default)(value) ? JSON.stringify(value) : String(value) }))));
 };
 exports.BasicValue = BasicValue;
 const SimpleValue = ({ name, value, description, prefix, width, }) => {
@@ -194,7 +193,7 @@ const BaseCoreDetails = (props) => {
 exports.BaseCoreDetails = BaseCoreDetails;
 function UriLink({ value, }) {
     const href = (0, util_1.getUriLink)(value);
-    return react_1.default.createElement(SanitizedHTML_1.default, { html: `<a href="${href}">${href}</a>` });
+    return react_1.default.createElement(ui_1.SanitizedHTML, { html: `<a href="${href}">${href}</a>` });
 }
 exports.UriLink = UriLink;
 const DataGridDetails = ({ value, prefix, name, }) => {
@@ -284,7 +283,7 @@ function UriAttribute({ value, prefix, name, }) {
         react_1.default.createElement(exports.BasicValue, { value: href })));
 }
 function Attributes(props) {
-    const { attributes, omit = [], descriptions, formatter = val => val, prefix = [], } = props;
+    const { attributes, omit = [], descriptions, formatter = val => val, hideUris, prefix = [], } = props;
     const omits = [...omit, ...globalOmit];
     const { __jbrowsefmt, ...rest } = attributes;
     const formattedAttributes = { ...rest, ...__jbrowsefmt };
@@ -299,7 +298,7 @@ function Attributes(props) {
             return value.length > 1 && value.every(val => (0, is_object_1.default)(val)) ? (react_1.default.createElement(DataGridDetails, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(ArrayValue, { key: key, name: key, value: value, description: description, prefix: prefix }));
         }
         else if ((0, is_object_1.default)(value)) {
-            return (0, util_1.isUriLocation)(value) ? (react_1.default.createElement(UriAttribute, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(Attributes, { ...props, omit: omits, key: key, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }));
+            return (0, util_1.isUriLocation)(value) ? (hideUris ? null : (react_1.default.createElement(UriAttribute, { key: key, name: key, prefix: prefix, value: value }))) : (react_1.default.createElement(Attributes, { ...props, omit: omits, key: key, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }));
         }
         else {
             return (react_1.default.createElement(exports.SimpleValue, { key: key, name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }));
@@ -324,22 +323,25 @@ function generateTitle(name, id, type) {
 const FeatureDetails = (props) => {
     const { omit = [], model, feature, depth = 0 } = props;
     const { name = '', id = '', type = '', subfeatures } = feature;
+    const { pluginManager } = (0, util_1.getEnv)(model);
     const session = (0, util_1.getSession)(model);
-    const defaultSeqTypes = ['mRNA', 'transcript', 'gene'];
-    const sequenceTypes = (0, configuration_1.getConf)(session, ['featureDetails', 'sequenceTypes']) || defaultSeqTypes;
+    const ExtraPanel = pluginManager === null || pluginManager === void 0 ? void 0 : pluginManager.evaluateExtensionPoint('Core-extraFeaturePanel', null, { session, feature, model });
     return (react_1.default.createElement(BaseCard, { title: generateTitle(name, id, type) },
         react_1.default.createElement(material_1.Typography, null, "Core details"),
         react_1.default.createElement(CoreDetails, { ...props }),
         react_1.default.createElement(material_1.Divider, null),
         react_1.default.createElement(material_1.Typography, null, "Attributes"),
         react_1.default.createElement(Attributes, { attributes: feature, ...props, omit: [...omit, ...coreDetails] }),
-        sequenceTypes.includes(feature.type) ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) },
-            react_1.default.createElement(SequenceFeatureDetails_1.default, { ...props }))) : null,
-        (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: !sequenceTypes.includes(feature.type) }, subfeatures.map(sub => (react_1.default.createElement(exports.FeatureDetails, { key: JSON.stringify(sub), feature: sub, model: model, depth: depth + 1 }))))) : null));
+        react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ui_1.ErrorMessage, { error: error }) },
+            react_1.default.createElement(SequenceFeatureDetails_1.default, { ...props })),
+        ExtraPanel ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Divider, null),
+            react_1.default.createElement(BaseCard, { title: ExtraPanel.name },
+                react_1.default.createElement(ExtraPanel.Component, { ...props })))) : null,
+        (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1 }, subfeatures.map(sub => (react_1.default.createElement(exports.FeatureDetails, { key: JSON.stringify(sub), feature: sub, model: model, depth: depth + 1 }))))) : null));
 };
 exports.FeatureDetails = FeatureDetails;
-const BaseFeatureDetails = (0, mobx_react_1.observer)((props) => {
-    const { model } = props;
+const BaseFeatureDetails = (0, mobx_react_1.observer)(({ model }) => {
     const { featureData } = model;
     if (!featureData) {
         return null;
@@ -349,9 +351,6 @@ const BaseFeatureDetails = (0, mobx_react_1.observer)((props) => {
     // config guide. this replacement happens both here and when snapshotting the
     // featureData
     const feature = JSON.parse(JSON.stringify(featureData, (_, v) => typeof v === 'undefined' ? null : v));
-    if (isEmpty(feature)) {
-        return null;
-    }
-    return react_1.default.createElement(exports.FeatureDetails, { model: model, feature: feature });
+    return isEmpty(feature) ? null : (react_1.default.createElement(exports.FeatureDetails, { model: model, feature: feature }));
 });
 exports.default = BaseFeatureDetails;

package/BaseFeatureWidget/SequenceBox.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Feat } from './util';
+export declare function GeneCDS({ cds, sequence }: {
+    cds: Feat[];
+    sequence: string;
+}): JSX.Element;
+export declare function GeneProtein({ cds, sequence, codonTable, }: {
+    cds: Feat[];
+    sequence: string;
+    codonTable: {
+        [key: string]: string;
+    };
+}): JSX.Element;
+export declare function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }: {
+    utr: Feat[];
+    cds: Feat[];
+    exons: Feat[];
+    sequence: string;
+    upstream?: string;
+    downstream?: string;
+    includeIntrons?: boolean;
+    collapseIntron?: boolean;
+    intronBp: number;
+}): JSX.Element;
+export declare function Genomic({ sequence, upstream, downstream, }: {
+    sequence: string;
+    upstream?: string;
+    downstream?: string;
+}): JSX.Element;

package/BaseFeatureWidget/SequenceBox.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Genomic = exports.GenecDNA = exports.GeneProtein = exports.GeneCDS = void 0;
+const react_1 = __importDefault(require("react"));
+const util_1 = require("./util");
+// note that these are currently put into the style section instead of being
+// defined in classes to aid copy and paste to an external document e.g. word
+const proteinColor = 'rgb(220,160,220)';
+const intronColor = undefined;
+const cdsColor = 'rgb(220,220,180)';
+const updownstreamColor = 'rgba(250,200,200)';
+const utrColor = 'rgb(200,240,240)';
+const genomeColor = 'rgb(200,280,200)';
+function GeneCDS({ cds, sequence }) {
+    return react_1.default.createElement("span", { style: { background: cdsColor } }, (0, util_1.stitch)(cds, sequence));
+}
+exports.GeneCDS = GeneCDS;
+function GeneProtein({ cds, sequence, codonTable, }) {
+    const str = (0, util_1.stitch)(cds, sequence);
+    let protein = '';
+    for (let i = 0; i < str.length; i += 3) {
+        // use & symbol for undefined codon, or partial slice
+        protein += codonTable[str.slice(i, i + 3)] || '&';
+    }
+    return react_1.default.createElement("span", { style: { background: proteinColor } }, protein);
+}
+exports.GeneProtein = GeneProtein;
+function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }) {
+    const chunks = cds.length
+        ? [...cds, ...utr].sort((a, b) => a.start - b.start)
+        : exons;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        upstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, upstream)) : null,
+        chunks
+            .filter(f => f.start !== f.end)
+            .map((chunk, index) => {
+            var _a;
+            const intron = sequence.slice(chunk.end, (_a = chunks[index + 1]) === null || _a === void 0 ? void 0 : _a.start);
+            return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(chunk) },
+                react_1.default.createElement("span", { style: {
+                        background: chunk.type === 'CDS' ? cdsColor : utrColor,
+                    } }, sequence.slice(chunk.start, chunk.end)),
+                includeIntrons && index < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: intronColor } }, collapseIntron && intron.length > intronBp * 2
+                    ? `${intron.slice(0, intronBp)}...${intron.slice(-intronBp)}`
+                    : intron)) : null));
+        }),
+        downstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, downstream)) : null));
+}
+exports.GenecDNA = GenecDNA;
+function Genomic({ sequence, upstream, downstream, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        upstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, upstream)) : null,
+        react_1.default.createElement("span", { style: {
+                background: genomeColor,
+            } }, sequence),
+        downstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, downstream)) : null));
+}
+exports.Genomic = Genomic;

package/BaseFeatureWidget/SequenceFeatureDetails.d.ts

@@ -1,12 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import { BaseProps } from './types';
-import { ParentFeat, SeqState } from './util';
-interface SequencePanelProps {
-    sequence: SeqState;
-    feature: ParentFeat;
-    mode: string;
-    intronBp?: number;
-}
-export declare const SequencePanel: React.ForwardRefExoticComponent<SequencePanelProps & React.RefAttributes<HTMLDivElement>>;
 export default function SequenceFeatureDetails({ model, feature }: BaseProps): JSX.Element | null;
-export {};

package/BaseFeatureWidget/SequenceFeatureDetails.js

@@ -26,19 +26,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequencePanel = void 0;
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const react_intersection_observer_1 = require("react-intersection-observer");
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 // locals
 const SequenceFeatureSettingsDialog_1 = __importDefault(require("./SequenceFeatureSettingsDialog"));
+const SequenceHelpDialog_1 = __importDefault(require("./SequenceHelpDialog"));
+const SequencePanel_1 = __importDefault(require("./SequencePanel"));
 const util_1 = require("../util");
 const configuration_1 = require("../configuration");
-const util_2 = require("./util");
 // icons
 const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     button: {
         margin: theme.spacing(1),
@@ -49,100 +49,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     container: {
         margin: theme.spacing(1),
     },
+    container2: {
+        marginTop: theme.spacing(1),
+    },
 }));
-// note that these are currently put into the style section instead of being
-// defined in classes to aid copy and paste to an external document e.g. word
-const proteinColor = 'rgb(220,160,220)';
-const intronColor = undefined;
-const cdsColor = 'rgb(220,220,180)';
-const updownstreamColor = 'rgba(250,200,200)';
-const utrColor = 'rgb(200,240,240)';
-function GeneCDS({ cds, sequence }) {
-    return react_1.default.createElement("span", { style: { background: cdsColor } }, (0, util_2.stitch)(cds, sequence));
-}
-function GeneProtein({ cds, sequence, codonTable, }) {
-    const str = (0, util_2.stitch)(cds, sequence);
-    let protein = '';
-    for (let i = 0; i < str.length; i += 3) {
-        // use & symbol for undefined codon, or partial slice
-        protein += codonTable[str.slice(i, i + 3)] || '&';
-    }
-    return react_1.default.createElement("span", { style: { background: proteinColor } }, protein);
-}
-function GenecDNA({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }) {
-    const chunks = cds.length
-        ? [...cds, ...utr].sort((a, b) => a.start - b.start)
-        : exons;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        upstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, upstream)) : null,
-        chunks
-            .filter(f => f.start !== f.end)
-            .map((chunk, index) => {
-            var _a;
-            const intron = sequence.slice(chunk.end, (_a = chunks[index + 1]) === null || _a === void 0 ? void 0 : _a.start);
-            return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(chunk) },
-                react_1.default.createElement("span", { style: {
-                        background: chunk.type === 'CDS' ? cdsColor : utrColor,
-                    } }, sequence.slice(chunk.start, chunk.end)),
-                includeIntrons && index < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: intronColor } }, collapseIntron && intron.length > intronBp * 2
-                    ? `${intron.slice(0, intronBp)}...${intron.slice(-intronBp)}`
-                    : intron)) : null));
-        }),
-        downstream ? (react_1.default.createElement("span", { style: { background: updownstreamColor } }, downstream)) : null));
-}
-exports.SequencePanel = react_1.default.forwardRef((props, ref) => {
-    const { feature, mode, intronBp = 10 } = props;
-    let { sequence: { seq, upstream = '', downstream = '' }, } = props;
-    const { subfeatures } = feature;
-    if (!subfeatures) {
-        return null;
-    }
-    const children = subfeatures
-        .sort((a, b) => a.start - b.start)
-        .map(sub => ({
-        ...sub,
-        start: sub.start - feature.start,
-        end: sub.end - feature.start,
-    }));
-    // we filter duplicate entries in cds and exon lists duplicate entries may be
-    // rare but was seen in Gencode v36 track NCList, likely a bug on GFF3 or
-    // probably worth ignoring here (produces broken protein translations if
-    // included)
-    //
-    // position 1:224,800,006..225,203,064 gene ENSG00000185842.15 first
-    // transcript ENST00000445597.6
-    //
-    // http://localhost:3000/?config=test_data%2Fconfig.json&session=share-FUl7G1isvF&password=HXh5Y
-    let cds = (0, util_2.dedupe)(children.filter(sub => sub.type === 'CDS'));
-    let utr = (0, util_2.dedupe)(children.filter(sub => sub.type.match(/utr/i)));
-    let exons = (0, util_2.dedupe)(children.filter(sub => sub.type === 'exon'));
-    if (!utr.length && cds.length && exons.length) {
-        utr = (0, util_2.calculateUTRs)(cds, exons);
-    }
-    if (feature.strand === -1) {
-        // doing this in a single assignment is needed because downstream and
-        // upstream are swapped so this avoids a temp variable
-        ;
-        [seq, upstream, downstream] = [
-            (0, util_1.revcom)(seq),
-            (0, util_1.revcom)(downstream),
-            (0, util_1.revcom)(upstream),
-        ];
-        cds = (0, util_2.revlist)(cds, seq.length);
-        exons = (0, util_2.revlist)(exons, seq.length);
-        utr = (0, util_2.revlist)(utr, seq.length);
-    }
-    const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
-    return (react_1.default.createElement("div", { ref: ref, "data-testid": "sequence_panel" },
-        react_1.default.createElement("div", { style: {
-                fontFamily: 'monospace',
-                wordWrap: 'break-word',
-                fontSize: 12,
-                maxWidth: 600,
-            } },
-            `>${feature.name || feature.id || 'unknown'}-${mode}\n`,
-            mode === 'cds' ? (react_1.default.createElement(GeneCDS, { cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, intronBp: intronBp })) : mode === 'protein' ? (react_1.default.createElement(GeneProtein, { cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, utr: utr, sequence: seq, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : mode === 'gene_updownstream' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, intronBp: intronBp })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(GenecDNA, { exons: exons, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true, intronBp: intronBp })) : (react_1.default.createElement("div", null, "Unknown type")))));
-});
+const BPLIMIT = 500000;
 // display the stitched-together sequence of a gene's CDS, cDNA, or protein
 // sequence. this is a best effort and weird genomic phenomena could lead these
 // to not be 100% accurate
@@ -150,21 +61,29 @@ function SequenceFeatureDetails({ model, feature }) {
     var _a;
     const { classes } = useStyles();
     const parentFeature = feature;
-    const hasCDS = (_a = parentFeature.subfeatures) === null || _a === void 0 ? void 0 : _a.find(sub => sub.type === 'CDS');
+    const hasCDS = !!((_a = parentFeature.subfeatures) === null || _a === void 0 ? void 0 : _a.find(sub => sub.type === 'CDS'));
+    const isGene = feature.type === 'gene';
     const seqPanelRef = (0, react_1.useRef)(null);
     const [settingsDlgOpen, setSettingsDlgOpen] = (0, react_1.useState)(false);
-    const { ref, inView } = (0, react_intersection_observer_1.useInView)();
+    const [shown, setShown] = (0, react_1.useState)(false);
+    const [helpShown, setHelpShown] = (0, react_1.useState)(false);
     const [sequence, setSequence] = (0, react_1.useState)();
     const [error, setError] = (0, react_1.useState)();
-    const [mode, setMode] = (0, react_1.useState)(hasCDS ? 'cds' : 'cdna');
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [copiedHtml, setCopiedHtml] = (0, react_1.useState)(false);
     const [intronBp, setIntronBp] = (0, util_1.useLocalStorage)('intronBp', 10);
     const [upDownBp, setUpDownBp] = (0, util_1.useLocalStorage)('upDownBp', 500);
+    const [forceLoad, setForceLoad] = (0, react_1.useState)({
+        id: feature.uniqueId,
+        force: false,
+    });
+    (0, react_1.useEffect)(() => {
+        setForceLoad({ id: feature.uniqueId, force: false });
+    }, [feature]);
     (0, react_1.useEffect)(() => {
         var _a;
         let finished = false;
-        if (!model || !inView) {
+        if (!model || !shown) {
             return () => { };
         }
         const { assemblyManager, rpcManager } = (0, util_1.getSession)(model);
@@ -187,76 +106,104 @@ function SequenceFeatureDetails({ model, feature }) {
                 ],
             });
             const [feat] = feats;
-            if (!feat) {
-                throw new Error(`sequence not found for feature with refName:${refName}`);
-            }
-            return feat.get('seq');
+            return (feat === null || feat === void 0 ? void 0 : feat.get('seq')) || '';
         }
         ;
         (async () => {
             try {
+                setError(undefined);
                 const { start, end, refName } = feature;
-                const seq = await fetchSeq(start, end, refName);
-                const up = await fetchSeq(Math.max(0, start - upDownBp), start, refName);
-                const down = await fetchSeq(end, end + upDownBp, refName);
-                if (!finished) {
-                    setSequence({ seq, upstream: up, downstream: down });
+                if (!forceLoad.force && end - start > BPLIMIT) {
+                    setSequence({
+                        error: `Genomic sequence larger than ${BPLIMIT}bp, use "force load" button to display`,
+                    });
+                }
+                else {
+                    const seq = await fetchSeq(start, end, refName);
+                    const up = await fetchSeq(Math.max(0, start - upDownBp), start, refName);
+                    const down = await fetchSeq(end, end + upDownBp, refName);
+                    if (!finished) {
+                        setSequence({ seq, upstream: up, downstream: down });
+                    }
                 }
             }
             catch (e) {
+                console.error(e);
                 setError(e);
             }
         })();
         return () => {
             finished = true;
         };
-    }, [feature, inView, model, upDownBp]);
+    }, [feature, shown, model, upDownBp, forceLoad]);
     const loading = !sequence;
-    return !model ? null : (react_1.default.createElement("div", { ref: ref, className: classes.container },
-        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
-            react_1.default.createElement(material_1.Select, { style: { margin: 0 }, value: mode, onChange: event => setMode(event.target.value) },
-                hasCDS ? react_1.default.createElement(material_1.MenuItem, { value: "cds" }, "CDS") : null,
-                hasCDS ? react_1.default.createElement(material_1.MenuItem, { value: "protein" }, "Protein") : null,
-                react_1.default.createElement(material_1.MenuItem, { value: "gene" }, "Gene w/ introns"),
-                react_1.default.createElement(material_1.MenuItem, { value: "gene_collapsed_intron" },
-                    "Gene w/ ",
-                    intronBp,
-                    "bp of intron"),
-                react_1.default.createElement(material_1.MenuItem, { value: "gene_updownstream" },
-                    "Gene w/ ",
-                    upDownBp,
-                    "bp up+down stream"),
-                react_1.default.createElement(material_1.MenuItem, { value: "gene_updownstream_collapsed_intron" },
-                    "Gene w/ ",
-                    upDownBp,
-                    "bp up+down stream w/ ",
-                    intronBp,
-                    "bp intron"),
-                react_1.default.createElement(material_1.MenuItem, { value: "cdna" }, "cDNA"))),
-        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
-            react_1.default.createElement(material_1.Button, { className: classes.button, type: "button", variant: "contained", onClick: () => {
-                    const ref = seqPanelRef.current;
-                    if (ref) {
-                        (0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
-                        setCopied(true);
-                        setTimeout(() => setCopied(false), 1000);
-                    }
-                } }, copied ? 'Copied to clipboard!' : 'Copy as plaintext')),
+    const session = (0, util_1.getSession)(model);
+    const defaultSeqTypes = ['mRNA', 'transcript', 'gene'];
+    const sequenceTypes = (0, configuration_1.getConf)(session, ['featureDetails', 'sequenceTypes']) || defaultSeqTypes;
+    // only attempt fetching gene type sequence on a bare CDS if it has no parent
+    const attemptGeneType = feature.type === 'CDS'
+        ? sequenceTypes.includes('CDS') && !feature.parentId
+        : sequenceTypes.includes(feature.type);
+    const val = attemptGeneType ? (hasCDS ? 'cds' : 'cdna') : 'genomic';
+    // this useEffect is needed to reset the mode/setMode useState because the contents of the select box can completely change depending on whether we click on a gene feature or non-gene feature, so the current value in the select box must change accordingly
+    (0, react_1.useEffect)(() => {
+        setMode(val);
+    }, [attemptGeneType, val]);
+    const [mode, setMode] = (0, react_1.useState)(attemptGeneType ? (hasCDS ? 'cds' : 'cdna') : 'genomic');
+    const rest = {
+        gene: 'Gene w/ introns',
+        gene_collapsed_intron: `Gene w/ ${intronBp}bp of intron`,
+        gene_updownstream: `Gene w/ ${upDownBp}bp up+down stream`,
+        gene_updownstream_collapsed_intron: `Gene w/ ${upDownBp}bp up+down stream w/ ${intronBp}bp intron`,
+        cdna: 'cDNA',
+    };
+    const arg = attemptGeneType
+        ? hasCDS
+            ? {
+                cds: 'CDS',
+                protein: 'Protein',
+                ...rest,
+            }
+            : rest
+        : {
+            genomic: 'Genomic seq',
+            genomic_sequence_updown: `Genomic seq w/ ${upDownBp}bp up+down stream`,
+        };
+    return (isGene && !hasCDS) || !model ? null : (react_1.default.createElement("div", { className: classes.container2 },
+        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => setShown(!shown) }, shown ? 'Hide feature sequence' : 'Show feature sequence'),
         react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
-            react_1.default.createElement(material_1.Tooltip, { title: "Note that 'Copy as HTML' can retain the colors but cannot be pasted into some programs like notepad that only expect plain text" },
-                react_1.default.createElement(material_1.Button, { className: classes.button, type: "button", variant: "contained", onClick: () => {
+            react_1.default.createElement(material_1.IconButton, { onClick: () => setHelpShown(true) },
+                react_1.default.createElement(Help_1.default, null))),
+        react_1.default.createElement("br", null),
+        shown ? (react_1.default.createElement("div", { className: classes.container2 },
+            react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+                react_1.default.createElement(material_1.Select, { value: mode, onChange: event => setMode(event.target.value) }, Object.entries(arg).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val))))),
+            react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+                react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", color: "inherit", onClick: () => {
                         const ref = seqPanelRef.current;
                         if (ref) {
-                            (0, copy_to_clipboard_1.default)(ref.innerHTML, { format: 'text/html' });
-                            setCopiedHtml(true);
-                            setTimeout(() => setCopiedHtml(false), 1000);
+                            (0, copy_to_clipboard_1.default)(ref.textContent || '', { format: 'text/plain' });
+                            setCopied(true);
+                            setTimeout(() => setCopied(false), 1000);
                         }
-                    } }, copiedHtml ? 'Copied to clipboard!' : 'Copy as HTML'))),
-        react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
-            react_1.default.createElement(material_1.IconButton, { onClick: () => setSettingsDlgOpen(true), style: { margin: 0, padding: 0 } },
-                react_1.default.createElement(Settings_1.default, null))),
-        react_1.default.createElement("br", null),
-        react_1.default.createElement(react_1.default.Fragment, null, error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : loading ? (react_1.default.createElement(material_1.Typography, null, "Loading gene sequence...")) : sequence ? (react_1.default.createElement(exports.SequencePanel, { ref: seqPanelRef, feature: parentFeature, mode: mode, sequence: sequence, intronBp: intronBp })) : (react_1.default.createElement(material_1.Typography, null, "No sequence found"))),
+                    } }, copied ? 'Copied to clipboard!' : 'Copy plaintext')),
+            react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+                react_1.default.createElement(material_1.Tooltip, { title: "The 'Copy HTML' function retains the colors from the sequence panel but cannot be pasted into some programs like notepad that only expect plain text" },
+                    react_1.default.createElement(material_1.Button, { className: classes.button, variant: "contained", color: "inherit", onClick: () => {
+                            const ref = seqPanelRef.current;
+                            if (ref) {
+                                (0, copy_to_clipboard_1.default)(ref.innerHTML, { format: 'text/html' });
+                                setCopiedHtml(true);
+                                setTimeout(() => setCopiedHtml(false), 1000);
+                            }
+                        } }, copiedHtml ? 'Copied to clipboard!' : 'Copy HTML'))),
+            react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+                react_1.default.createElement(material_1.IconButton, { onClick: () => setSettingsDlgOpen(true) },
+                    react_1.default.createElement(Settings_1.default, null))),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(react_1.default.Fragment, null, error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : loading ? (react_1.default.createElement(material_1.Typography, null, "Loading gene sequence...")) : sequence ? ('error' in sequence ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Typography, { color: "error" }, sequence.error),
+                react_1.default.createElement(material_1.Button, { variant: "contained", color: "inherit", onClick: () => setForceLoad({ ...forceLoad, force: true }) }, "Force load"))) : (react_1.default.createElement(SequencePanel_1.default, { ref: seqPanelRef, feature: parentFeature, mode: mode, sequence: sequence, intronBp: intronBp }))) : (react_1.default.createElement(material_1.Typography, null, "No sequence found"))))) : null,
         settingsDlgOpen ? (react_1.default.createElement(SequenceFeatureSettingsDialog_1.default, { handleClose: arg => {
                 if (arg) {
                     const { upDownBp, intronBp } = arg;
@@ -264,6 +211,7 @@ function SequenceFeatureDetails({ model, feature }) {
                     setUpDownBp(upDownBp);
                 }
                 setSettingsDlgOpen(false);
-            }, upDownBp: upDownBp, intronBp: intronBp })) : null));
+            }, upDownBp: upDownBp, intronBp: intronBp })) : null,
+        helpShown ? react_1.default.createElement(SequenceHelpDialog_1.default, { handleClose: () => setHelpShown(false) }) : null));
 }
 exports.default = SequenceFeatureDetails;

package/BaseFeatureWidget/SequenceHelpDialog.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function HelpDialog({ handleClose, }: {
+    handleClose: () => void;
+}): JSX.Element;

package/BaseFeatureWidget/SequenceHelpDialog.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+    dialogContent: {},
+}));
+function HelpDialog({ handleClose, }) {
+    const { classes } = useStyles();
+    return (react_1.default.createElement(material_1.Dialog, { maxWidth: "xl", open: true, onClose: () => handleClose() },
+        react_1.default.createElement(material_1.DialogTitle, null,
+            "Feature sequence panel",
+            handleClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => handleClose() },
+                react_1.default.createElement(Close_1.default, null))) : null),
+        react_1.default.createElement(material_1.Divider, null),
+        react_1.default.createElement(material_1.DialogContent, { className: classes.dialogContent },
+            react_1.default.createElement(material_1.Typography, { paragraph: true }, "The \"Feature sequence\" panel shows the underlying genomic sequence for a given feature, fetched from the reference genome."),
+            react_1.default.createElement(material_1.Typography, null, "For gene features, this panel does special calculations to e.g. stitch together the coding sequence, the options are:"),
+            react_1.default.createElement("ul", null,
+                react_1.default.createElement("li", null, "CDS - shows the stitched together CDS sequences"),
+                react_1.default.createElement("li", null, "Protein - the translated coding sequence, with the \"standard\" genetic code"),
+                react_1.default.createElement("li", null, "cDNA - shows the UTRs and stitched together CDS sequences"),
+                react_1.default.createElement("li", null, "Gene w/ introns - the sequence underlying the entire gene including including introns, with UTR and CDS highlighted"),
+                react_1.default.createElement("li", null, "Gene w/ Nbp introns - same \"Gene w/ introns\", but limiting to a subset of the intron sequence displayed"),
+                react_1.default.createElement("li", null, "Gene +/- Nbp up+down stream - same as \"Gene w/ introns\" but with up and downstream sequence displayed"),
+                react_1.default.createElement("li", null, "Gene +/- Nbp up+down stream, Nbp introns - same as \"Gene w/ introns\", but with limited intron sequence displayed and up and downstream sequence")),
+            react_1.default.createElement(material_1.Typography, { paragraph: true }, "For other feature types, the options are:"),
+            react_1.default.createElement("ul", null,
+                react_1.default.createElement("li", null, "Feature sequence - the reference genome sequence underlying the feature"),
+                react_1.default.createElement("li", null, "Feature sequence +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence")),
+            react_1.default.createElement(material_1.Typography, null,
+                "Note: you can use the \"gear icon\" ",
+                react_1.default.createElement(Settings_1.default, null),
+                " to edit the number of bp displayed up/downstream and in the intron region")),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), autoFocus: true, variant: "contained" }, "Close"))));
+}
+exports.default = HelpDialog;

package/BaseFeatureWidget/SequencePanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ParentFeat, SeqState } from './util';
+interface SequencePanelProps {
+    sequence: SeqState;
+    feature: ParentFeat;
+    mode: string;
+    intronBp?: number;
+}
+declare const SequencePanel: React.ForwardRefExoticComponent<SequencePanelProps & React.RefAttributes<HTMLDivElement>>;
+export default SequencePanel;