@apollo-annotation/jbrowse-plugin-apollo 1.0.1 → 1.1.1

package/dist/jbrowse-plugin-apollo.cjs.development.js

@@ -41,6 +41,7 @@ var xDataGrid = require('@mui/x-data-grid');
 var gff = require('@gmod/gff');
 var fileSaver = require('file-saver');
 var AccountCircleIcon = require('@mui/icons-material/AccountCircle');
+var BusinessIcon = require('@mui/icons-material/Business');
 var AdapterType = require('@jbrowse/core/pluggableElementTypes/AdapterType');
 var BaseAdapter = require('@jbrowse/core/data_adapters/BaseAdapter');
 var nanoid = require('nanoid');
@@ -53,9 +54,9 @@ var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
 var AddBoxIcon = require('@mui/icons-material/AddBox');
 var mst$1 = require('@apollo-annotation/mst');
 var styled = require('@emotion/styled');
+var RemoveIcon = require('@mui/icons-material/Remove');
 var ContentCopyIcon = require('@mui/icons-material/ContentCopy');
 var ContentCutIcon = require('@mui/icons-material/ContentCut');
-var RemoveIcon = require('@mui/icons-material/Remove');
 var ClearIcon = require('@mui/icons-material/Clear');
 var UnfoldLessIcon = require('@mui/icons-material/UnfoldLess');
 var tracks = require('@jbrowse/core/util/tracks');
@@ -69,7 +70,7 @@ var RedoIcon = require('@mui/icons-material/Redo');
 var UndoIcon = require('@mui/icons-material/Undo');
 var SaveIcon = require('@mui/icons-material/Save');
 
-var version = "1.0.1";
+var version = "1.1.1";
 
 const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -1372,9 +1373,7 @@ async function getValidTerms(ontologyStore, fetchValidTerms, filterTerms, signal
             result = customTermList;
         }
     }
-    if (!result) {
-        result = await ontologyStore.getAllTerms();
-    }
+    result ??= await ontologyStore.getAllTerms();
     return filterTerms ? result.filter((element) => filterTerms(element)) : result;
 }
 
@@ -1555,7 +1554,7 @@ function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, so
                 setErrorMessage('No assemblies to copy to');
                 return;
             }
-            const assembly = await assemblyManager.waitForAssembly(selectedAssemblyId);
+            const assembly = (await assemblyManager.waitForAssembly(selectedAssemblyId));
             if (!assembly) {
                 return;
             }
@@ -1584,7 +1583,7 @@ function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, so
         event.preventDefault();
         setErrorMessage('');
         const featureLength = sourceFeature.length;
