@apollo-annotation/jbrowse-plugin-apollo 0.1.21 → 0.2.1

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { gff3ToAnnotationFeature, AddAssemblyFromExternalChange, AddAssemblyAndF
 import { ConfigurationSchema, readConfObject, getConf, ConfigurationReference } from '@jbrowse/core/configuration';
 import { BaseInternetAccountConfig, InternetAccount, RendererType, TextSearchAdapterType, BaseDisplay, WidgetType, createBaseTrackConfig, TrackType, createBaseTrackModel, InternetAccountType, DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import Plugin from '@jbrowse/core/Plugin';
-import { checkAbortSignal, isUriLocation, isAbortException, isElectron, isAbstractMenuManager, getSession, getContainingView, revcom, isSessionModelWithWidgets, doesIntersect2, defaultCodonTable, getFrame, intersection2, reverse, defaultStarts, defaultStops } from '@jbrowse/core/util';
+import { isUriLocation, isLocalPathLocation, isElectron, isAbstractMenuManager, getSession, getContainingView, getFrame, revcom, isSessionModelWithWidgets, doesIntersect2, defaultCodonTable, intersection2, reverse, defaultStarts, defaultStops } from '@jbrowse/core/util';
 import AddIcon from '@mui/icons-material/Add';
 import { autorun, toJS, observable } from 'mobx';
 import { getSnapshot, getParent, getRoot, types, addDisposer, flow, isAlive, resolveIdentifier, getParentOfType, applySnapshot } from 'mobx-state-tree';
@@ -21,10 +21,11 @@ import CloseIcon from '@mui/icons-material/Close';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { LocalPathLocation, UriLocation, BlobLocation, ElementId } from '@jbrowse/core/util/types/mst';
+import { openDB, deleteDB } from 'idb/with-async-ittr';
+import { checkAbortSignal, isAbortException } from '@jbrowse/core/util/aborting';
 import jsonpath from 'jsonpath';
 import { openLocation } from '@jbrowse/core/util/io';
 import equal from 'fast-deep-equal/es6';
-import { openDB } from 'idb/with-async-ittr';
 import { saveAs } from 'file-saver';
 import Checkbox$1 from '@mui/material/Checkbox';
 import FormControlLabel$1 from '@mui/material/FormControlLabel';
@@ -49,7 +50,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ErrorIcon from '@mui/icons-material/Error';
 import SaveIcon from '@mui/icons-material/Save';
 
-var version = "0.1.21";
+var version = "0.2.1";
 
 const ApolloConfigSchema = ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -685,7 +686,7 @@ function elaborateMatch(textIndexPaths, term, queryWordIndexes, queryWords, pref
     const sortedWordIndexes = [...queryWordIndexes].sort();
     const matchedQueryWords = sortedWordIndexes.map((i) => queryWords[i]);
     const queryWordRegexps = matchedQueryWords.map((queryWord) => {
-        const escaped = queryWord.replaceAll(/[$()*+./?[\\\]^{|}-]/g, '\\$&');
+        const escaped = queryWord.replaceAll(/[$()*+./?[\\\]^{|}-]/g, String.raw `\$&`);
         return new RegExp(`\\b${escaped}`, 'gi');
     });
     // const needle = matchedQueryWords.join(' ')
@@ -832,7 +833,13 @@ async function loadOboGraphJson(db) {
     // TODO: using file streaming along with an event-based json parser
     // instead of JSON.parse and .readFile could probably make this faster
     // and less memory intensive
-    const oboGraph = JSON.parse(await openLocation(this.sourceLocation).readFile('utf8'));
+    let oboGraph;
+    try {
+        oboGraph = JSON.parse(await openLocation(this.sourceLocation).readFile('utf8'));
+    }
+    catch {
+        throw new Error('Error in loading ontology');
+    }
     const parseTime = Date.now();
     const [graph, ...additionalGraphs] = oboGraph.graphs ?? [];
     if (!graph) {
@@ -911,12 +918,6 @@ async function isDatabaseCurrent(db) {
 }
 
 /* eslint-disable @typescript-eslint/only-throw-error */
-/**
- * @deprecated use the one from jbrowse core when it is published
- **/
-function isLocalPathLocation(location) {
-    return (typeof location === 'object' && location !== null && 'localPath' in location);
-}
 async function arrayFromAsync(iter) {
     const a = [];
     for await (const i of iter) {
@@ -991,14 +992,21 @@ class OntologyStore {
         if (await this.isDatabaseCurrent(db)) {
             return db;
         }
-        const { sourceLocation, sourceType } = this;
-        if (sourceType === 'obo-graph-json') {
-            await this.loadOboGraphJson(db);
+        try {
+            const { sourceLocation, sourceType } = this;
+            if (sourceType === 'obo-graph-json') {
+                await this.loadOboGraphJson(db);
+            }
+            else {
+                throw new Error(`ontology source file ${JSON.stringify(sourceLocation)} has type ${sourceType}, which is not yet supported`);
+            }
+            return db;
         }
-        else {
-            throw new Error(`ontology source file ${JSON.stringify(sourceLocation)} has type ${sourceType}, which is not yet supported`);
+        catch (error) {
+            db.close();
+            await deleteDB(this.dbName);
+            throw error;
         }
-        return db;
     }
     async termCount(tx) {
         const db = await this.db;
@@ -1176,7 +1184,7 @@ class OntologyStore {
         }
         // fetch the full nodes and filter out deprecated ones
         const terms = [];
-        for await (const termId of termIds) {
+        for (const termId of termIds) {
             const node = await myTx.objectStore('nodes').get(termId);
             if (node && isOntologyClass(node) && !isDeprecated(node)) {
                 terms.push(node);
@@ -1234,15 +1242,22 @@ const OntologyManagerType = types
         'SO:': 'http://purl.obolibrary.org/obo/SO_',
     }),
 })
+    .views((self) => ({
+    get featureTypeOntologyName() {
+        const jbConfig = getRoot(self).jbrowse
+            .configuration;
+        const pluginConfiguration = jbConfig.ApolloPlugin;
+        const featureTypeOntologyName = readConfObject(pluginConfiguration, 'featureTypeOntologyName');
+        return featureTypeOntologyName;
+    },
+}))
     .views((self) => ({
     /**
      * gets the OntologyRecord for the ontology we should be
      * using for feature types (e.g. SO or maybe biotypes)
      **/
     get featureTypeOntology() {
-        // TODO: change this to read some configuration for which feature type ontology
-        // we should be using. currently hardcoded to use SO.
-        return this.findOntology('Sequence Ontology');
+        return this.findOntology(self.featureTypeOntologyName);
     },
     findOntology(name, version) {
         return self.ontologies.find((record) => {
@@ -1354,7 +1369,6 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
     // effect for clearing choices when not open
     useEffect(() => {
         if (!open) {
-            // eslint-disable-next-line unicorn/no-useless-undefined
             setTermChoices(undefined);
         }
     }, [open]);
@@ -1389,7 +1403,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
                 }
             }, (error) => {
                 if (!signal.aborted && !isAbortException(error)) {
-                    session.notify(error.message, 'error');
+                    session.notify(error instanceof Error ? error.message : String(error), 'error');
                 }
             });
         }
@@ -1408,7 +1422,6 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             return;
         }
         if (typeof newValue === 'string') {
-            // eslint-disable-next-line unicorn/no-useless-undefined
             setCurrentOntologyTerm(undefined);
             onChange(valueString, newValue);
         }
@@ -1443,7 +1456,7 @@ async function getCurrentTerm(ontologyStore, currentTermLabel, filterTerms, _sig
     }
     // TODO: support prefixed IDs as ontology terms here (e.g. SO:001234)
     const terms = await ontologyStore.getTermsWithLabelOrSynonym(currentTermLabel, { includeSubclasses: false });
-    const term = terms.find(filterTerms ?? (() => true));
+    const term = terms.find((term) => (filterTerms ?? (() => true))(term));
     if (!term) {
         throw new Error(`not a valid ${ontologyStore.ontologyName} term`);
     }
@@ -1525,7 +1538,7 @@ function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/* eslint-disable @typescript-eslint/unbound-method */
 function AddFeature({ changeManager, handleClose, region, session, }) {
     const { notify } = session;
     const [end, setEnd] = useState(String(region.end));
@@ -1585,7 +1598,6 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
                 break;
             }
             default: {
-                // eslint-disable-next-line unicorn/no-useless-undefined
                 setStrand(undefined);
             }
         }
@@ -1800,7 +1812,7 @@ function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, so
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
-/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable @typescript-eslint/unbound-method */
 function DeleteAssembly({ changeManager, handleClose, session, }) {
     const { internetAccounts } = getRoot(session);
     const [selectedAssembly, setSelectedAssembly] = useState();
@@ -2183,6 +2195,7 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
+/* eslint-disable @typescript-eslint/unbound-method */
 function LogOut({ handleClose, session }) {
     const { internetAccounts } = getRoot(session);
     const [errorMessage, setErrorMessage] = useState('');
@@ -2202,7 +2215,7 @@ function LogOut({ handleClose, session }) {
         event.preventDefault();
         setErrorMessage('');
         selectedInternetAccount.removeToken();
-        window.location.reload();
+        globalThis.location.reload();
     }
     return (React__default.createElement(Dialog, { open: true, title: "Log out", handleClose: handleClose, maxWidth: false, "data-testid": "log-out" },
         React__default.createElement("form", { onSubmit: onSubmit },
@@ -2323,7 +2336,7 @@ function ManageChecks({ handleClose, session }) {
         }
         else {
             const index = checks.indexOf(_id, 0);
-            if (index > -1) {
+            if (index !== -1) {
                 checks.splice(index, 1);
             }
             setSelectedChecks(checks);
@@ -2364,7 +2377,7 @@ function ManageChecks({ handleClose, session }) {
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+/* eslint-disable @typescript-eslint/unbound-method */
 function ManageUsers({ changeManager, handleClose, session, }) {
     const { internetAccounts } = getRoot(session);
     const apolloInternetAccounts = internetAccounts.filter((ia) => ia.type === 'ApolloInternetAccount' && ia.role?.includes('admin'));
@@ -2448,7 +2461,7 @@ function ManageUsers({ changeManager, handleClose, session, }) {
             type: 'actions',
             getActions: (params) => [
                 React__default.createElement(GridActionsCellItem, { key: `delete-${params.id}`, icon: React__default.createElement(DeleteIcon, null), onClick: async () => {
-                        if (window.confirm('Delete this user?')) {
+                        if (globalThis.confirm('Delete this user?')) {
                             await deleteUser(params.id);
                         }
                     }, disabled: isCurrentUser(params.id), label: "Delete" }),
@@ -2488,7 +2501,7 @@ function ManageUsers({ changeManager, handleClose, session, }) {
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+/* eslint-disable @typescript-eslint/unbound-method */
 // interface TermAutocompleteResult extends TermValue {
 //   label: string[]
 //   match: string
@@ -2900,7 +2913,7 @@ function ModifyFeatureAttribute({ changeManager, handleClose, session, sourceAss
                 React__default.createElement(Button, { variant: "outlined", type: "submit", disabled: showAddNewForm, onClick: handleClose }, "Cancel")))));
 }
 
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 function OpenLocalFile({ handleClose, session }) {
     const { apolloDataStore } = session;
     const { addAssembly, addSessionAssembly, assemblyManager, notify } = session;
@@ -2996,7 +3009,7 @@ function OpenLocalFile({ handleClose, session }) {
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+/* eslint-disable @typescript-eslint/unbound-method */
 const useStyles$d = makeStyles()((theme) => ({
     changeTextarea: {
         fontFamily: 'monospace',
@@ -3520,7 +3533,9 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
             setLoginTypes(data);
         }
         getAuthTypes().catch((error) => {
-            isAbortException(error) ? '' : setErrorMessage(String(error));
+            if (!isAbortException(error)) {
+                setErrorMessage(String(error));
+            }
         });
         return () => {
             controller.abort();
@@ -3643,7 +3658,7 @@ const stateModelFactory$2 = (configSchema) => {
             async openAuthWindow(type, resolve, reject) {
                 const redirectUri = isElectron
                     ? 'http://localhost/auth'
-                    : window.location.origin + window.location.pathname;
+                    : globalThis.location.origin + globalThis.location.pathname;
                 const url = new URL('auth/login', self.baseURL);
                 const params = new URLSearchParams({
                     type,
@@ -3652,7 +3667,7 @@ const stateModelFactory$2 = (configSchema) => {
                 url.search = params.toString();
                 const eventName = `JBrowseAuthWindow-${self.internetAccountId}`;
                 if (isElectron) {
-                    const { ipcRenderer } = window.require('electron');
+                    const { ipcRenderer } = globalThis.require('electron');
                     const redirectUriFromElectron = await ipcRenderer.invoke('openAuthWindow', {
                         internetAccountId: self.internetAccountId,
                         data: { redirect_uri: redirectUri },
@@ -3826,14 +3841,9 @@ const stateModelFactory$2 = (configSchema) => {
                 }
             });
             socket.on('REQUEST_INFORMATION', (message) => {
-                const { channel, reqType, userSessionId } = message;
+                const { channel, userSessionId } = message;
                 if (channel === 'REQUEST_INFORMATION' && userSessionId !== token) {
-                    switch (reqType) {
-                        case 'CURRENT_LOCATION': {
-                            session.broadcastLocations();
-                            break;
-                        }
-                    }
+                    session.broadcastLocations();
                 }
             });
         },
@@ -4505,7 +4515,6 @@ function ApolloRendering(props) {
             }
             await changeManager.submit(change);
         }
-        // eslint-disable-next-line unicorn/no-useless-undefined
         setDragging(undefined);
         setMovedDuringLastMouseDown(false);
     }
@@ -4518,7 +4527,6 @@ function ApolloRendering(props) {
         React__default.createElement(Menu, { open: Boolean(contextMenuFeature), anchorReference: "anchorPosition", anchorPosition: contextCoord
                 ? { left: contextCoord[0], top: contextCoord[1] }
                 : undefined, "data-testid": "base_linear_display_context_menu", onClose: () => {
-                // eslint-disable-next-line unicorn/no-useless-undefined
                 setContextMenuFeature(undefined);
             } },
             React__default.createElement(MenuItem, { disabled: isReadOnly, key: 1, value: 1, onClick: () => {
@@ -4532,7 +4540,6 @@ function ApolloRendering(props) {
                             session,
                             handleClose: () => {
                                 doneCallback();
-                                // eslint-disable-next-line unicorn/no-useless-undefined
                                 setContextMenuFeature(undefined);
                             },
                             changeManager,
@@ -4553,7 +4560,6 @@ function ApolloRendering(props) {
                             session,
                             handleClose: () => {
                                 doneCallback();
-                                // eslint-disable-next-line unicorn/no-useless-undefined
                                 setContextMenuFeature(undefined);
                             },
                             changeManager,
@@ -4573,7 +4579,6 @@ function ApolloRendering(props) {
                             session,
                             handleClose: () => {
                                 doneCallback();
-                                // eslint-disable-next-line unicorn/no-useless-undefined
                                 setContextMenuFeature(undefined);
                             },
                             changeManager,
@@ -4691,11 +4696,16 @@ function installApolloTextSearchAdapter(pluginManager) {
 
 const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
     ontologies: types.array(OntologyRecordConfiguration),
+    featureTypeOntologyName: {
+        description: 'Name of the feature type ontology',
+        type: 'string',
+        defaultValue: 'Sequence Ontology',
+    },
 });
 
 function parseCigar(cigar) {
     return (cigar.toUpperCase().match(/\d+\D/g) ?? []).map((op) => {
-        return [(op.match(/\D/) ?? [])[0], Number.parseInt(op, 10)];
+        return [(/\D/.exec(op) ?? [])[0], Number.parseInt(op, 10)];
     });
 }
 function annotationFromPileup(pluggableElement) {
@@ -4867,7 +4877,7 @@ function annotationFromPileup(pluggableElement) {
     return pluggableElement;
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/unbound-method */
 const StringTextField = observer(function StringTextField({ onChangeCommitted, value: initialValue, ...props }) {
     const [value, setValue] = useState(String(initialValue));
     const [blur, setBlur] = useState(false);
@@ -5072,7 +5082,7 @@ const Attributes = observer(function Attributes({ assembly, editable, feature, s
         }
     }
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { style: { display: 'inline', marginLeft: '15px' }, variant: "h5" }, "Attributes"),
+        React__default.createElement(Typography, { variant: "h5" }, "Attributes"),
         React__default.createElement(Grid, { container: true, direction: "column", spacing: 1 },
             Object.entries(attributes).map(([key, value]) => {
                 if (key === '') {
@@ -5121,7 +5131,7 @@ const Attributes = observer(function Attributes({ assembly, editable, feature, s
         errorMessage ? (React__default.createElement(Typography, { color: "error" }, errorMessage)) : null));
 });
 
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/unbound-method */
 const NumberTextField = observer(function NumberTextField({ onChangeCommitted, value: initialValue, ...props }) {
     const [value, setValue] = useState(String(initialValue));
     const [blur, setBlur] = useState(false);
@@ -5248,7 +5258,7 @@ const BasicInformation = observer(function BasicInformation({ assembly, feature,
         errorMessage ? (React__default.createElement(Typography, { color: "error" }, errorMessage)) : null));
 });
 
-function formatSequence$1(seq, refName, start, end, wrap) {
+function formatSequence(seq, refName, start, end, wrap) {
     const header = `>${refName}:${start + 1}–${end}\n`;
     const body = wrap === undefined ? seq : splitStringIntoChunks(seq, wrap).join('\n');
     return `${header}${body}`;
@@ -5278,7 +5288,7 @@ const Sequence = observer(function Sequence({ assembly, feature, refName, sessio
     if (showSequence) {
         sequence = refSeq.getSequence(min, max);
         if (sequence) {
-            sequence = formatSequence$1(sequence, refName, min, max);
+            sequence = formatSequence(sequence, refName, min, max);
         }
         else {
             void session.apolloDataStore.loadRefSeq([
@@ -5418,383 +5428,219 @@ const ApolloTranscriptDetailsModel = types
     },
 }));
 
-/**
- * Get single feature by featureId
- * @param feature -
- * @param featureId -
- * @returns
- */
-function getFeatureFromId(feature, featureId) {
-    if (feature._id === featureId) {
-        return feature;
-    }
-    // Check if there is also childFeatures in parent feature and it's not empty
-    // Let's get featureId from recursive method
-    if (!feature.children) {
-        return;
-    }
-    for (const [, childFeature] of feature.children) {
-        const subFeature = getFeatureFromId(childFeature, featureId);
-        if (subFeature) {
-            return subFeature;
-        }
-    }
-    return;
-}
-function findExonInRange(exons, pairStart, pairEnd) {
-    for (const exon of exons) {
-        if (Number(exon.min) <= pairStart && Number(exon.max) >= pairEnd) {
-            return exon;
-        }
-    }
-    return null;
-}
-function removeMatchingExon(exons, matchStart, matchEnd) {
-    // Filter the array to remove elements matching the specified start and end
-    return exons.filter((exon) => !(exon.min === matchStart && exon.max === matchEnd));
-}
 const TranscriptBasicInformation = observer(function TranscriptBasicInformation({ assembly, feature, refName, session, }) {
     const { notify } = session;
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
     const refData = currentAssembly?.getByRefName(refName);
     const { changeManager } = session.apolloDataStore;
-    function handleStartChange(newStart, featureId, oldStart) {
-        newStart--;
-        oldStart--;
-        if (newStart < feature.min) {
-            notify('Feature start cannot be less than parent starts', 'error');
-            return;
-        }
-        const subFeature = getFeatureFromId(feature, featureId);
-        if (!subFeature?.children) {
-            return;
+    const theme = useTheme();
+    function handleLocationChange(oldLocation, newLocation, feature, isMin) {
+        if (!feature.children) {
+            throw new Error('Transcript should have child features');
         }
-        // Let's check CDS start and end values. And possibly update those too
-        for (const child of subFeature.children) {
-            if ((child[1].type === 'CDS' || child[1].type === 'exon') &&
-                child[1].min === oldStart) {
+        for (const [, child] of feature.children) {
+            if (isMin && oldLocation - 1 === child.min) {
                 const change = new LocationStartChange({
                     typeName: 'LocationStartChange',
-                    changedIds: [child[1]._id],
-                    featureId,
-                    oldStart,
-                    newStart,
+                    changedIds: [child._id],
+                    featureId: feature._id,
+                    oldStart: oldLocation - 1,
+                    newStart: newLocation - 1,
                     assembly,
                 });
                 changeManager.submit(change).catch(() => {
                     notify('Error updating feature start position', 'error');
                 });
+                return;
             }
-        }
-        return;
-    }
-    function handleEndChange(newEnd, featureId, oldEnd) {
-        const subFeature = getFeatureFromId(feature, featureId);
-        if (newEnd > feature.max) {
-            notify('Feature start cannot be greater than parent end', 'error');
-            return;
-        }
-        if (!subFeature?.children) {
-            return;
-        }
-        // Let's check CDS start and end values. And possibly update those too
-        for (const child of subFeature.children) {
-            if ((child[1].type === 'CDS' || child[1].type === 'exon') &&
-                child[1].max === oldEnd) {
+            if (!isMin && newLocation === child.max) {
                 const change = new LocationEndChange({
                     typeName: 'LocationEndChange',
-                    changedIds: [child[1]._id],
-                    featureId,
-                    oldEnd,
-                    newEnd,
+                    changedIds: [child._id],
+                    featureId: feature._id,
+                    oldEnd: child.max,
+                    newEnd: newLocation,
                     assembly,
                 });
                 changeManager.submit(change).catch(() => {
-                    notify('Error updating feature end position', 'error');
+                    notify('Error updating feature start position', 'error');
                 });
+                return;
             }
         }
-        return;
     }
-    const featureNew = feature;
-    let exonsArray = [];
-    const traverse = (currentFeature) => {
-        if (currentFeature.type === 'exon') {
-            exonsArray.push({
-                min: currentFeature.min + 1,
-                max: currentFeature.max,
-            });
-        }
-        if (currentFeature.children) {
-            for (const child of currentFeature.children) {
-                traverse(child[1]);
-            }
-        }
-    };
-    traverse(featureNew);
-    const CDSresult = [];
-    const CDSData = featureNew.cdsLocations;
-    if (refData) {
-        for (const CDSDatum of CDSData) {
-            for (const dataPoint of CDSDatum) {
-                let startSeq = refData.getSequence(Number(dataPoint.min) - 2, Number(dataPoint.min));
-                let endSeq = refData.getSequence(Number(dataPoint.max), Number(dataPoint.max) + 2);
-                if (featureNew.strand === -1 && startSeq && endSeq) {
-                    startSeq = revcom(startSeq);
-                    endSeq = revcom(endSeq);
-                }
-                const oneCDS = {
-                    id: featureNew._id,
-                    type: 'CDS',
-                    strand: Number(featureNew.strand),
-                    min: dataPoint.min + 1,
-                    max: dataPoint.max,
-                    oldMin: dataPoint.min + 1,
-                    oldMax: dataPoint.max,
-                    startSeq,
-                    endSeq,
-                };
-                // CDSresult.push(oneCDS)
-                // Check if there is already an object with the same start and end
-                const exists = CDSresult.some((obj) => obj.min === oneCDS.min &&
-                    obj.max === oneCDS.max &&
-                    obj.type === oneCDS.type);
-                // If no such object exists, add the new object to the array
-                if (!exists) {
-                    CDSresult.push(oneCDS);
-                }
-                // Add possible UTRs
-                const foundExon = findExonInRange(exonsArray, dataPoint.min + 1, dataPoint.max);
-                if (foundExon && Number(foundExon.min) < dataPoint.min) {
-                    if (feature.strand === 1) {
-                        const oneCDS = {
-                            id: feature._id,
-                            type: 'five_prime_UTR',
-                            strand: Number(feature.strand),
-                            min: foundExon.min,
-                            max: dataPoint.min,
-                            oldMin: foundExon.min,
-                            oldMax: dataPoint.min,
-                            startSeq: '',
-                            endSeq: '',
-                        };
-                        CDSresult.push(oneCDS);
-                    }
-                    else {
-                        const oneCDS = {
-                            id: feature._id,
-                            type: 'three_prime_UTR',
-                            strand: Number(feature.strand),
-                            min: dataPoint.min + 1,
-                            max: foundExon.min + 1,
-                            oldMin: dataPoint.min + 1,
-                            oldMax: foundExon.min + 1,
-                            startSeq: '',
-                            endSeq: '',
-                        };
-                        CDSresult.push(oneCDS);
-                    }
-                    exonsArray = removeMatchingExon(exonsArray, foundExon.min, foundExon.max);
-                }
-                if (foundExon && Number(foundExon.max) > dataPoint.max) {
-                    if (feature.strand === 1) {
-                        const oneCDS = {
-                            id: feature._id,
-                            type: 'three_prime_UTR',
-                            strand: Number(feature.strand),
-                            min: dataPoint.max + 1,
-                            max: foundExon.max,
-                            oldMin: dataPoint.max + 1,
-                            oldMax: foundExon.max,
-                            startSeq: '',
-                            endSeq: '',
-                        };
-                        CDSresult.push(oneCDS);
-                    }
-                    else {
-                        const oneCDS = {
-                            id: feature._id,
-                            type: 'five_prime_UTR',
-                            strand: Number(feature.strand),
-                            min: dataPoint.min + 1,
-                            max: foundExon.max,
-                            oldMin: dataPoint.min + 1,
-                            oldMax: foundExon.max,
-                            startSeq: '',
-                            endSeq: '',
-                        };
-                        CDSresult.push(oneCDS);
-                    }
-                    exonsArray = removeMatchingExon(exonsArray, foundExon.min, foundExon.max);
-                }
-                if (dataPoint.min + 1 === foundExon?.min &&
-                    dataPoint.max === foundExon.max) {
-                    exonsArray = removeMatchingExon(exonsArray, foundExon.min, foundExon.max);
-                }
-            }
-        }
-    }
-    // Add remaining UTRs if any
-    if (exonsArray.length > 0) {
-        // eslint-disable-next-line unicorn/no-array-for-each
-        exonsArray.forEach((element) => {
-            if (featureNew.strand === 1) {
-                const oneCDS = {
-                    id: featureNew._id,
-                    type: 'five_prime_UTR',
-                    strand: Number(featureNew.strand),
-                    min: element.min + 1,
-                    max: element.max,
-                    oldMin: element.min + 1,
-                    oldMax: element.max,
-                    startSeq: '',
-                    endSeq: '',
-                };
-                CDSresult.push(oneCDS);
-            }
-            else {
-                const oneCDS = {
-                    id: featureNew._id,
-                    type: 'three_prime_UTR',
-                    strand: Number(featureNew.strand),
-                    min: element.min + 1,
-                    max: element.max + 1,
-                    oldMin: element.min + 1,
-                    oldMax: element.max + 1,
-                    startSeq: '',
-                    endSeq: '',
-                };
-                CDSresult.push(oneCDS);
-            }
-            exonsArray = removeMatchingExon(exonsArray, element.min, element.max);
-        });
+    if (!refData) {
+        return null;
     }
-    CDSresult.sort((a, b) => {
-        // Primary sorting by 'start' property
-        const startDifference = Number(a.min) - Number(b.min);
-        if (startDifference !== 0) {
-            return startDifference;
-        }
-        return Number(a.max) - Number(b.max);
-    });
-    if (CDSresult.length > 0) {
-        CDSresult[0].startSeq = '';
-        // eslint-disable-next-line unicorn/prefer-at
-        CDSresult[CDSresult.length - 1].endSeq = '';
-        // Loop through the array and clear "startSeq" or "endSeq" based on the conditions
-        for (let i = 0; i < CDSresult.length; i++) {
-            if (i > 0 && CDSresult[i].min === CDSresult[i - 1].max) {
-                // Clear "startSeq" if the current item's "start" is equal to the previous item's "end"
-                CDSresult[i].startSeq = '';
+    const { strand, transcriptParts } = feature;
+    const [firstLocation] = transcriptParts;
+    const locationData = firstLocation
+        .map((loc, idx) => {
+        const { max, min, type } = loc;
+        let label = type;
+        if (label === 'threePrimeUTR') {
+            label = '3` UTR';
+        }
+        else if (label === 'fivePrimeUTR') {
+            label = '5` UTR';
+        }
+        let fivePrimeSpliceSite;
+        let threePrimeSpliceSite;
+        let frameColor;
+        if (type === 'CDS') {
+            const { phase } = loc;
+            const frame = getFrame(min, max, strand ?? 1, phase);
+            frameColor = theme.palette.framesCDS.at(frame)?.main;
+            const previousLoc = firstLocation.at(idx - 1);
+            const nextLoc = firstLocation.at(idx + 1);
+            if (strand === 1) {
+                if (previousLoc?.type === 'intron') {
+                    fivePrimeSpliceSite = refData.getSequence(min - 2, min);
+                }
+                if (nextLoc?.type === 'intron') {
+                    threePrimeSpliceSite = refData.getSequence(max, max + 2);
+                }
             }
-            if (i < CDSresult.length - 1 &&
-                CDSresult[i].max === CDSresult[i + 1].min) {
-                // Clear "endSeq" if the next item's "start" is equal to the current item's "end"
-                CDSresult[i].endSeq = '';
+            else {
+                if (previousLoc?.type === 'intron') {
+                    fivePrimeSpliceSite = revcom(refData.getSequence(max, max + 2));
+                }
+                if (nextLoc?.type === 'intron') {
+                    threePrimeSpliceSite = revcom(refData.getSequence(min - 2, min));
+                }
             }
         }
-    }
-    const transcriptItems = CDSresult;
+        return {
+            min,
+            max,
+            label,
+            fivePrimeSpliceSite,
+            threePrimeSpliceSite,
+            frameColor,
+        };
+    })
+        .filter((loc) => loc.label !== 'intron');
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { variant: "h5", style: { marginLeft: '15px', marginBottom: '0' } }, "CDS and UTRs"),
-        React__default.createElement("div", null, transcriptItems.map((item, index) => (React__default.createElement("div", { key: index, style: { display: 'flex', alignItems: 'center' } },
-            React__default.createElement("span", { style: { marginLeft: '20px', width: '50px' } }, item.type === 'three_prime_UTR'
-                ? '3 UTR'
-                : // eslint-disable-next-line unicorn/no-nested-ternary
-                    item.type === 'five_prime_UTR'
-                        ? '5 UTR'
-                        : 'CDS'),
-            React__default.createElement("span", { style: { fontWeight: 'bold', width: '30px' } }, item.startSeq),
-            React__default.createElement(NumberTextField, { margin: "dense", id: item.id, disabled: item.type !== 'CDS', style: {
-                    width: '150px',
-                    marginLeft: '8px',
-                    backgroundColor: item.startSeq.trim() === '' && index !== 0
-                        ? 'lightblue'
-                        : 'inherit',
-                }, variant: "outlined", value: item.min, onChangeCommitted: (newStart) => {
-                    handleStartChange(newStart, item.id, Number(item.oldMin));
-                } }),
-            React__default.createElement("span", { style: { margin: '0 10px' } }, item.strand === -1 ? '-' : item.strand === 1 ? '+' : ''),
-            React__default.createElement(NumberTextField, { margin: "dense", id: item.id, disabled: item.type !== 'CDS', style: {
-                    width: '150px',
-                    backgroundColor: item.endSeq.trim() === '' &&
-                        index + 1 !== transcriptItems.length
-                        ? 'lightblue'
-                        : 'inherit',
-                }, variant: "outlined", value: item.max, onChangeCommitted: (newEnd) => {
-                    handleEndChange(newEnd, item.id, Number(item.oldMax));
-                } }),
-            React__default.createElement("span", { style: { marginLeft: '8px', fontWeight: 'bold' } }, item.endSeq)))))));
+        React__default.createElement(Typography, { variant: "h5" }, "Structure"),
+        React__default.createElement(Typography, { variant: "h6" },
+            strand === 1 ? 'Forward' : 'Reverse',
+            " strand"),
+        React__default.createElement(TableContainer, { component: Paper },
+            React__default.createElement(Table, { size: "small" },
+                React__default.createElement(TableBody, null, locationData.map((loc) => (React__default.createElement(TableRow, { key: `${loc.label}:${loc.min}-${loc.max}` },
+                    React__default.createElement(TableCell, { component: "th", scope: "row", style: { background: loc.frameColor } }, loc.label),
+                    React__default.createElement(TableCell, null, loc.fivePrimeSpliceSite ?? ''),
+                    React__default.createElement(TableCell, { padding: "none" },
+                        React__default.createElement(NumberTextField, { margin: "dense", variant: "outlined", value: strand === 1 ? loc.min + 1 : loc.max, onChangeCommitted: (newLocation) => {
+                                handleLocationChange(strand === 1 ? loc.min + 1 : loc.max, newLocation, feature, strand === 1);
+                            } })),
+                    React__default.createElement(TableCell, { padding: "none" },
+                        React__default.createElement(NumberTextField, { margin: "dense", 
+                            // disabled={item.type !== 'CDS'}
+                            variant: "outlined", value: strand === 1 ? loc.max : loc.min + 1, onChangeCommitted: (newLocation) => {
+                                handleLocationChange(strand === 1 ? loc.max : loc.min + 1, newLocation, feature, strand !== 1);
+                            } })),
+                    React__default.createElement(TableCell, null, loc.threePrimeSpliceSite ?? '')))))))));
 });
 
-const getCDSInfo = (feature, refData) => {
-    const CDSresult = [];
-    const traverse = (currentFeature, isParentMRNA) => {
-        if (isParentMRNA &&
-            (currentFeature.type === 'CDS' ||
-                currentFeature.type === 'three_prime_UTR' ||
-                currentFeature.type === 'five_prime_UTR')) {
-            let startSeq = refData.getSequence(Number(currentFeature.min) - 2, Number(currentFeature.min));
-            let endSeq = refData.getSequence(Number(currentFeature.max), Number(currentFeature.max) + 2);
-            if (currentFeature.strand === -1 && startSeq && endSeq) {
-                startSeq = revcom(startSeq);
-                endSeq = revcom(endSeq);
-            }
-            const oneCDS = {
-                id: currentFeature._id,
-                type: currentFeature.type,
-                strand: Number(currentFeature.strand),
-                min: currentFeature.min + 1,
-                max: currentFeature.max + 1,
-                oldMin: currentFeature.min + 1,
-                oldMax: currentFeature.max + 1,
-                startSeq: startSeq || '',
-                endSeq: endSeq || '',
-            };
-            CDSresult.push(oneCDS);
-        }
-        if (currentFeature.children) {
-            for (const child of currentFeature.children) {
-                traverse(child[1], feature.type === 'mRNA');
+const SEQUENCE_WRAP_LENGTH = 60;
+function getSequenceSegments(segmentType, feature, getSequence) {
+    const segments = [];
+    const { cdsLocations, strand, transcriptParts } = feature;
+    switch (segmentType) {
+        case 'genomic':
+        case 'cDNA': {
+            const [firstLocation] = transcriptParts;
+            for (const loc of firstLocation) {
+                if (segmentType === 'cDNA' && loc.type === 'intron') {
+                    continue;
+                }
+                let sequence = getSequence(loc.min, loc.max);
+                if (strand === -1) {
+                    sequence = revcom(sequence);
+                }
+                const type = loc.type === 'fivePrimeUTR' || loc.type === 'threePrimeUTR'
+                    ? 'UTR'
+                    : loc.type;
+                const previousSegment = segments.at(-1);
+                if (!previousSegment) {
+                    const sequenceLines = splitStringIntoChunks(sequence, SEQUENCE_WRAP_LENGTH);
+                    segments.push({
+                        type,
+                        sequenceLines,
+                        locs: [{ min: loc.min, max: loc.max }],
+                    });
+                    continue;
+                }
+                if (previousSegment.type === type) {
+                    const [previousSegmentFirstLine, ...previousSegmentFollowingLines] = previousSegment.sequenceLines;
+                    const newSequence = previousSegmentFollowingLines.join('') + sequence;
+                    previousSegment.sequenceLines = [
+                        previousSegmentFirstLine,
+                        ...splitStringIntoChunks(newSequence, SEQUENCE_WRAP_LENGTH),
+                    ];
+                    previousSegment.locs.push({ min: loc.min, max: loc.max });
+                }
+                else {
+                    const count = segments.reduce((accumulator, currentSegment) => accumulator +
+                        currentSegment.sequenceLines.reduce((subAccumulator, currentLine) => subAccumulator + currentLine.length, 0), 0);
+                    const previousLineLength = count % SEQUENCE_WRAP_LENGTH;
+                    const newSegmentFirstLineLength = SEQUENCE_WRAP_LENGTH - previousLineLength;
+                    const newSegmentFirstLine = sequence.slice(0, newSegmentFirstLineLength);
+                    const newSegmentRemainderLines = splitStringIntoChunks(sequence.slice(newSegmentFirstLineLength), SEQUENCE_WRAP_LENGTH);
+                    segments.push({
+                        type,
+                        sequenceLines: [newSegmentFirstLine, ...newSegmentRemainderLines],
+                        locs: [{ min: loc.min, max: loc.max }],
+                    });
+                }
             }
+            return segments;
         }
-    };
-    traverse(feature, feature.type === 'mRNA');
-    CDSresult.sort((a, b) => {
-        return Number(a.min) - Number(b.min);
-    });
-    if (CDSresult.length > 0) {
-        CDSresult[0].startSeq = '';
-        // eslint-disable-next-line unicorn/prefer-at
-        CDSresult[CDSresult.length - 1].endSeq = '';
-        // Loop through the array and clear "startSeq" or "endSeq" based on the conditions
-        for (let i = 0; i < CDSresult.length; i++) {
-            if (i > 0 && CDSresult[i].min === CDSresult[i - 1].max) {
-                // Clear "startSeq" if the current item's "start" is equal to the previous item's "end"
-                CDSresult[i].startSeq = '';
-            }
-            if (i < CDSresult.length - 1 &&
-                CDSresult[i].max === CDSresult[i + 1].min) {
-                // Clear "endSeq" if the next item's "start" is equal to the current item's "end"
-                CDSresult[i].endSeq = '';
+        case 'CDS': {
+            let wholeSequence = '';
+            const [firstLocation] = cdsLocations;
+            const locs = [];
+            for (const loc of firstLocation) {
+                let sequence = getSequence(loc.min, loc.max);
+                if (strand === -1) {
+                    sequence = revcom(sequence);
+                }
+                wholeSequence += sequence;
+                locs.push({ min: loc.min, max: loc.max });
             }
+            const sequenceLines = splitStringIntoChunks(wholeSequence, SEQUENCE_WRAP_LENGTH);
+            segments.push({ type: 'CDS', sequenceLines, locs });
+            return segments;
+        }
+    }
+}
+function getSegmentColor(type) {
+    switch (type) {
+        case 'upOrDownstream': {
+            return 'rgb(255,255,255)';
+        }
+        case 'UTR': {
+            return 'rgb(194,106,119)';
+        }
+        case 'CDS': {
+            return 'rgb(93,168,153)';
+        }
+        case 'intron': {
+            return 'rgb(187,187,187)';
+        }
+        case 'protein': {
+            return 'rgb(148,203,236)';
         }
     }
-    return CDSresult;
-};
-function formatSequence(seq, refName, start, end, wrap) {
-    const header = `>${refName}:${start + 1}–${end}\n`;
-    const body = wrap === undefined ? seq : splitStringIntoChunks(seq, wrap).join('\n');
-    return `${header}${body}`;
 }
-const utrColor = 'rgb(20,200,200)'; // Slightly brighter cyan
-const cdsColor = 'rgb(240,200,20)'; // Slightly brighter yellow
-let textSegments = [{ text: '', color: '' }];
 const TranscriptSequence = observer(function TranscriptSequence({ assembly, feature, refName, session, }) {
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
     const refData = currentAssembly?.getByRefName(refName);
     const [showSequence, setShowSequence] = useState(false);
-    const [selectedOption, setSelectedOption] = useState('Select');
+    const [selectedOption, setSelectedOption] = useState('CDS');
+    const theme = useTheme();
+    const seqRef = useRef(null);
     if (!(currentAssembly && refData)) {
         return null;
     }
@@ -5802,150 +5648,85 @@ const TranscriptSequence = observer(function TranscriptSequence({ assembly, feat
     if (!refSeq) {
         return null;
     }
-    const transcriptItems = getCDSInfo(feature, refData);
-    const { max, min } = feature;
-    let sequence = '';
-    if (showSequence) {
-        getSequenceAsString(min, max);
-    }
-    function getSequenceAsString(start, end) {
-        sequence = refSeq?.getSequence(start, end) ?? '';
-        if (sequence === '') {
-            void session.apolloDataStore.loadRefSeq([
-                { assemblyName: assembly, refName, start, end },
-            ]);
-        }
-        else {
-            sequence = formatSequence(sequence, refName, start, end);
-        }
-        getSequenceAsTextSegment(selectedOption); // For color coded sequence
-        return sequence;
+    if (feature.type !== 'mRNA') {
+        return null;
     }
     const handleSeqButtonClick = () => {
         setShowSequence(!showSequence);
     };
-    function getSequenceAsTextSegment(option) {
-        let seqData = '';
-        textSegments = [];
-        if (!refData) {
-            return;
-        }
-        switch (option) {
-            case 'CDS': {
-                textSegments.push({ text: `>${refName} : CDS\n`, color: 'black' });
-                for (const item of transcriptItems) {
-                    if (item.type === 'CDS') {
-                        const refSeq = refData.getSequence(Number(item.min + 1), Number(item.max));
-                        seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq;
-                        textSegments.push({ text: seqData, color: cdsColor });
-                    }
-                }
-                break;
-            }
-            case 'cDNA': {
-                textSegments.push({ text: `>${refName} : cDNA\n`, color: 'black' });
-                for (const item of transcriptItems) {
-                    if (item.type === 'CDS' ||
-                        item.type === 'three_prime_UTR' ||
-                        item.type === 'five_prime_UTR') {
-                        const refSeq = refData.getSequence(Number(item.min + 1), Number(item.max));
-                        seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq;
-                        if (item.type === 'CDS') {
-                            textSegments.push({ text: seqData, color: cdsColor });
-                        }
-                        else {
-                            textSegments.push({ text: seqData, color: utrColor });
-                        }
-                    }
-                }
-                break;
-            }
-            case 'Full': {
-                textSegments.push({
-                    text: `>${refName} : Full genomic\n`,
-                    color: 'black',
-                });
-                let lastEnd = 0;
-                let count = 0;
-                for (const item of transcriptItems) {
-                    count++;
-                    if (lastEnd != 0 &&
-                        lastEnd != Number(item.min) &&
-                        count != transcriptItems.length) {
-                        // Intron etc. between CDS/UTRs. No need to check this on very last item
-                        const refSeq = refData.getSequence(lastEnd + 1, Number(item.min) - 1);
-                        seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq;
-                        textSegments.push({ text: seqData, color: 'black' });
-                    }
-                    if (item.type === 'CDS' ||
-                        item.type === 'three_prime_UTR' ||
-                        item.type === 'five_prime_UTR') {
-                        const refSeq = refData.getSequence(Number(item.min + 1), Number(item.max));
-                        seqData += item.strand === -1 && refSeq ? revcom(refSeq) : refSeq;
-                        switch (item.type) {
-                            case 'CDS': {
-                                textSegments.push({ text: seqData, color: cdsColor });
-                                break;
-                            }
-                            case 'three_prime_UTR': {
-                                textSegments.push({ text: seqData, color: utrColor });
-                                break;
-                            }
-                            case 'five_prime_UTR': {
-                                textSegments.push({ text: seqData, color: utrColor });
-                                break;
-                            }
-                            default: {
-                                textSegments.push({ text: seqData, color: 'black' });
-                                break;
-                            }
-                        }
-                    }
-                    lastEnd = Number(item.max);
-                }
-                break;
-            }
-        }
-    }
     function handleChangeSeqOption(e) {
         const option = e.target.value;
         setSelectedOption(option);
-        getSequenceAsTextSegment(option);
     }
     // Function to copy text to clipboard
     const copyToClipboard = () => {
-        const textToCopy = textSegments.map((segment) => segment.text).join('');
-        if (textToCopy) {
-            navigator.clipboard
-                .writeText(textToCopy)
-                .then(() => {
-                // console.log('Text copied to clipboard!')
-            })
-                .catch((error) => {
-                console.error('Failed to copy text to clipboard', error);
-            });
+        const seqDiv = seqRef.current;
+        if (!seqDiv) {
+            return;
         }
+        const textBlob = new Blob([seqDiv.outerText], { type: 'text/plain' });
+        const htmlBlob = new Blob([seqDiv.outerHTML], { type: 'text/html' });
+        const clipboardItem = new ClipboardItem({
+            [textBlob.type]: textBlob,
+            [htmlBlob.type]: htmlBlob,
+        });
+        void navigator.clipboard.write([clipboardItem]);
     };
-    const ColoredText = ({ textSegments }) => {
-        return (React__default.createElement("div", null, textSegments.map((segment, index) => (React__default.createElement("span", { key: index, style: { color: segment.color } }, splitStringIntoChunks(segment.text, 150).join('\n'))))));
-    };
+    const sequenceSegments = showSequence
+        ? getSequenceSegments(selectedOption, feature, (min, max) => refData.getSequence(min, max))
+        : [];
+    const locationIntervals = [];
+    if (showSequence) {
+        const allLocs = sequenceSegments.flatMap((segment) => segment.locs);
+        let [previous] = allLocs;
+        for (let i = 1; i < allLocs.length; i++) {
+            if (previous.min === allLocs[i].max || previous.max === allLocs[i].min) {
+                previous = {
+                    min: Math.min(previous.min, allLocs[i].min),
+                    max: Math.max(previous.max, allLocs[i].max),
+                };
+            }
+            else {
+                locationIntervals.push(previous);
+                previous = allLocs[i];
+            }
+        }
+        locationIntervals.push(previous);
+    }
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { style: { display: 'inline', marginLeft: '15px' }, variant: "h5" }, "Sequence"),
+        React__default.createElement(Typography, { variant: "h5" }, "Sequence"),
         React__default.createElement("div", null,
-            React__default.createElement(Button, { variant: "contained", style: { marginLeft: '15px' }, onClick: handleSeqButtonClick }, showSequence ? 'Hide sequence' : 'Show sequence')),
-        React__default.createElement("div", null, showSequence && (React__default.createElement(Select, { value: selectedOption, onChange: handleChangeSeqOption, style: { width: '150px', marginLeft: '15px', height: '25px' } },
-            React__default.createElement(MenuItem, { value: 'Select' }, "Select"),
-            React__default.createElement(MenuItem, { value: 'CDS' }, "CDS"),
-            React__default.createElement(MenuItem, { value: 'cDNA' }, "cDNA"),
-            React__default.createElement(MenuItem, { value: 'Full' }, "Full genomics")))),
-        React__default.createElement("div", { style: {
-                width: '500px',
-                marginLeft: '15px',
-                height: '300px',
-                overflowY: 'auto',
-                border: '1px solid #ccc',
-            } }, showSequence && React__default.createElement(ColoredText, { textSegments: textSegments })),
-        showSequence && (React__default.createElement(Button, { variant: "contained", style: { marginLeft: '15px' }, onClick: copyToClipboard }, "Copy sequence"))));
+            React__default.createElement(Button, { variant: "contained", onClick: handleSeqButtonClick }, showSequence ? 'Hide sequence' : 'Show sequence')),
+        showSequence && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Select, { defaultValue: "CDS", value: selectedOption, onChange: handleChangeSeqOption },
+                React__default.createElement(MenuItem, { value: "CDS" }, "CDS"),
+                React__default.createElement(MenuItem, { value: "cDNA" }, "cDNA"),
+                React__default.createElement(MenuItem, { value: "genomic" }, "Genomic")),
+            React__default.createElement(Paper, { style: {
+                    fontFamily: 'monospace',
+                    padding: theme.spacing(),
+                    overflowX: 'auto',
+                }, ref: seqRef },
+                ">",
+                refSeq.name,
+                ":",
+                locationIntervals
+                    .map((interval) => feature.strand === 1
+                    ? `${interval.min + 1}-${interval.max}`
+                    : `${interval.max}-${interval.min + 1}`)
+                    .join(';'),
+                "(",
+                feature.strand === 1 ? '+' : '-',
+                ")",
+                React__default.createElement("br", null),
+                sequenceSegments.map((segment, index) => (React__default.createElement("span", { key: `${segment.type}-${index}`, style: {
+                        background: getSegmentColor(segment.type),
+                        color: theme.palette.getContrastText(getSegmentColor(segment.type)),
+                    } }, segment.sequenceLines.map((sequenceLine, idx) => (React__default.createElement(React__default.Fragment, { key: `${sequenceLine.slice(0, 5)}-${idx}` },
+                    sequenceLine,
+                    idx === segment.sequenceLines.length - 1 &&
+                        sequenceLine.length !== SEQUENCE_WRAP_LENGTH ? null : (React__default.createElement("br", null))))))))),
+            React__default.createElement(Button, { variant: "contained", onClick: copyToClipboard }, "Copy sequence")))));
 });
 
 const useStyles$7 = makeStyles()((theme) => ({
@@ -6176,7 +5957,7 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
     return menuItems;
 }
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+/* eslint-disable @typescript-eslint/unbound-method */
 const useStyles$5 = makeStyles()((theme) => ({
     inputWrapper: {
         position: 'relative',
@@ -6405,7 +6186,9 @@ function baseModelFactory(_pluginManager, configSchema) {
                     return;
                 }
                 void self.session.apolloDataStore.loadFeatures(self.regions);
-                void self.session.apolloDataStore.loadRefSeq(self.regions);
+                if (self.lgv.bpPerPx <= 3) {
+                    void self.session.apolloDataStore.loadRefSeq(self.regions);
+                }
             }, { name: 'LinearApolloDisplayLoadFeatures', delay: 1000 }));
         },
     }));
@@ -7290,7 +7073,7 @@ function drawTooltip$2(display, context) {
     if (!position) {
         return;
     }
-    const { layoutIndex, layoutRow } = position;
+    const { featureRow, layoutIndex, layoutRow } = position;
     const { bpPerPx, displayedRegions, offsetPx } = lgv;
     const displayedRegion = displayedRegions[layoutIndex];
     const { refName, reversed } = displayedRegion;
@@ -7302,7 +7085,7 @@ function drawTooltip$2(display, context) {
         coord: reversed ? max : min,
         regionNumber: layoutIndex,
     })?.offsetPx ?? 0) - offsetPx;
-    const top = layoutRow * apolloRowHeight;
+    const top = (layoutRow + featureRow) * apolloRowHeight;
     const widthPx = length / bpPerPx;
     const featureType = `Type: ${feature.type}`;
     const { attributes } = feature;
@@ -7448,6 +7231,20 @@ function getContextMenuItems$2(display) {
             session.showWidget(apolloFeatureWidget);
         },
     });
+    if (sourceFeature.type === 'mRNA' && isSessionModelWithWidgets(session)) {
+        menuItems.push({
+            label: 'Edit transcript details',
+            onClick: () => {
+                const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
+                    feature: sourceFeature,
+                    assembly: currentAssemblyId,
+                    changeManager,
+                    refName: region.refName,
+                });
+                session.showWidget(apolloTranscriptWidget);
+            },
+        });
+    }
     return menuItems;
 }
 function getFeatureFromLayout$2(feature, _bp, _row) {
@@ -7532,35 +7329,49 @@ const boxGlyph = {
     onMouseUp: onMouseUp$2,
 };
 
-let forwardFill = null;
-let backwardFill = null;
-if ('document' in window) {
+let forwardFillLight = null;
+let backwardFillLight = null;
+let forwardFillDark = null;
+let backwardFillDark = null;
+if ('document' in globalThis) {
     for (const direction of ['forward', 'backward']) {
-        const canvas = document.createElement('canvas');
-        const canvasSize = 10;
-        canvas.width = canvas.height = canvasSize;
-        const ctx = canvas.getContext('2d');
-        if (ctx) {
-            const stripeColor1 = 'rgba(0,0,0,0)';
-            const stripeColor2 = 'rgba(255,255,255,0.25)';
-            const gradient = direction === 'forward'
-                ? ctx.createLinearGradient(0, canvasSize, canvasSize, 0)
-                : ctx.createLinearGradient(0, 0, canvasSize, canvasSize);
-            gradient.addColorStop(0, stripeColor1);
-            gradient.addColorStop(0.25, stripeColor1);
-            gradient.addColorStop(0.25, stripeColor2);
-            gradient.addColorStop(0.5, stripeColor2);
-            gradient.addColorStop(0.5, stripeColor1);
-            gradient.addColorStop(0.75, stripeColor1);
-            gradient.addColorStop(0.75, stripeColor2);
-            gradient.addColorStop(1, stripeColor2);
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, 10, 10);
-            if (direction === 'forward') {
-                forwardFill = ctx.createPattern(canvas, 'repeat');
-            }
-            else {
-                backwardFill = ctx.createPattern(canvas, 'repeat');
+        for (const themeMode of ['light', 'dark']) {
+            const canvas = document.createElement('canvas');
+            const canvasSize = 10;
+            canvas.width = canvas.height = canvasSize;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const stripeColor1 = themeMode === 'light' ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,0.75)';
+                const stripeColor2 = themeMode === 'light' ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.50)';
+                const gradient = direction === 'forward'
+                    ? ctx.createLinearGradient(0, canvasSize, canvasSize, 0)
+                    : ctx.createLinearGradient(0, 0, canvasSize, canvasSize);
+                gradient.addColorStop(0, stripeColor1);
+                gradient.addColorStop(0.25, stripeColor1);
+                gradient.addColorStop(0.25, stripeColor2);
+                gradient.addColorStop(0.5, stripeColor2);
+                gradient.addColorStop(0.5, stripeColor1);
+                gradient.addColorStop(0.75, stripeColor1);
+                gradient.addColorStop(0.75, stripeColor2);
+                gradient.addColorStop(1, stripeColor2);
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, 10, 10);
+                if (direction === 'forward') {
+                    if (themeMode === 'light') {
+                        forwardFillLight = ctx.createPattern(canvas, 'repeat');
+                    }
+                    else {
+                        forwardFillDark = ctx.createPattern(canvas, 'repeat');
+                    }
+                }
+                else {
+                    if (themeMode === 'light') {
+                        backwardFillLight = ctx.createPattern(canvas, 'repeat');
+                    }
+                    else {
+                        backwardFillDark = ctx.createPattern(canvas, 'repeat');
+                    }
+                }
             }
         }
     }
@@ -7573,12 +7384,25 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
     const rowHeight = apolloRowHeight;
     const exonHeight = Math.round(0.6 * rowHeight);
     const cdsHeight = Math.round(0.9 * rowHeight);
-    const { strand } = feature;
-    const { children } = feature;
+    const { children, min, strand } = feature;
     if (!children) {
         return;
     }
     const { apolloSelectedFeature } = session;
+    // Draw background for gene
+    const topLevelFeatureMinX = (lgv.bpToPx({
+        refName,
+        coord: min,
+        regionNumber: displayedRegionIndex,
+    })?.offsetPx ?? 0) - offsetPx;
+    const topLevelFeatureWidthPx = feature.length / bpPerPx;
+    const topLevelFeatureStartPx = reversed
+        ? topLevelFeatureMinX - topLevelFeatureWidthPx
+        : topLevelFeatureMinX;
+    const topLevelFeatureTop = row * rowHeight;
+    const topLevelFeatureHeight = getRowCount$1(feature) * rowHeight;
+    ctx.fillStyle = alpha(theme?.palette.background.paper ?? '#ffffff', 0.6);
+    ctx.fillRect(topLevelFeatureStartPx, topLevelFeatureTop, topLevelFeatureWidthPx, topLevelFeatureHeight);
     // Draw lines on different rows for each mRNA
     let currentRow = 0;
     for (const [, mrna] of children) {
@@ -7610,6 +7434,8 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
             currentRow += 1;
         }
     }
+    const forwardFill = theme?.palette.mode === 'dark' ? forwardFillDark : forwardFillLight;
+    const backwardFill = theme?.palette.mode === 'dark' ? backwardFillDark : backwardFillLight;
     // Draw exon and CDS for each mRNA
     currentRow = 0;
     for (const [, child] of children) {
@@ -7746,11 +7572,31 @@ function drawHover$1(stateModel, ctx) {
     ctx.fillRect(startPx, top, widthPx, apolloRowHeight * getRowCount$1(feature));
 }
 function getFeatureFromLayout$1(feature, bp, row) {
-    const featureInThisRow = featuresForRow$1(feature)[row];
+    const featureInThisRow = featuresForRow$1(feature)[row] || [];
     for (const f of featureInThisRow) {
+        let featureObj;
         if (bp >= f.min && bp <= f.max && f.parent) {
-            return f;
+            featureObj = f;
+        }
+        if (!featureObj) {
+            continue;
+        }
+        if (featureObj.type === 'CDS' &&
+            featureObj.parent &&
+            featureObj.parent.type === 'mRNA') {
+            const { cdsLocations } = featureObj.parent;
+            for (const cdsLoc of cdsLocations) {
+                for (const loc of cdsLoc) {
+                    if (bp >= loc.min && bp <= loc.max) {
+                        return featureObj;
+                    }
+                }
+            }
+            // If mouse position is in the intron region, return the mRNA
+            return featureObj.parent;
         }
+        // If mouse position is in a feature that is not a CDS, return the feature
+        return featureObj;
     }
     return feature;
 }
@@ -8213,6 +8059,7 @@ async function fetchValidTypeTerms(feature, ontologyStore, _signal) {
     return;
 }
 
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 const useStyles$3 = makeStyles()((theme) => ({
     scrollableTable: {
         width: '100%',
@@ -8385,7 +8232,7 @@ function stateModelFactory$1(pluginManager, configSchema) {
         .named('LinearApolloDisplay');
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 const useStyles$1 = makeStyles()((theme) => ({
     canvasContainer: {
         position: 'relative',
@@ -8552,6 +8399,11 @@ const useStyles = makeStyles()((theme) => ({
         // position: 'relative',
         userSelect: 'none',
     },
+    alertContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
 }));
 function scrollSelectedFeatureIntoView(model, scrollContainerRef) {
     const { apolloRowHeight, selectedFeature } = model;
@@ -8574,18 +8426,18 @@ const ResizeHandle = ({ onResize, }) => {
     const cancelDrag = useCallback((event) => {
         event.stopPropagation();
         event.preventDefault();
-        window.removeEventListener('mousemove', mouseMove);
-        window.removeEventListener('mouseup', cancelDrag);
-        window.removeEventListener('mouseleave', cancelDrag);
+        globalThis.removeEventListener('mousemove', mouseMove);
+        globalThis.removeEventListener('mouseup', cancelDrag);
+        globalThis.removeEventListener('mouseleave', cancelDrag);
     }, [mouseMove]);
     return (
     // TODO: a11y
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     React__default.createElement("div", { onMouseDown: (event) => {
             event.stopPropagation();
-            window.addEventListener('mousemove', mouseMove);
-            window.addEventListener('mouseup', cancelDrag);
-            window.addEventListener('mouseleave', cancelDrag);
+            globalThis.addEventListener('mousemove', mouseMove);
+            globalThis.addEventListener('mouseup', cancelDrag);
+            globalThis.addEventListener('mouseleave', cancelDrag);
         }, onClick: (e) => {
             e.stopPropagation();
             e.preventDefault();
@@ -8600,6 +8452,10 @@ const AccordionControl = observer(function AccordionControl({ onClick, onResize,
             title ? (React__default.createElement(Typography, { className: classes.title, variant: "caption", component: "span" }, title)) : null)));
 });
 const DisplayComponent = observer(function DisplayComponent({ model, ...other }) {
+    const session = getSession(model);
+    const { ontologyManager } = session.apolloDataStore;
+    const { featureTypeOntology } = ontologyManager;
+    const ontologyStore = featureTypeOntology?.dataStore;
     const { classes } = useStyles();
     const { detailsHeight, graphical, height: overallHeight, isShown, selectedFeature, table, tabularEditor, toggleShown, } = model;
     const canvasScrollContainerRef = useRef(null);
@@ -8609,6 +8465,10 @@ const DisplayComponent = observer(function DisplayComponent({ model, ...other })
     const onDetailsResize = (delta) => {
         model.setDetailsHeight(detailsHeight - delta);
     };
+    if (!ontologyStore) {
+        return (React__default.createElement("div", { className: classes.alertContainer },
+            React__default.createElement(Alert, { severity: "error" }, "Could not load feature type ontology.")));
+    }
     if (graphical && table) {
         const tabularHeight = tabularEditor.isShown ? detailsHeight : 0;
         const featureAreaHeight = isShown
@@ -9178,7 +9038,7 @@ class DesktopFileDriver extends BackendDriver {
             throw new Error(`Assembly ${assemblyName} not found`);
         }
         const { file } = getConf(assembly, ['sequence', 'metadata']);
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         const fs = require('node:fs');
         const fileContents = await fs.promises.readFile(file, 'utf8');
         return loadAssemblyIntoClient(assemblyName, fileContents, this.clientStore);
@@ -9288,7 +9148,7 @@ class DesktopFileDriver extends BackendDriver {
             });
         }
         const gff3Contents = gff.formatSync(gff3Items);
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         const fs = require('node:fs');
         await fs.promises.writeFile(file, gff3Contents, 'utf8');
         const results = new ValidationResultSet();
@@ -9305,6 +9165,7 @@ function clientDataStoreFactory(AnnotationFeatureExtended) {
         typeName: types.optional(types.literal('Client'), 'Client'),
         assemblies: types.map(ApolloAssembly),
         checkResults: types.map(CheckResult),
+        ontologyManager: types.optional(OntologyManagerType, {}),
     })
         .views((self) => ({
         get internetAccounts() {
@@ -9378,7 +9239,6 @@ function clientDataStoreFactory(AnnotationFeatureExtended) {
         desktopFileDriver: isElectron
             ? new DesktopFileDriver(self)
             : undefined,
-        ontologyManager: OntologyManagerType.create(),
     }))
         .actions((self) => ({
         afterCreate() {
@@ -9831,6 +9691,7 @@ function extendSession(pluginManager, sessionModel) {
         postProcessor(snap) {
             snap.apolloSelectedFeature = undefined;
             const assemblies = Object.fromEntries(Object.entries(snap.apolloDataStore.assemblies).filter(([, assembly]) => assembly.backendDriverType === 'InMemoryFileDriver'));
+            // @ts-expect-error ontologyManager isn't actually required
             snap.apolloDataStore = {
                 typeName: 'Client',
                 assemblies,
@@ -10265,7 +10126,7 @@ class RefNameAliasAdapter extends BaseAdapter {
         this.refNameAliases = refNameAliases;
         return refNameAliases;
     }
-    async freeResources() {
+    freeResources() {
         // no resources to free
     }
 }