-        const assembly = await assemblyManager.waitForAssembly(selectedAssemblyId);
+        const assembly = (await assemblyManager.waitForAssembly(selectedAssemblyId));
         if (!assembly) {
             setErrorMessage(`Assembly not found: ${selectedAssemblyId}.`);
             return;
@@ -1922,8 +1921,7 @@ function DeleteFeature({ changeManager, handleClose, selectedFeature, session, s
                 locationChanges.push(geneChange);
             }
         }
-        if (featureTypeOntology &&
-            featureTypeOntology.isTypeOf(sourceFeature.type, 'exon')) {
+        if (featureTypeOntology?.isTypeOf(sourceFeature.type, 'exon')) {
             const cdsChange = trimCDS(sourceFeature);
             if (cdsChange) {
                 if (cdsChange.typeName === 'DeleteFeatureChange') {
@@ -2176,7 +2174,7 @@ function getOverlappingEdge(feature, x, minMax) {
     return;
 }
 function isSelectedFeature(feature, selectedFeature) {
-    return Boolean(selectedFeature && feature._id === selectedFeature._id);
+    return feature._id === selectedFeature?._id;
 }
 function makeFeatureLabel(feature) {
     let name;
@@ -2782,6 +2780,153 @@ function AddAssemblyAliases({ changeManager, handleClose, session, }) {
                         }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }) }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
+const START_CODON = 'ATG';
+const STOP_CODONS = new Set(['TAA', 'TAG', 'TGA']);
+function findLongestOrf(sequence) {
+    const starts = [
+        null,
+        null,
+        null,
+    ];
+    let longest;
+    for (let start = 0; start < sequence.length - 2; start++) {
+        const codon = sequence.slice(start, start + 3).toUpperCase();
+        const frame = (start % 3);
+        if (codon === START_CODON && starts[frame] === null) {
+            starts[frame] = start;
+        }
+        else if (STOP_CODONS.has(codon)) {
+            const inFrameStart = starts[frame];
+            if (inFrameStart === null) {
+                continue;
+            }
+            const length = start - inFrameStart;
+            if (!longest || longest[1] - longest[0] < length) {
+                longest = [inFrameStart, start];
+            }
+            starts[frame] = null;
+        }
+    }
+    return longest;
+}
+
+// Returns the genomic half-open boundary for stitched position `pos`.
+// For strand +1: the inclusive start (min) of the nucleotide.
+// For strand -1: the exclusive end (max) of the nucleotide.
+// Symmetric usage:
+//   plus:  cdsMin = helper(orf[0]), cdsMax = helper(orf[1]+3)
+//   minus: cdsMax = helper(orf[0]), cdsMin = helper(orf[1]+3)
+function stitchedToGenomicBound(pos, exons, strand) {
+    let cum = 0;
+    for (const exon of exons) {
+        const len = exon.max - exon.min;
+        if (pos <= cum + len) {
+            const off = pos - cum;
+            return strand === 1 ? exon.min + off : exon.max - off;
+        }
+        cum += len;
+    }
+    const last = exons.at(-1);
+    if (!last) {
+        throw new Error('No exons found');
+    }
+    return strand === 1 ? last.max : last.min;
+}
+function AddCodingSequence({ changeManager, handleClose, refName, session, sourceAssemblyId, sourceFeature, }) {
+    const [method, setMethod] = React.useState('longest-orf');
+    const [minInput, setMinInput] = React.useState('');
+    const [maxInput, setMaxInput] = React.useState('');
+    const [errorMessage, setErrorMessage] = React.useState('');
+    async function onSubmit(event) {
+        event.preventDefault();
+        setErrorMessage('');
+        let cdsMin;
+        let cdsMax;
+        try {
+            if (method === 'longest-orf') {
+                const exonParts = sourceFeature.transcriptExonParts.filter((p) => p.type === 'exon');
+                if (exonParts.length === 0) {
+                    setErrorMessage('No exons found in this transcript');
+                    return;
+                }
+                const backendDriver = session.apolloDataStore.getBackendDriver(sourceAssemblyId);
+                if (!backendDriver) {
+                    setErrorMessage('No backend driver found for this assembly');
+                    return;
+                }
+                let stitchedSequence = '';
+                for (const exon of exonParts) {
+                    const { seq } = await backendDriver.getSequence({
+                        assemblyName: sourceAssemblyId,
+                        refName,
+                        start: exon.min,
+                        end: exon.max,
+                    });
+                    stitchedSequence += sourceFeature.strand === -1 ? util.revcom(seq) : seq;
+                }
+                const orf = findLongestOrf(stitchedSequence);
+                if (!orf) {
+                    ;
+                    session.notify('No open reading frame found in this transcript', 'error');
+                    handleClose();
+                    return;
+                }
+                const strand = sourceFeature.strand ?? 1;
+                if (strand === 1) {
+                    cdsMin = stitchedToGenomicBound(orf[0], exonParts, 1);
+                    cdsMax = stitchedToGenomicBound(orf[1] + 3, exonParts, 1);
+                }
+                else {
+                    cdsMax = stitchedToGenomicBound(orf[0], exonParts, -1);
+                    cdsMin = stitchedToGenomicBound(orf[1] + 3, exonParts, -1);
+                }
+            }
+            else {
+                cdsMin = Number(minInput) - 1;
+                cdsMax = Number(maxInput);
+            }
+            const _id = new ObjectID().toHexString();
+            const addedFeature = {
+                _id,
+                refSeq: sourceFeature.refSeq,
+                min: cdsMin,
+                max: cdsMax,
+                type: 'CDS',
+            };
+            if (sourceFeature.strand) {
+                addedFeature.strand = sourceFeature.strand;
+            }
+            const change = new shared.AddFeatureChange({
+                changedIds: [sourceFeature._id],
+                typeName: 'AddFeatureChange',
+                assembly: sourceAssemblyId,
+                addedFeature,
+                parentFeatureId: sourceFeature._id,
+            });
+            await changeManager.submit(change);
+            session.apolloSetSelectedFeature(_id);
+            handleClose();
+        }
+        catch (error) {
+            setErrorMessage(error instanceof Error ? error.message : 'An unknown error occurred');
+        }
+    }
+    const manualError = method === 'manual' &&
+        Boolean(minInput) &&
+        Boolean(maxInput) &&
+        Number(maxInput) <= Number(minInput);
+    const submitDisabled = method === 'manual' ? !(minInput && maxInput) || manualError : false;
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Add coding sequence", handleClose: handleClose, maxWidth: false, "data-testid": "add-coding-sequence", children: [jsxRuntime.jsxs("form", { onSubmit: (event) => {
+                    void onSubmit(event);
+                }, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.FormControl, { children: jsxRuntime.jsxs(material.RadioGroup, { value: method, onChange: (e) => {
+                                        setMethod(e.target.value);
+                                    }, children: [jsxRuntime.jsx(material.FormControlLabel, { value: "longest-orf", control: jsxRuntime.jsx(material.Radio, {}), label: "Calculate longest open reading frame" }), jsxRuntime.jsx(material.FormControlLabel, { value: "manual", control: jsxRuntime.jsx(material.Radio, {}), label: "Manual" })] }) }), method === 'manual' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.TextField, { margin: "dense", id: "cds-min", label: "Min", type: "number", fullWidth: true, variant: "outlined", value: minInput, onChange: (e) => {
+                                            setMinInput(e.target.value);
+                                        } }), jsxRuntime.jsx(material.TextField, { margin: "dense", id: "cds-max", label: "Max", type: "number", fullWidth: true, variant: "outlined", value: maxInput, onChange: (e) => {
+                                            setMaxInput(e.target.value);
+                                        }, error: manualError, helperText: manualError ? '"Max" must be greater than "Min"' : null })] })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: submitDisabled, children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "button", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
+}
+
 class BackendDriver {
     clientStore;
     constructor(clientStore) {
@@ -2854,7 +2999,7 @@ class LocalDriver extends BackendDriver {
     async getSequence(region) {
         const session = util.getSession(this.clientStore);
         const { assemblyManager } = session;
-        const assembly = await assemblyManager.waitForAssembly(region.assemblyName);
+        const assembly = (await assemblyManager.waitForAssembly(region.assemblyName));
         if (!assembly) {
             throw new Error(`Assembly not found: "${region.assemblyName}"`);
         }
@@ -2885,7 +3030,7 @@ class LocalDriver extends BackendDriver {
     async getRegions(assemblyName) {
         const session = util.getSession(this.clientStore);
         const { assemblyManager } = session;
-        const assembly = await assemblyManager.waitForAssembly(assemblyName);
+        const assembly = (await assemblyManager.waitForAssembly(assemblyName));
         if (!assembly) {
             throw new Error(`Assembly not found: "${assemblyName}"`);
         }
@@ -2901,7 +3046,7 @@ class LocalDriver extends BackendDriver {
     async getRefNameAliases(assemblyName) {
         const session = util.getSession(this.clientStore);
         const { assemblyManager } = session;
-        const assembly = await assemblyManager.waitForAssembly(assemblyName);
+        const assembly = (await assemblyManager.waitForAssembly(assemblyName));
         if (!assembly) {
             throw new Error(`Assembly not found: "${assemblyName}"`);
         }
@@ -3560,7 +3705,7 @@ class CollaborationServerDriver extends BackendDriver {
                 const localSessionId = shared.makeUserSessionId(token);
                 const changeManager = new ChangeManager(this.clientStore);
                 // Save server last change sequence into session storage
-                internetAccount.setLastChangeSequenceNumber(Number(message.changeSequence));
+                internetAccount.setLastChangeSequenceNumber(message.changeSequence);
                 if (message.userSessionId === localSessionId) {
                     return; // we did this change, no need to apply it again
                 }
@@ -3608,14 +3753,10 @@ class CollaborationServerDriver extends BackendDriver {
             const seq = await inFlightPromise;
             return { seq, refSeq };
         }
-        let apolloAssembly = this.clientStore.assemblies.get(assemblyName);
-        if (!apolloAssembly) {
-            apolloAssembly = this.clientStore.addAssembly(assemblyName);
-        }
-        let apolloRefSeq = apolloAssembly.refSeqs.get(refSeq);
-        if (!apolloRefSeq) {
-            apolloRefSeq = apolloAssembly.addRefSeq(refSeq, refName);
-        }
+        const apolloAssembly = this.clientStore.assemblies.get(assemblyName) ??
+            this.clientStore.addAssembly(assemblyName);
+        const apolloRefSeq = apolloAssembly.refSeqs.get(refSeq) ??
+            apolloAssembly.addRefSeq(refSeq, refName);
         const clientStoreSequence = apolloRefSeq.getSequence(start, end);
         if (clientStoreSequence.length === end - start) {
             return { seq: clientStoreSequence, refSeq };
@@ -3972,7 +4113,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
             setType(NewFeature[value]);
         }
     };
-    let submitDisabled = Boolean(error) || !(start && end && type);
+    let submitDisabled = error || !(start && end && type);
     if ((type === NewFeature.CUSTOM && !customType) ||
         (!strand && type === NewFeature.GENE_AND_SUBFEATURES) ||
         (!strand && type === NewFeature.TRANSCRIPT_AND_SUBFEATURES)) {
@@ -3993,7 +4134,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
 function DeleteAssembly({ changeManager, handleClose, session, }) {
     const { internetAccounts } = mobxStateTree.getRoot(session);
     const [errorMessage, setErrorMessage] = React.useState('');
-    const [confirmDelete, setconfirmDelete] = React.useState(false);
+    const [confirmDelete, setConfirmDelete] = React.useState(false);
     const [submitted, setSubmitted] = React.useState(false);
     const apolloInternetAccounts = internetAccounts.filter((ia) => ia.type === 'ApolloInternetAccount');
     if (apolloInternetAccounts.length === 0) {
@@ -4034,7 +4175,7 @@ function DeleteAssembly({ changeManager, handleClose, session, }) {
         event.preventDefault();
     }
     return (jsxRuntime.jsxs(Dialog, { open: true, title: "Delete Assembly", handleClose: handleClose, maxWidth: false, "data-testid": "delete-assembly", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx(material.DialogContentText, { children: "Select assembly" }), jsxRuntime.jsx(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsxRuntime.jsx(material.DialogContentText, { children: jsxRuntime.jsx("strong", { style: { color: 'red' }, children: "NOTE: All assembly data will be deleted and this operation cannot be undone!" }) }), jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: confirmDelete, onChange: () => {
-                                            setconfirmDelete(!confirmDelete);
+                                            setConfirmDelete(!confirmDelete);
                                         } }), label: "I understand that all assembly data will be deleted" }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !selectedAssembly || !confirmDelete, variant: "contained", type: "submit", children: "Delete" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
@@ -4043,7 +4184,7 @@ function Export(props) {
     return (jsxRuntime.jsx(material.SvgIcon, { viewBox: "0 0 24 24", ...props, children: jsxRuntime.jsx("path", { d: "M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.9,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3A2,2 0 0,1 1,18Z" }) }));
 }
 function DownloadGFF3({ handleClose, session, assembly: assemblyName, }) {
-    const [includeFASTA, setincludeFASTA] = React.useState(false);
+    const [includeFASTA, setIncludeFASTA] = React.useState(false);
     const [errorMessage, setErrorMessage] = React.useState('');
     const { getInternetAccount } = session.apolloDataStore;
     const { assemblyManager } = session;
@@ -4092,7 +4233,7 @@ function DownloadGFF3({ handleClose, session, assembly: assemblyName, }) {
         window.open(exportUri, '_blank');
     }
     return (jsxRuntime.jsxs(Dialog, { open: true, title: "Export annotations", handleClose: handleClose, maxWidth: false, "data-testid": "download-gff3", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsxs(material.DialogContentText, { children: ["Exporting annotations for ", assemblyName] }), jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.FormControlLabel, { "data-testid": "include-fasta-checkbox", control: jsxRuntime.jsx(material.Checkbox, { checked: includeFASTA, onChange: () => {
-                                            setincludeFASTA(!includeFASTA);
+                                            setIncludeFASTA(!includeFASTA);
                                         }, disabled: !internetAccountConfigId }), label: "Include fasta sequence in GFF output" }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", children: "Download" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 function getAssemblyGFF3Stream(assemblyName) {
@@ -4131,6 +4272,49 @@ async function* getFeaturesForAssembly(assemblyName) {
     db.close();
 }
 
+function ImportAnnotations({ assemblyName, handleClose, session, }) {
+    const { changeManager } = session.apolloDataStore;
+    const [file, setFile] = React.useState();
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const [loading, setLoading] = React.useState(false);
+    function handleChangeFile(e) {
+        if (e.target.files) {
+            setFile(e.target.files[0]);
+        }
+    }
+    async function onSubmit(event) {
+        event.preventDefault();
+        if (!file) {
+            return;
+        }
+        setLoading(true);
+        setErrorMessage('');
+        try {
+            const stream = file
+                .stream()
+                .pipeThrough(new TransformStream(new gff.GFFTransformer({ parseSequences: false })));
+            for await (const value of stream) {
+                const annotationFeature = shared.gff3ToAnnotationFeature(value);
+                const change = new shared.AddFeatureChange({
+                    changedIds: [annotationFeature._id],
+                    typeName: 'AddFeatureChange',
+                    assembly: assemblyName,
+                    addedFeature: annotationFeature,
+                });
+                await changeManager.submit(change);
+            }
+            handleClose();
+        }
+        catch (error) {
+            setErrorMessage(String(error));
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Import annotations", handleClose: handleClose, children: [loading ? jsxRuntime.jsx(material.LinearProgress, {}) : null, jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Import annotations from a GFF3 file into the current Apollo track. Features are parsed and stored locally in the browser, so importing very large GFF3 files is not recommended." }), jsxRuntime.jsx("input", { type: "file", accept: ".gff,.gff3", onChange: handleChangeFile, disabled: loading }), errorMessage ? (jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: !file || loading, children: "Import" }), jsxRuntime.jsx(material.Button, { variant: "outlined", onClick: handleClose, children: "Cancel" })] })] })] }));
+}
+
 function ImportFeatures({ changeManager, handleClose, session, }) {
     const { apolloDataStore } = session;
     const [file, setFile] = React.useState();
@@ -4534,7 +4718,7 @@ function ManageUsers({ changeManager, handleClose, session, }) {
         });
         return newRow;
     }
-    return (jsxRuntime.jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxRuntime.jsxs(material.DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx("div", { style: { height: '100%', width: '100%' }, children: jsxRuntime.jsx(xDataGrid.DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
+    return (jsxRuntime.jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxRuntime.jsxs(material.DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx("div", { style: { height: '100%', width: '100%' }, children: jsxRuntime.jsx(xDataGrid.DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, showToolbar: true, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
                                 setErrorMessage(String(error));
                             } }) })] }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
@@ -4844,12 +5028,13 @@ const AddRefSeqAliases = mobxReact.observer(function AddRefSeqAliases({ changeMa
     const [enableSubmit, setEnableSubmit] = React.useState(false);
     const [selectedAssembly, setSelectedAssembly] = React.useState();
     const [selectedRows, setSelectedRows] = React.useState([]);
-    const [refNameAliasMap, setRefNameAliasMap] = React.useState(new Map());
+    const [refNameAliasMap, setRefNameAliasMap] = React.useState(() => new Map());
     const { apolloDataStore } = session;
     const { collaborationServerDriver } = apolloDataStore;
     const assemblies = collaborationServerDriver.getAssemblies();
     React.useEffect(() => {
         if (assemblies.length > 0) {
+            // eslint-disable-next-line @eslint-react/set-state-in-effect
             setSelectedAssembly(assemblies[0]);
             collaborationServerDriver
                 .getRefNameAliases(assemblies[0].name)
@@ -4861,7 +5046,7 @@ const AddRefSeqAliases = mobxReact.observer(function AddRefSeqAliases({ changeMa
                 setErrorMessage('Error fetching refName aliases for assembly');
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line @eslint-react/exhaustive-deps
     }, []);
     const initializeRefNameAliasMap = (refNameAliasesList) => {
         const initialMap = new Map();
@@ -5266,17 +5451,23 @@ const useStyles$d = tssReact.makeStyles()((theme) => ({
 }));
 function GoogleButton(props) {
     const { classes } = useStyles$d();
-    const { disabled } = props;
-    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Google, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Google" }));
+    const { message } = props;
+    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Google, {}), ...props, children: message }));
 }
 function MicrosoftButton(props) {
     const { classes } = useStyles$d();
-    const { disabled } = props;
-    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Microsoft, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Microsoft" }));
+    const { message } = props;
+    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Microsoft, {}), ...props, children: message }));
 }
 function GuestButton(props) {
     const { classes } = useStyles$d();
-    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: "Continue as Guest" }));
+    const { message } = props;
+    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: message }));
+}
+function GenericButton(props) {
+    const { classes } = useStyles$d();
+    const { message } = props;
+    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(BusinessIcon, { fontSize: "small" }), ...props, children: message }));
 }
 
 const useStyles$c = tssReact.makeStyles()((theme) => ({
@@ -5288,7 +5479,7 @@ const useStyles$c = tssReact.makeStyles()((theme) => ({
 const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
     const { classes } = useStyles$c();
     const [errorMessage, setErrorMessage] = React.useState('');
-    const [loginTypes, setLoginTypes] = React.useState([]);
+    const [loginTypes, setLoginTypes] = React.useState(null);
     React.useEffect(() => {
         const controller = new AbortController();
         const { signal } = controller;
@@ -5302,6 +5493,9 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
             }
             const data = (await response.json());
             setLoginTypes(data);
+            if (data.length === 0) {
+                setErrorMessage('No login types configured');
+            }
         }
         getAuthTypes().catch((error) => {
             if (!aborting.isAbortException(error)) {
@@ -5313,26 +5507,35 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
         };
     }, [baseURL]);
     function handleClick(authType) {
-        if (authType === 'google') {
-            handleClose('google');
-        }
-        else if (authType === 'microsoft') {
-            handleClose('microsoft');
-        }
-        else {
-            handleClose('guest');
-        }
-    }
-    const allowGoogle = loginTypes.includes('google');
-    const allowMicrosoft = loginTypes.includes('microsoft');
-    const allowGuest = loginTypes.includes('guest');
-    return (jsxRuntime.jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: [allowGoogle ? (jsxRuntime.jsx(GoogleButton, { disabled: !allowGoogle, onClick: () => {
-                            handleClick('google');
-                        } })) : null, allowMicrosoft ? (jsxRuntime.jsx(MicrosoftButton, { disabled: !allowMicrosoft, onClick: () => {
-                            handleClick('microsoft');
-                        } })) : null, allowGuest ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { className: classes.divider }), jsxRuntime.jsx(GuestButton, { onClick: () => {
-                                    handleClick('guest');
-                                } })] })) : null] }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: () => {
+        handleClose(authType);
+    }
+    if (loginTypes === null) {
+        return 'Loading…';
+    }
+    const firstLoginType = loginTypes.at(0);
+    if (firstLoginType && loginTypes.length === 1 && !firstLoginType.needsPopup) {
+        handleClick(firstLoginType);
+    }
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsxRuntime.jsx(material.DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: loginTypes.map((loginType) => {
+                    if (loginType.name === 'google') {
+                        return (jsxRuntime.jsx(GoogleButton, { message: loginType.message, onClick: () => {
+                                handleClick(loginType);
+                            } }, loginType.name));
+                    }
+                    if (loginType.name === 'microsoft') {
+                        return (jsxRuntime.jsx(MicrosoftButton, { message: loginType.message, onClick: () => {
+                                handleClick(loginType);
+                            } }, loginType.name));
+                    }
+                    if (loginType.name === 'guest') {
+                        return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(material.Divider, { className: classes.divider }), jsxRuntime.jsx(GuestButton, { message: loginType.message, onClick: () => {
+                                        handleClick(loginType);
+                                    } })] }, loginType.name));
+                    }
+                    return (jsxRuntime.jsx(GenericButton, { message: loginType.message, onClick: () => {
+                            handleClick(loginType);
+                        } }, loginType.name));
+                }) }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: () => {
                         handleClose();
                     }, children: "Cancel" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 };
@@ -5528,13 +5731,13 @@ const stateModelFactory$3 = (configSchema) => {
                     },
                 ]);
             });
-            if (authType !== 'guest') {
+            if (authType.needsPopup) {
                 // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                self.openAuthWindow(authType, resolve, reject);
+                self.openAuthWindow(authType.name, resolve, reject);
                 return;
             }
             const url = new URL('auth/login', baseURL);
-            const searchParams = new URLSearchParams({ type: authType });
+            const searchParams = new URLSearchParams({ type: authType.name });
             url.search = searchParams.toString();
             const uri = url.toString();
             const response = await fetch(uri, { signal: self.controller.signal });
@@ -5655,7 +5858,7 @@ const stateModelFactory$3 = (configSchema) => {
             socket.on('COMMON', (message) => {
                 if ('checkResult' in message) {
                     if (message.deleted) {
-                        deleteCheckResult(message.checkResult._id.toString());
+                        deleteCheckResult(message.checkResult._id);
                     }
                     else {
                         addCheckResult(message.checkResult);
@@ -6275,7 +6478,9 @@ const DefaultAttributeEditor = mobxReact.observer(function DefaultAttributeEdito
             return newValues;
         });
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [newValues.map((value, idx) => (jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [newValues.map((value, idx) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
                             updateValue(idx, editedValue);
                         }, variant: "outlined", fullWidth: true }), jsxRuntime.jsx(material.IconButton, { "aria-label": "delete", size: "medium", edge: "end", onClick: () => {
                             deleteValue(idx);
@@ -6287,7 +6492,9 @@ const DefaultAttributeEditor = mobxReact.observer(function DefaultAttributeEdito
 });
 
 function DefaultAttributeViewer({ values }) {
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: values?.map((value, idx) => (jsxRuntime.jsx(material.Typography, { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: values?.map((value, idx) => (jsxRuntime.jsx(material.Typography
+        // eslint-disable-next-line @eslint-react/no-array-index-key
+        , { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
 }
 
 const useStyles$a = tssReact.makeStyles()((theme) => ({
@@ -6593,6 +6800,7 @@ const ApolloFeatureDetailsWidget = mobxReact.observer(function ApolloFeatureDeta
     const { classes } = useStyles$8();
     const [panelState, setPanelState] = React.useState(['attributes']);
     React.useEffect(() => {
+        // eslint-disable-next-line @eslint-react/set-state-in-effect
         setPanelState(['attributes']);
     }, [feature]);
     if (!(feature && currentAssembly)) {
@@ -6894,7 +7102,7 @@ const TranscriptSequence = mobxReact.observer(function TranscriptSequence({ asse
         else {
             setSequenceOptions(defaultSequenceOptions);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line @eslint-react/exhaustive-deps
     }, [feature]);
     if (!(currentAssembly && refData)) {
         return null;
@@ -6957,19 +7165,6 @@ const TranscriptSequence = mobxReact.observer(function TranscriptSequence({ asse
                         .join(';'), "(strand=", feature.strand === 1 ? '+' : '-', ";length=", getSequenceLength(sequenceSegments), ")", jsxRuntime.jsx("br", {}), wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH)] })] }));
 });
 
-const StyledTextField = styled(NumberTextField)(() => ({
-    '&.MuiFormControl-root': {
-        marginTop: 0,
-        marginBottom: 0,
-        width: '100%',
-    },
-    '& .MuiInputBase-input': {
-        fontSize: 12,
-        height: 20,
-        padding: 1,
-        paddingLeft: 10,
-    },
-}));
 const SequenceContainer = styled('div')({
     display: 'flex',
     justifyContent: 'center',
@@ -6991,6 +7186,195 @@ const StyledAccordionSummary$1 = styled(material.AccordionSummary)(() => ({
         maxHeight: 30,
     },
 }));
+function Translation({ changeInProgress, cdsLocations, refData, strand, 
+// eslint-disable-next-line @typescript-eslint/unbound-method
+updateCDSLocation, cdsMin, cdsMax, feature, session, }) {
+    const seqRef = React.useRef(null);
+    const { notify } = session;
+    const cdsSequences = [];
+    const [firstLocation] = cdsLocations;
+    for (const loc of firstLocation) {
+        const seq = refData.getSequence(loc.min, loc.max);
+        cdsSequences.push(strand === -1 ? util.revcom(seq) : seq);
+    }
+    const cdsSequence = cdsSequences.join('');
+    const proteinSequence = [];
+    for (let codonGenomicPos = 0; codonGenomicPos < cdsSequence.length; codonGenomicPos += 3) {
+        const codonSeq = cdsSequence
+            .slice(codonGenomicPos, codonGenomicPos + 3)
+            .toUpperCase();
+        const protein = util.defaultCodonTable[codonSeq] || '&';
+        proteinSequence.push(protein);
+    }
+    const onCopyClick = () => {
+        const seqDiv = seqRef.current;
+        if (!seqDiv) {
+            return;
+        }
+        void copyToClipboard(seqDiv);
+    };
+    // Codon position is the index of the start codon in the CDS genomic sequence
+    // Calculate the genomic location of the start codon based on the codon position in the CDS
+    const getCodonGenomicLocation = (codonGenomicPosition) => {
+        const [firstLocation] = cdsLocations;
+        let cdsLen = 0;
+        const sortedCDSLocations = firstLocation.toSorted(({ min: a }, { min: b }) => a - b);
+        // Suppose CDS locations are [{min: 0, max: 10}, {min: 20, max: 30}, {min: 40, max: 50}]
+        // and codonGenomicPosition is 25
+        // ((10 - 0) + (30 - 20) + (50 - 40)) > 25
+        // So, start codon is in (40, 50)
+        // 40 + (25-20) = 45 is the genomic location of the start codon
+        if (strand === 1) {
+            for (const loc of sortedCDSLocations) {
+                const locLength = loc.max - loc.min;
+                if (cdsLen + locLength > codonGenomicPosition) {
+                    return loc.min + (codonGenomicPosition - cdsLen);
+                }
+                cdsLen += locLength;
+            }
+        }
+        else if (strand === -1) {
+            for (let i = sortedCDSLocations.length - 1; i >= 0; i--) {
+                const loc = sortedCDSLocations[i];
+                const locLength = loc.max - loc.min;
+                if (cdsLen + locLength > codonGenomicPosition) {
+                    return loc.max - (codonGenomicPosition - cdsLen);
+                }
+                cdsLen += locLength;
+            }
+        }
+        if (strand === 1) {
+            return cdsMin;
+        }
+        return cdsMax;
+    };
+    const trimTranslationSequence = () => {
+        if ((proteinSequence.at(0) === 'M' && proteinSequence.at(-1) === '*') ||
+            proteinSequence.length === 0) {
+            return;
+        }
+        // Trim any sequence before first start codon and after stop codon
+        const startCodonIndex = proteinSequence.indexOf('M');
+        if (startCodonIndex === -1) {
+            notify('Start codon not found', 'error');
+            return;
+        }
+        const stopCodonIndex = proteinSequence.indexOf('*', startCodonIndex);
+        if (stopCodonIndex === -1) {
+            notify('Stop codon not found', 'error');
+            return;
+        }
+        const startCodonPos = startCodonIndex * 3;
+        const stopCodonPos = stopCodonIndex * 3;
+        const startCodonGenomicLoc = getCodonGenomicLocation(startCodonPos);
+        let stopCodonGenomicLoc = getCodonGenomicLocation(stopCodonPos);
+        if (strand === 1) {
+            if (startCodonGenomicLoc > stopCodonGenomicLoc) {
+                notify('Start codon genomic location should be less than stop codon genomic location', 'error');
+                return;
+            }
+            let promise;
+            stopCodonGenomicLoc += 3; // move to end of stop codon
+            if (startCodonGenomicLoc !== cdsMin) {
+                promise = new Promise((resolve) => {
+                    updateCDSLocation(cdsMin, startCodonGenomicLoc, feature, true, () => {
+                        resolve(true);
+                    });
+                });
+            }
+            if (stopCodonGenomicLoc !== cdsMax) {
+                if (promise) {
+                    void promise.then(() => {
+                        updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
+                    });
+                }
+                else {
+                    updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
+                }
+            }
+        }
+        if (strand === -1) {
+            // reverse strand
+            if (startCodonGenomicLoc < stopCodonGenomicLoc) {
+                notify('Start codon genomic location should be less than stop codon genomic location', 'error');
+                return;
+            }
+            let promise;
+            stopCodonGenomicLoc -= 3; // move to end of stop codon
+            if (startCodonGenomicLoc !== cdsMax) {
+                promise = new Promise((resolve) => {
+                    updateCDSLocation(cdsMax, startCodonGenomicLoc, feature, false, () => {
+                        resolve(true);
+                    });
+                });
+            }
+            if (stopCodonGenomicLoc !== cdsMin) {
+                if (promise) {
+                    void promise.then(() => {
+                        updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true);
+                    });
+                }
+                else {
+                    updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true);
+                }
+            }
+        }
+        notify('Translation sequence trimmed to start and stop codons', 'success');
+    };
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(material.Accordion, { children: [jsxRuntime.jsx(StyledAccordionSummary$1, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(SequenceContainer, { children: jsxRuntime.jsx(material.Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: proteinSequence.map((protein, idx) => {
+                                    const codonGenomicPos = idx * 3;
+                                    if (protein === 'M') {
+                                        return (jsxRuntime.jsx(material.Typography, { component: 'span', style: {
+                                                backgroundColor: changeInProgress
+                                                    ? 'lightgray'
+                                                    : 'yellow',
+                                                cursor: 'pointer',
+                                                border: '1px solid black',
+                                            }, onClick: () => {
+                                                if (changeInProgress) {
+                                                    return;
+                                                }
+                                                // NOTE: codonGenomicPos is important here for calculating the genomic location
+                                                // of the start codon. We are using the codonGenomicPos as the key in the typography
+                                                // elements to maintain the genomic postion of the codon start
+                                                const startCodonGenomicLocation = getCodonGenomicLocation(codonGenomicPos);
+                                                if (startCodonGenomicLocation !== cdsMin &&
+                                                    strand === 1) {
+                                                    updateCDSLocation(cdsMin, startCodonGenomicLocation, feature, true);
+                                                }
+                                                if (startCodonGenomicLocation !== cdsMax &&
+                                                    strand === -1) {
+                                                    updateCDSLocation(cdsMax, startCodonGenomicLocation, feature, false);
+                                                }
+                                            }, children: protein }, codonGenomicPos));
+                                    }
+                                    if (protein === '*') {
+                                        return (jsxRuntime.jsx(material.Typography, { style: { backgroundColor: 'red', color: 'white' }, component: 'span', children: protein }, codonGenomicPos));
+                                    }
+                                    // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
+                                    return (jsxRuntime.jsx(material.Typography, { component: 'span', children: protein }, codonGenomicPos));
+                                }) }) }), jsxRuntime.jsxs("div", { style: {
+                                marginTop: 10,
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 10,
+                            }, children: [jsxRuntime.jsx(material.Tooltip, { title: "Copy", children: jsxRuntime.jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsxRuntime.jsx(material.Tooltip, { title: "Trim", children: jsxRuntime.jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCutIcon, { style: { fontSize: 15 } }) }) })] })] })] }) }));
+}
+
+const StyledTextField = styled(NumberTextField)(() => ({
+    '&.MuiFormControl-root': {
+        marginTop: 0,
+        marginBottom: 0,
+        width: '100%',
+    },
+    '& .MuiInputBase-input': {
+        fontSize: 12,
+        height: 20,
+        padding: 1,
+        paddingLeft: 10,
+    },
+}));
 const Strand = (props) => {
     const { strand } = props;
     return (jsxRuntime.jsx("div", { children: strand === 1 ? (jsxRuntime.jsx(AddIcon, {})) : strand === -1 ? (jsxRuntime.jsx(RemoveIcon, {})) : (jsxRuntime.jsx(material.Typography, { component: 'span', children: "N/A" })) }));
@@ -7009,7 +7393,6 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
     const refData = currentAssembly?.getByRefName(refName);
     const { changeManager } = session.apolloDataStore;
-    const seqRef = React.useRef(null);
     const { changeInProgress } = session;
     if (!refData) {
         return null;
@@ -7436,184 +7819,6 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
             },
         ];
     };
-    const getTranslationSequence = () => {
-        let wholeSequence = '';
-        const [firstLocation] = cdsLocations;
-        const sortedCDSLocations = firstLocation.toSorted(({ min: a }, { min: b }) => a - b);
-        for (const loc of sortedCDSLocations) {
-            wholeSequence += refData.getSequence(loc.min, loc.max);
-        }
-        if (strand === -1) {
-            // Original: ACGCAT
-            // Complement: TGCGTA
-            // Reverse complement: ATGCGT
-            wholeSequence = util.revcom(wholeSequence);
-        }
-        const elements = [];
-        for (let codonGenomicPos = 0; codonGenomicPos < wholeSequence.length; codonGenomicPos += 3) {
-            const codonSeq = wholeSequence
-                .slice(codonGenomicPos, codonGenomicPos + 3)
-                .toUpperCase();
-            const protein = util.defaultCodonTable[codonSeq] || '&';
-            // highlight start codon and stop codons
-            if (codonSeq === 'ATG') {
-                elements.push(jsxRuntime.jsx(material.Typography, { component: 'span', style: {
-                        backgroundColor: changeInProgress ? 'lightgray' : 'yellow',
-                        cursor: 'pointer',
-                        border: '1px solid black',
-                    }, onClick: () => {
-                        if (changeInProgress) {
-                            return;
-                        }
-                        // NOTE: codonGenomicPos is important here for calculating the genomic location
-                        // of the start codon. We are using the codonGenomicPos as the key in the typography
-                        // elements to maintain the genomic postion of the codon start
-                        const startCodonGenomicLocation = getCodonGenomicLocation(codonGenomicPos);
-                        if (startCodonGenomicLocation !== cdsMin && strand === 1) {
-                            updateCDSLocation(cdsMin, startCodonGenomicLocation, feature, true);
-                        }
-                        if (startCodonGenomicLocation !== cdsMax && strand === -1) {
-                            updateCDSLocation(cdsMax, startCodonGenomicLocation, feature, false);
-                        }
-                    }, children: protein }, codonGenomicPos));
-            }
-            else if (['TAA', 'TAG', 'TGA'].includes(codonSeq)) {
-                elements.push(jsxRuntime.jsx(material.Typography, { style: { backgroundColor: 'red', color: 'white' }, component: 'span', children: protein }, codonGenomicPos));
-            }
-            else {
-                elements.push(
-                // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
-                jsxRuntime.jsx(material.Typography, { component: 'span', children: protein }, codonGenomicPos));
-            }
-        }
-        return elements;
-    };
-    // Codon position is the index of the start codon in the CDS genomic sequence
-    // Calculate the genomic location of the start codon based on the codon position in the CDS
-    const getCodonGenomicLocation = (codonGenomicPosition) => {
-        const [firstLocation] = cdsLocations;
-        let cdsLen = 0;
-        const sortedCDSLocations = firstLocation.toSorted(({ min: a }, { min: b }) => a - b);
-        // Suppose CDS locations are [{min: 0, max: 10}, {min: 20, max: 30}, {min: 40, max: 50}]
-        // and codonGenomicPosition is 25
-        // ((10 - 0) + (30 - 20) + (50 - 40)) > 25
-        // So, start codon is in (40, 50)
-        // 40 + (25-20) = 45 is the genomic location of the start codon
-        if (strand === 1) {
-            for (const loc of sortedCDSLocations) {
-                const locLength = loc.max - loc.min;
-                if (cdsLen + locLength > codonGenomicPosition) {
-                    return loc.min + (codonGenomicPosition - cdsLen);
-                }
-                cdsLen += locLength;
-            }
-        }
-        else if (strand === -1) {
-            for (let i = sortedCDSLocations.length - 1; i >= 0; i--) {
-                const loc = sortedCDSLocations[i];
-                const locLength = loc.max - loc.min;
-                if (cdsLen + locLength > codonGenomicPosition) {
-                    return loc.max - (codonGenomicPosition - cdsLen);
-                }
-                cdsLen += locLength;
-            }
-        }
-        if (strand === 1) {
-            return cdsMin;
-        }
-        return cdsMax;
-    };
-    const trimTranslationSequence = () => {
-        const sequenceElements = getTranslationSequence();
-        const translationSequence = sequenceElements
-            .map((el) => el.props.children)
-            .join('');
-        if (translationSequence.startsWith('M') &&
-            translationSequence.endsWith('*')) {
-            return;
-        }
-        // NOTE: We are maintaining the genomic location of the codon start as the "key"
-        // in typography elements. See getTranslationSequence function
-        const translSeqCodonStartGenomicPosArr = [];
-        for (const el of sequenceElements) {
-            translSeqCodonStartGenomicPosArr.push({
-                codonGenomicPos: el.key,
-                sequenceLetter: el.props.children,
-            });
-        }
-        if (translSeqCodonStartGenomicPosArr.length === 0) {
-            return;
-        }
-        // Trim any sequence before first start codon and after stop codon
-        const startCodonIndex = translationSequence.indexOf('M');
-        const stopCodonIndex = translationSequence.indexOf('*');
-        const startCodonPos = translSeqCodonStartGenomicPosArr[startCodonIndex].codonGenomicPos;
-        const stopCodonPos = translSeqCodonStartGenomicPosArr[stopCodonIndex].codonGenomicPos;
-        if (!startCodonPos || !stopCodonPos) {
-            return;
-        }
-        const startCodonGenomicLoc = getCodonGenomicLocation(startCodonPos);
-        let stopCodonGenomicLoc = getCodonGenomicLocation(stopCodonPos);
-        if (strand === 1) {
-            if (startCodonGenomicLoc > stopCodonGenomicLoc) {
-                notify('Start codon genomic location should be less than stop codon genomic location', 'error');
-                return;
-            }
-            let promise;
-            stopCodonGenomicLoc += 3; // move to end of stop codon
-            if (startCodonGenomicLoc !== cdsMin) {
-                promise = new Promise((resolve) => {
-                    updateCDSLocation(cdsMin, startCodonGenomicLoc, feature, true, () => {
-                        resolve(true);
-                    });
-                });
-            }
-            if (stopCodonGenomicLoc !== cdsMax) {
-                if (promise) {
-                    void promise.then(() => {
-                        updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
-                    });
-                }
-                else {
-                    updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
-                }
-            }
-        }
-        if (strand === -1) {
-            // reverse strand
-            if (startCodonGenomicLoc < stopCodonGenomicLoc) {
-                notify('Start codon genomic location should be less than stop codon genomic location', 'error');
-                return;
-            }
-            let promise;
-            stopCodonGenomicLoc -= 3; // move to end of stop codon
-            if (startCodonGenomicLoc !== cdsMax) {
-                promise = new Promise((resolve) => {
-                    updateCDSLocation(cdsMax, startCodonGenomicLoc, feature, false, () => {
-                        resolve(true);
-                    });
-                });
-            }
-            if (stopCodonGenomicLoc !== cdsMin) {
-                if (promise) {
-                    void promise.then(() => {
-                        updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true);
-                    });
-                }
-                else {
-                    updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true);
-                }
-            }
-        }
-        notify('Translation sequence trimmed to start and stop codons', 'success');
-    };
-    const onCopyClick = () => {
-        const seqDiv = seqRef.current;
-        if (!seqDiv) {
-            return;
-        }
-        void copyToClipboard(seqDiv);
-    };
     return (jsxRuntime.jsxs("div", { children: [cdsPresent && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsxRuntime.jsx(material.Grid, { size: 1 }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                                     return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
                                 }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
@@ -7623,8 +7828,12 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
                                 }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                                     return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
                                 }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 1 })] }) })), jsxRuntime.jsxs("div", { style: { marginTop: 5, marginBottom: 10 }, children: [jsxRuntime.jsx("div", { style: { textAlign: 'center' }, children: jsxRuntime.jsx(material.Typography, { children: "Exons" }) }), transcriptExonParts.map((loc, index) => {
-                        return (jsxRuntime.jsx("div", { children: loc.type === 'exon' && (jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsxRuntime.jsx(material.Grid, { size: 1, children: index !== 0 &&
-                                            getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                        return (
+                        // eslint-disable-next-line @eslint-react/no-array-index-key
+                        jsxRuntime.jsx("div", { children: loc.type === 'exon' && (jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsxRuntime.jsx(material.Grid, { size: 1, children: index !== 0 &&
+                                            getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography
+                                            // eslint-disable-next-line @eslint-react/no-array-index-key
+                                            , { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                                                 return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
                                             }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                                                 return handleExonLocationChange(loc.max, newLocation, feature, false);
@@ -7633,14 +7842,10 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
                                             }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                                                 return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
                                             }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 1, children: index !== transcriptExonParts.length - 1 &&
-                                            getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
-                    })] }), cdsPresent && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(material.Accordion, { children: [jsxRuntime.jsx(StyledAccordionSummary$1, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(SequenceContainer, { children: jsxRuntime.jsx(material.Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: getTranslationSequence() }) }), jsxRuntime.jsxs("div", { style: {
-                                        marginTop: 10,
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        gap: 10,
-                                    }, children: [jsxRuntime.jsx(material.Tooltip, { title: "Copy", children: jsxRuntime.jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsxRuntime.jsx(material.Tooltip, { title: "Trim", children: jsxRuntime.jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCutIcon, { style: { fontSize: 15 } }) }) })] })] })] }) }))] }));
+                                            getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography
+                                            // eslint-disable-next-line @eslint-react/no-array-index-key
+                                            , { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
+                    })] }), cdsPresent && (jsxRuntime.jsx(Translation, { changeInProgress: changeInProgress, cdsLocations: cdsLocations, refData: refData, strand: strand, updateCDSLocation: updateCDSLocation, cdsMin: cdsMin, cdsMax: cdsMax, feature: feature, session: session }))] }));
 });
 
 const HeaderTableCell = styled(material.TableCell)(() => ({
@@ -7677,7 +7882,7 @@ const ApolloTranscriptDetailsWidget = mobxReact.observer(function ApolloTranscri
     const { assembly, feature, refName } = model;
     React.useEffect(() => {
         setPanelState(DEFAULT_PANELS);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line @eslint-react/exhaustive-deps
     }, [feature]);
     const session = util.getSession(model);
     const { pluginManager } = util.getEnv(session);
@@ -7736,8 +7941,8 @@ function handleFeatureTypeChange(changeManager, feature, oldType, newType) {
         typeName: 'TypeChange',
         changedIds: [featureId],
         featureId,
-        oldType: String(oldType),
-        newType: String(newType),
+        oldType,
+        newType,
         assembly: feature.assemblyId,
     });
     return changeManager.submit(change);
@@ -7833,7 +8038,7 @@ const NumberCell = mobxReact.observer(function NumberCell({ initialValue, notify
         if (initialValue !== value) {
             setValue(initialValue);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line @eslint-react/exhaustive-deps
     }, [initialValue]);
     React.useEffect(() => {
         if (blur) {
@@ -8674,8 +8879,9 @@ function draw$3(display, ctx, gene, row, rowInFeature, block) {
     const [top, left, width] = getFeatureBox(display, gene, row, block);
     const height = getRowCount$2(display, gene) * apolloRowHeight;
     if (width > 2) {
-        let selectedColor = configuration.readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', { featureType: gene.type });
-        selectedColor = material.alpha(theme.palette.background.paper, 0.6);
+        const selectedColor = configuration.readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', {
+            featureType: gene.type,
+        }) ?? material.alpha(theme.palette.background.paper, 0.6);
         ctx.fillStyle = selectedColor;
         ctx.fillRect(left, top, width, height);
     }
@@ -8948,7 +9154,7 @@ function getLayout(display, feature) {
     }
     return layout;
 }
-function getContextMenuItems$1(display, feature) {
+function getContextMenuItems$1(display, transcript) {
     const { changeManager, regions, selectedFeature, session } = display;
     const [region] = regions;
     const currentAssemblyId = display.getAssemblyId(region.assemblyName);
@@ -8958,7 +9164,7 @@ function getContextMenuItems$1(display, feature) {
             label: 'Open transcript editor',
             onClick: () => {
                 const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
-                    feature,
+                    feature: transcript,
                     assembly: currentAssemblyId,
                     changeManager,
                     refName: region.refName,
@@ -8978,7 +9184,7 @@ function getContextMenuItems$1(display, feature) {
                         doneCallback();
                     },
                     changeManager,
-                    sourceFeature: feature,
+                    sourceFeature: transcript,
                     sourceAssemblyId: currentAssemblyId,
                     selectedFeature,
                     setSelectedFeature: (feature) => {
@@ -8998,7 +9204,7 @@ function getContextMenuItems$1(display, feature) {
                         doneCallback();
                     },
                     changeManager,
-                    sourceFeature: feature,
+                    sourceFeature: transcript,
                     sourceAssemblyId: currentAssemblyId,
                     selectedFeature,
                     setSelectedFeature: (feature) => {
@@ -9008,6 +9214,31 @@ function getContextMenuItems$1(display, feature) {
             ]);
         },
     });
+    const { children } = transcript;
+    if (!children) {
+        return [];
+    }
+    const cdsChildren = [...children.values()].filter((child) => isCDSFeature(child, session));
+    if (cdsChildren.length === 0) {
+        menuItems.push({
+            label: 'Add coding sequence',
+            onClick: () => {
+                session.queueDialog((doneCallback) => [
+                    AddCodingSequence,
+                    {
+                        session,
+                        handleClose: () => {
+                            doneCallback();
+                        },
+                        changeManager,
+                        sourceFeature: transcript,
+                        sourceAssemblyId: currentAssemblyId,
+                        refName: region.refName,
+                    },
+                ]);
+            },
+        });
+    }
     return menuItems;
 }
 // False positive here, none of these functions use "this"
@@ -9185,7 +9416,7 @@ function colorCode(letter, theme) {
         letterUpper === 'C' ||
         letterUpper === 'G' ||
         letterUpper === 'T') {
-        return theme.palette.bases[letterUpper].main.toString();
+        return theme.palette.bases[letterUpper].main;
     }
     return 'lightgray';
 }
@@ -9282,8 +9513,7 @@ function baseModelFactory$2(_pluginManager, configSchema) {
             return internetAccounts.find((ia) => configuration.getConf(ia, 'internetAccountId') === internetAccountConfigId);
         },
         get changeManager() {
-            return self.session.apolloDataStore
-                .changeManager;
+            return self.session.apolloDataStore.changeManager;
         },
         getAssemblyId(assemblyName) {
             const { assemblyManager } = self.session;
@@ -9294,12 +9524,10 @@ function baseModelFactory$2(_pluginManager, configSchema) {
             return assembly.name;
         },
         get selectedFeature() {
-            return self.session
-                .apolloSelectedFeature;
+            return self.session.apolloSelectedFeature;
         },
         get hoveredFeature() {
-            return self.session
-                .apolloHoveredFeature;
+            return self.session.apolloHoveredFeature;
         },
     }))
         .actions((self) => ({
@@ -9344,8 +9572,11 @@ function baseModelFactory$2(_pluginManager, configSchema) {
         const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
         return {
             trackMenuItems() {
-                const { graphical, table, showCheckResults } = self;
-                return [
+                const { graphical, table, showCheckResults, session } = self;
+                const [region] = self.regions;
+                const { assemblyName } = region;
+                const backendDriver = session.apolloDataStore.getBackendDriver(assemblyName);
+                const items = [
                     ...superTrackMenuItems(),
                     {
                         type: 'subMenu',
@@ -9397,7 +9628,7 @@ function baseModelFactory$2(_pluginManager, configSchema) {
                     {
                         label: 'Filter features by type',
                         onClick: () => {
-                            const session = self.session;
+                            const { session } = self;
                             self.session.queueDialog((doneCallback) => [
                                 FilterFeatures,
                                 {
@@ -9413,76 +9644,93 @@ function baseModelFactory$2(_pluginManager, configSchema) {
                             ]);
                         },
                     },
-                    {
-                        label: 'Export annotations',
-                        icon: Export,
+                ];
+                if (backendDriver instanceof LocalDriver) {
+                    items.push({
+                        label: 'Import annotations',
+                        icon: InputIcon,
                         onClick: () => {
-                            const [region] = self.regions;
-                            const { assemblyName } = region;
-                            const assembly = self.getAssemblyId(assemblyName);
-                            if (!assembly) {
-                                return;
-                            }
-                            const session = self.session;
                             session.queueDialog((doneCallback) => [
-                                DownloadGFF3,
+                                ImportAnnotations,
                                 {
                                     session,
+                                    assemblyName,
                                     handleClose: () => {
                                         doneCallback();
                                     },
-                                    assembly,
                                 },
                             ]);
                         },
+                    });
+                }
+                items.push({
+                    label: 'Export annotations',
+                    icon: Export,
+                    onClick: () => {
+                        const [region] = self.regions;
+                        const { assemblyName } = region;
+                        const assembly = self.getAssemblyId(assemblyName);
+                        if (!assembly) {
+                            return;
+                        }
+                        const { session } = self;
+                        session.queueDialog((doneCallback) => [
+                            DownloadGFF3,
+                            {
+                                session,
+                                handleClose: () => {
+                                    doneCallback();
+                                },
+                                assembly,
+                            },
+                        ]);
                     },
-                    {
-                        label: 'View Change Log',
-                        icon: TrackChangesIcon,
-                        onClick: () => {
-                            const [region] = self.regions;
-                            const { assemblyName } = region;
-                            const assembly = self.getAssemblyId(assemblyName);
-                            if (!assembly) {
-                                return;
-                            }
-                            const session = self.session;
-                            session.queueDialog((doneCallback) => [
-                                ViewChangeLog,
-                                {
-                                    session,
-                                    handleClose: () => {
-                                        doneCallback();
-                                    },
-                                    assembly,
+                }, {
+                    label: 'View Change Log',
+                    icon: TrackChangesIcon,
+                    onClick: () => {
+                        const [region] = self.regions;
+                        const { assemblyName } = region;
+                        const assembly = self.getAssemblyId(assemblyName);
+                        if (!assembly) {
+                            return;
+                        }
+                        const { session } = self;
+                        session.queueDialog((doneCallback) => [
+                            ViewChangeLog,
+                            {
+                                session,
+                                handleClose: () => {
+                                    doneCallback();
                                 },
-                            ]);
-                        },
+                                assembly,
+                            },
+                        ]);
                     },
-                    {
-                        label: 'View Check Results',
-                        icon: FactCheckIcon,
-                        onClick: () => {
-                            const [region] = self.regions;
-                            const { assemblyName } = region;
-                            const assembly = self.getAssemblyId(assemblyName);
-                            if (!assembly) {
-                                return;
-                            }
-                            const session = self.session;
-                            session.queueDialog((doneCallback) => [
-                                ViewCheckResults,
-                                {
-                                    session,
-                                    handleClose: () => {
-                                        doneCallback();
-                                    },
-                                    assembly,
+                }, {
+                    label: 'View Check Results',
+                    icon: FactCheckIcon,
+                    onClick: () => {
+                        const [region] = self.regions;
+                        const { assemblyName } = region;
+                        const assembly = self.getAssemblyId(assemblyName);
+                        if (!assembly) {
+                            return;
+                        }
+                        const { session } = self;
+                        session.queueDialog((doneCallback) => [
+                            ViewCheckResults,
+                            {
+                                session,
+                                handleClose: () => {
+                                    doneCallback();
                                 },
-                            ]);
-                        },
+                                assembly,
+                            },
+                        ]);
                     },
-                ];
+                });
+                return items;
             },
         };
     })
@@ -10548,8 +10796,7 @@ function baseModelFactory$1(_pluginManager, configSchema) {
             return internetAccounts.find((ia) => configuration.getConf(ia, 'internetAccountId') === internetAccountConfigId);
         },
         get changeManager() {
-            return self.session.apolloDataStore
-                .changeManager;
+            return self.session.apolloDataStore.changeManager;
         },
         getAssemblyId(assemblyName) {
             const { assemblyManager } = self.session;
@@ -10560,12 +10807,10 @@ function baseModelFactory$1(_pluginManager, configSchema) {
             return assembly.name;
         },
         get selectedFeature() {
-            return self.session
-                .apolloSelectedFeature;
+            return self.session.apolloSelectedFeature;
         },
         get hoveredFeature() {
-            return self.session
-                .apolloHoveredFeature;
+            return self.session.apolloHoveredFeature;
         },
         get height() {
             const { sequenceRowHeight } = self;
@@ -10777,11 +11022,9 @@ const FilterTranscripts = mobxReact.observer(function FilterTranscripts({ source
         onUpdate(newForms);
         setExcludedTranscripts(newForms);
     };
-    return (jsxRuntime.jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsxRuntime.jsx(material.Grid, { container: true, spacing: 2, children: jsxRuntime.jsx(material.Grid, { size: 8, children: jsxRuntime.jsx(material.FormGroup, { children: allTranscripts.map((item) => (
-                            // eslint-disable-next-line react/jsx-key
-                            jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
+    return (jsxRuntime.jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsxRuntime.jsx(material.Grid, { container: true, spacing: 2, children: jsxRuntime.jsx(material.Grid, { size: 8, children: jsxRuntime.jsx(material.FormGroup, { children: allTranscripts.map((item) => (jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
                                         handleChange(item);
-                                    }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item }))) }) }) })] }) }));
+                                    }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item }, item))) }) }) })] }) }));
 });
 
 let forwardFillLight = null;
@@ -11627,8 +11870,7 @@ function baseModelFactory(_pluginManager, configSchema) {
             return internetAccounts.find((ia) => configuration.getConf(ia, 'internetAccountId') === internetAccountConfigId);
         },
         get changeManager() {
-            return self.session.apolloDataStore
-                .changeManager;
+            return self.session.apolloDataStore.changeManager;
         },
         getAssemblyId(assemblyName) {
             const { assemblyManager } = self.session;
@@ -11639,12 +11881,10 @@ function baseModelFactory(_pluginManager, configSchema) {
             return assembly.name;
         },
         get selectedFeature() {
-            return self.session
-                .apolloSelectedFeature;
+            return self.session.apolloSelectedFeature;
         },
         get hoveredFeature() {
-            return self.session
-                .apolloHoveredFeature;
+            return self.session.apolloHoveredFeature;
         },
     }))
         .actions((self) => ({
@@ -11772,7 +12012,7 @@ function baseModelFactory(_pluginManager, configSchema) {
                     {
                         label: 'Filter features by type',
                         onClick: () => {
-                            const session = self.session;
+                            const { session } = self;
                             self.session.queueDialog((doneCallback) => [
                                 FilterFeatures,
                                 {
@@ -12210,17 +12450,12 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
             if (!featureTypeOntology) {
                 throw new Error('featureTypeOntology is undefined');
             }
-            let foundFeature;
-            if (self.geneTrackRowNums.includes(row)) {
-                foundFeature = layoutRow.find((f) => f.feature.type == 'exon' &&
+            const foundFeature = self.geneTrackRowNums.includes(row)
+                ? layoutRow.find((f) => f.feature.type == 'exon' &&
                     bp >= f.feature.min &&
-                    bp <= f.feature.max);
-                if (!foundFeature) {
-                    foundFeature = layoutRow.find((f) => bp >= f.feature.min && bp <= f.feature.max);
-                }
-            }
-            else {
-                foundFeature = layoutRow.find((f) => {
+                    bp <= f.feature.max) ??
+                    layoutRow.find((f) => bp >= f.feature.min && bp <= f.feature.max)
+                : layoutRow.find((f) => {
                     const { feature } = f;
                     const featureID = feature.attributes.get('gff_id')?.toString();
                     const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript');
@@ -12242,7 +12477,6 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
                     }
                     return false;
                 });
-            }
             if (!foundFeature) {
                 return mousePosition;
             }
@@ -12565,27 +12799,33 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     const [selectedDestinationFeature, setSelectedDestinationFeature] = React.useState();
     const apolloAssembly = apolloSessionModel.apolloDataStore.assemblies.get(assembly.name);
     const refSeq = apolloAssembly?.refSeqs.get(refSeqId);
-    const features = refSeq?.getFeatures(region.start, region.end);
-    const getDestinationFeatures = () => {
-        const filteredFeatures = [];
-        for (const f of features ?? []) {
-            if (f.min > region.end || f.max < region.start) {
-                continue;
-            }
-            // Destination feature should be of type gene
-            if (featureTypeOntology?.isTypeOf(f.type, 'gene')) {
-                const featureSnapshot = mobxStateTree.getSnapshot(f);
-                filteredFeatures.push(featureSnapshot);
-            }
-        }
-        return filteredFeatures;
-    };
+    const features = React.useMemo(() => refSeq?.getFeatures(region.start, region.end), [refSeq, region.start, region.end]);
     React.useEffect(() => {
+        const getDestinationFeatures = () => {
+            const filteredFeatures = [];
+            for (const f of features ?? []) {
+                if (f.min > region.end || f.max < region.start) {
+                    continue;
+                }
+                // Destination feature should be of type gene
+                if (featureTypeOntology?.isTypeOf(f.type, 'gene')) {
+                    const featureSnapshot = mobxStateTree.getSnapshot(f);
+                    filteredFeatures.push(featureSnapshot);
+                }
+            }
+            return filteredFeatures;
+        };
         setErrorMessage('');
-        const features = getDestinationFeatures();
-        setDestinationFeatures(features);
-        setSelectedDestinationFeature(features[0]);
-    }, [checkedChildrens, parentFeatureChecked, region]);
+        const destinationFeatures = getDestinationFeatures();
+        setDestinationFeatures(destinationFeatures);
+        setSelectedDestinationFeature(destinationFeatures[0]);
+    }, [
+        checkedChildrens,
+        featureTypeOntology,
+        features,
+        parentFeatureChecked,
+        region,
+    ]);
     const handleParentFeatureCheck = (event) => {
         const isChecked = event.target.checked;
         setParentFeatureChecked(isChecked);
@@ -12865,8 +13105,21 @@ function annotationFromPileup(pluggableElement) {
         getAnnotationFeature(jbrowseFeature, refSeqId) {
             const start = jbrowseFeature.get('start');
             const end = jbrowseFeature.get('end');
-            const strand = jbrowseFeature.get('strand');
             const name = jbrowseFeature.get('name');
+            let strand;
+            const tags = jbrowseFeature.get('tags');
+            const { ts, TS, XS } = tags;
+            for (const tag of [ts, TS, XS]) {
+                if (!strand && tag) {
+                    if ([1, '1', '+'].includes(tag)) {
+                        strand = 1;
+                    }
+                    else if ([-1, '-1', '-'].includes(tag)) {
+                        strand = -1;
+                    }
+                }
+            }
+            strand ??= jbrowseFeature.get('strand');
             const cigarData = jbrowseFeature.get('CIGAR');
             const ops = parseCigar(cigarData);
             let position = start;
@@ -12882,9 +13135,7 @@ function annotationFromPileup(pluggableElement) {
                     case 'M':
                     case '=':
                     case 'X': {
-                        if (currentExonStart === undefined) {
-                            currentExonStart = position;
-                        }
+                        currentExonStart ??= position;
                         position += len;
                         break;
                     }
@@ -13298,7 +13549,7 @@ const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(prop
                             : undefined, menuItems: contextMenuItems })] }))] }));
 });
 
-const TrackLines = mobxReact.observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx = 0, }) {
+const TrackLines = mobxReact.observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx, }) {
     const { apolloRowHeight, highestRow, showFeatureLabels } = model;
     const featureLabelSpacer = showFeatureLabels ? 2 : 1;
     return (jsxRuntime.jsx("div", { style: {
@@ -13370,8 +13621,7 @@ const LinearApolloSixFrameDisplay = mobxReact.observer(function LinearApolloSixF
                                         regionNumber: idx,
                                     })?.offsetPx ?? 0) - lgv.offsetPx;
                                     const [feature] = checkResult.featureIds;
-                                    if (!feature ||
-                                        !feature.parent ||
+                                    if (!feature?.parent ||
                                         !looksLikeGene(feature.parent, session)) {
                                         return null;
                                     }
@@ -13623,18 +13873,15 @@ function addTopLevelMenus(rootModel) {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-confusing-void-expression */
 const ApolloJobModel = mobxStateTree.types
     .model('JobsManager', {})
     .views((self) => ({
     get jobStatusWidget() {
         const { widgets } = util.getSession(self);
-        let jobStatusWidget = widgets.get('JobsList');
-        if (!jobStatusWidget) {
+        const jobStatusWidget = widgets.get('JobsList') ??
             // @ts-expect-error: addWidget function not detected on the session
-            jobStatusWidget = util.getSession(self).addWidget('JobsListWidget', 'JobsList');
-        }
+            util.getSession(self).addWidget('JobsListWidget', 'JobsList');
         return jobStatusWidget;
     },
 }))
@@ -13913,19 +14160,15 @@ function clientDataStoreFactory(AnnotationFeatureExtended) {
                     continue;
                 }
                 const { assemblyName, refName } = region;
-                let assembly = self.assemblies.get(assemblyName);
-                if (!assembly) {
-                    assembly = self.assemblies.put({ _id: assemblyName, refSeqs: {} });
-                }
+                const assembly = self.assemblies.get(assemblyName) ??
+                    self.assemblies.put({ _id: assemblyName, refSeqs: {} });
                 const [firstFeature] = features;
-                let ref = assembly.refSeqs.get(firstFeature.refSeq);
-                if (!ref) {
-                    ref = assembly.refSeqs.put({
+                const ref = assembly.refSeqs.get(firstFeature.refSeq) ??
+                    assembly.refSeqs.put({
                         _id: firstFeature.refSeq,
                         name: refName,
                         features: {},
                     });
-                }
                 for (const feature of features) {
                     if (!ref.features.has(feature._id)) {
                         ref.features.put(feature);
@@ -13942,24 +14185,153 @@ function clientDataStoreFactory(AnnotationFeatureExtended) {
                 }
                 const { refSeq, seq } = yield backendDriver.getSequence(region);
                 const { assemblyName, end, refName, start } = region;
-                let assembly = self.assemblies.get(assemblyName);
-                if (!assembly) {
-                    assembly = self.assemblies.put({ _id: assemblyName, refSeqs: {} });
-                }
-                let ref = assembly.refSeqs.get(refSeq);
-                if (!ref) {
-                    ref = assembly.refSeqs.put({
-                        _id: refSeq,
-                        name: refName,
-                        sequence: [],
-                    });
-                }
+                const assembly = self.assemblies.get(assemblyName) ??
+                    self.assemblies.put({ _id: assemblyName, refSeqs: {} });
+                const ref = assembly.refSeqs.get(refSeq) ??
+                    assembly.refSeqs.put({ _id: refSeq, name: refName, sequence: [] });
                 ref.addSequence({ start, stop: end, sequence: seq });
             }
         }),
     }));
 }
 
+function reassignIds(feature) {
+    const newChildren = {};
+    if (feature.children) {
+        for (const child of Object.values(feature.children)) {
+            const newChild = reassignIds(child);
+            newChildren[newChild._id] = newChild;
+        }
+    }
+    return {
+        ...feature,
+        _id: new ObjectID().toHexString(),
+        children: feature.children ? newChildren : undefined,
+    };
+}
+function DuplicateFeatureDialog({ assemblyName, changeManager, existingFeature, featureSnapshot, handleClose, }) {
+    const [choice, setChoice] = React.useState('keepExisting');
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const [submitted, setSubmitted] = React.useState(false);
+    const handleSubmit = async () => {
+        setErrorMessage('');
+        setSubmitted(true);
+        try {
+            if (choice === 'useNew') {
+                const deleteChange = new shared.DeleteFeatureChange({
+                    typeName: 'DeleteFeatureChange',
+                    assembly: assemblyName,
+                    changedIds: [existingFeature._id],
+                    deletedFeature: existingFeature,
+                });
+                await changeManager.submit(deleteChange);
+                const addChange = new shared.AddFeatureChange({
+                    typeName: 'AddFeatureChange',
+                    assembly: assemblyName,
+                    changedIds: [featureSnapshot._id],
+                    addedFeature: featureSnapshot,
+                });
+                await changeManager.submit(addChange);
+            }
+            else if (choice === 'keepBoth') {
+                const newSnapshot = reassignIds(featureSnapshot);
+                const addChange = new shared.AddFeatureChange({
+                    typeName: 'AddFeatureChange',
+                    assembly: assemblyName,
+                    changedIds: [newSnapshot._id],
+                    addedFeature: newSnapshot,
+                });
+                await changeManager.submit(addChange);
+            }
+            handleClose();
+        }
+        catch (error) {
+            setErrorMessage(String(error));
+            setSubmitted(false);
+        }
+    };
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Duplicate Feature Detected", handleClose: handleClose, maxWidth: "sm", fullWidth: true, children: [jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsxs(material.DialogContentText, { children: ["A feature with ID \u201C", featureSnapshot._id, "\u201D already exists. How would you like to resolve this conflict?"] }), jsxRuntime.jsxs(material.FormControl, { component: "fieldset", sx: { mt: 2 }, children: [jsxRuntime.jsx(material.FormLabel, { component: "legend", children: "Resolution" }), jsxRuntime.jsxs(material.RadioGroup, { value: choice, onChange: (e) => {
+                                    setChoice(e.target.value);
+                                }, children: [jsxRuntime.jsx(material.FormControlLabel, { value: "keepExisting", control: jsxRuntime.jsx(material.Radio, {}), label: "Keep the existing feature" }), jsxRuntime.jsx(material.FormControlLabel, { value: "useNew", control: jsxRuntime.jsx(material.Radio, {}), label: "Replace with the new feature" }), jsxRuntime.jsx(material.FormControlLabel, { value: "keepBoth", control: jsxRuntime.jsx(material.Radio, {}), label: "Keep both (assign new IDs to the incoming feature)" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContentText, { color: "error", sx: { mt: 1 }, children: errorMessage })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", onClick: handleSubmit, disabled: submitted, children: "Confirm" }), jsxRuntime.jsx(material.Button, { onClick: handleClose, disabled: submitted, children: "Cancel" })] })] }));
+}
+
+function fromUrlSafeBase64(urlSafeBase64) {
+    let base64 = urlSafeBase64.replaceAll('-', '+').replaceAll('_', '/');
+    const pad = base64.length % 4;
+    if (pad) {
+        base64 += '='.repeat(4 - pad);
+    }
+    return base64;
+}
+// Base64 decode + decompress
+async function decompress(encoded) {
+    const binaryString = atob(encoded);
+    // eslint-disable-next-line unicorn/prefer-code-point
+    const bytes = Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
+    const stream = new Blob([bytes]).stream();
+    const decompressionStream = new DecompressionStream('gzip');
+    const decompressedStream = stream.pipeThrough(decompressionStream);
+    const response = new Response(decompressedStream);
+    const decompressed = await response.arrayBuffer();
+    return JSON.parse(new TextDecoder().decode(decompressed));
+}
+async function handleApolloFeaturesUrlParam(encodedFeatures, apolloDataStore, assemblyManager, session) {
+    const base64 = fromUrlSafeBase64(encodedFeatures);
+    const decompressed = await decompress(base64);
+    const featuresData = decompressed;
+    for (const [assemblyName, featureSnapshots] of Object.entries(featuresData)) {
+        const backendDriver = apolloDataStore.getBackendDriver(assemblyName);
+        if (!(backendDriver instanceof LocalDriver)) {
+            continue;
+        }
+        const assembly = (await assemblyManager.waitForAssembly(assemblyName));
+        if (!assembly) {
+            throw new Error(`Assembly not found: "${assemblyName}"`);
+        }
+        const { regions } = assembly;
+        if (!regions) {
+            throw new Error(`Assembly not found: "${assemblyName}"`);
+        }
+        const refNames = regions.map((r) => r.refName);
+        const db = await openDb(assemblyName, refNames);
+        for (const featureSnapshot of featureSnapshots) {
+            const storeName = `features-${featureSnapshot.refSeq}`;
+            const existing = (await db.get(storeName, featureSnapshot._id));
+            if (existing === undefined) {
+                const change = new shared.AddFeatureChange({
+                    typeName: 'AddFeatureChange',
+                    assembly: assemblyName,
+                    changedIds: [featureSnapshot._id],
+                    addedFeature: featureSnapshot,
+                });
+                await apolloDataStore.changeManager.submit(change);
+            }
+            else {
+                // get rid of undefined values in JSON
+                // eslint-disable-next-line unicorn/prefer-structured-clone
+                const existingFeature = JSON.parse(JSON.stringify(existing));
+                if (!equal(featureSnapshot, existingFeature)) {
+                    await new Promise((resolve) => {
+                        session.queueDialog((doneCallback) => [
+                            DuplicateFeatureDialog,
+                            {
+                                featureSnapshot,
+                                existingFeature,
+                                assemblyName,
+                                changeManager: apolloDataStore.changeManager,
+                                handleClose: () => {
+                                    doneCallback();
+                                    resolve();
+                                },
+                            },
+                        ]);
+                    });
+                }
+            }
+        }
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 function extendSession(pluginManager, sessionModel) {
@@ -14045,8 +14417,7 @@ function extendSession(pluginManager, sessionModel) {
                     for (const block of dynamicBlocks.contentBlocks) {
                         const { assemblyName, end, refName, start } = block;
                         const assembly = self.apolloDataStore.assemblies.get(assemblyName);
-                        if (assembly &&
-                            assembly.backendDriverType === 'CollaborationServerDriver') {
+                        if (assembly?.backendDriverType === 'CollaborationServerDriver') {
                             locations.push({ assemblyName, refName, start, end });
                         }
                     }
@@ -14105,8 +14476,8 @@ function extendSession(pluginManager, sessionModel) {
                         for (const block of dynamicBlocks.contentBlocks) {
                             const { assemblyName, end, refName, start } = block;
                             const assembly = self.apolloDataStore.assemblies.get(assemblyName);
-                            if (assembly &&
-                                assembly.backendDriverType === 'CollaborationServerDriver') {
+                            if (assembly?.backendDriverType ===
+                                'CollaborationServerDriver') {
                                 locations.push({ assemblyName, refName, start, end });
                             }
                         }
@@ -14226,6 +14597,37 @@ function extendSession(pluginManager, sessionModel) {
         beforeDestroy() {
             self.abortController.abort(new DOMException('Clean up Apollo session', 'AbortError'));
         },
+    }))
+        .actions((self) => ({
+        async afterCreate() {
+            if (util.isElectron) {
+                return;
+            }
+            const url = new URL(globalThis.location.href);
+            const apolloFeatures = url.searchParams.get('apolloFeatures');
+            if (!apolloFeatures) {
+                return;
+            }
+            const { assemblyManager } = self;
+            await handleApolloFeaturesUrlParam(apolloFeatures, self.apolloDataStore, assemblyManager, self);
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            const updatedURL = new URL(globalThis.location.href);
+            updatedURL.searchParams.delete('apolloFeatures');
+            globalThis.history.replaceState(null, '', updatedURL.toString());
+        },
+        afterAttach() {
+            mobxStateTree.addDisposer(self, mobx.autorun((reaction) => {
+                const { focusedViewId, activeWidgets } = self;
+                if (!(focusedViewId && activeWidgets)) {
+                    return;
+                }
+                const trackSelector = activeWidgets.get('hierarchicalTrackSelector');
+                // @ts-expect-error Don't have type for track selector
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                trackSelector?.setView(focusedViewId);
+                reaction.dispose();
+            }));
+        },
     }))
         .views((self) => {
         const superTrackActions = self
@@ -14357,7 +14759,6 @@ function extendSession(pluginManager, sessionModel) {
 }
 
 /* eslint-disable @typescript-eslint/unbound-method */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function isApolloMessageData(data) {
@@ -14545,10 +14946,10 @@ class ApolloPlugin extends Plugin {
         });
         if (!inWebWorker) {
             pluginManager.addToExtensionPoint('Core-extendWorker', (handle) => {
-                if (!('on' in handle && handle.on)) {
+                if (!('on' in handle.client && handle.client.on)) {
                     return handle;
                 }
-                handle.on('apollo', async (event) => {
+                handle.client.on('apollo', async (event) => {
                     if (!isApolloMessageData(event)) {
                         return;
                     }
@@ -14566,7 +14967,7 @@ class ApolloPlugin extends Plugin {
                                 break;
                             }
                             const { seq: sequence } = await backendDriver.getSequence(region);
-                            handle.workers[0].postMessage({
+                            handle.worker.postMessage({
                                 apollo,
                                 messageId,
                                 sequence,
@@ -14584,7 +14985,7 @@ class ApolloPlugin extends Plugin {
                                 break;
                             }
                             const regions = await backendDriver.getRegions(assembly);
-                            handle.workers[0].postMessage({
+                            handle.worker.postMessage({
                                 apollo,
                                 messageId,
                                 regions,
@@ -14602,7 +15003,7 @@ class ApolloPlugin extends Plugin {
                                 break;
                             }
                             const refNameAliases = await backendDriver.getRefNameAliases(assembly);
-                            handle.workers[0].postMessage({
+                            handle.worker.postMessage({
                                 apollo,
                                 messageId,
                                 refNameAliases,