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

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 import { isFeatureChange, checkRegistry, isAssemblySpecificChange, Change, changeRegistry } from '@apollo-annotation/common';
-import { AddFeatureChange, FeatureAttributeChange, DeleteFeatureChange, LocationStartChange, LocationEndChange, AddAssemblyFromExternalChange, AddAssemblyAndFeaturesFromFileChange, AddAssemblyFromFileChange, AddAssemblyAliasesChange, ValidationResultSet, isDeleteFeatureChange, stringifyAttributes, attributesToRecords, validationRegistry, makeUserSessionId, DeleteAssemblyChange, annotationFeatureToGFF3, AddFeaturesFromFileChange, UserChange, DeleteUserChange, MergeExonsChange, MergeTranscriptsChange, AddRefSeqAliasesChange, SplitExonChange, getDecodedToken, isGFFInternalAttribute, isGFFColumnInternal, internalToGFF, gffInternalToColumn, gffToInternal, gffColumnToInternal, TypeChange, StrandChange, splitStringIntoChunks, gff3ToAnnotationFeature, filterJBrowseConfig, ImportJBrowseConfigChange, changes, CDSCheck, TranscriptCheck, CoreValidation, ParentChildValidation } from '@apollo-annotation/shared';
+import { AddFeatureChange, FeatureAttributeChange, DeleteFeatureChange, LocationStartChange, LocationEndChange, AddAssemblyFromExternalChange, AddAssemblyAndFeaturesFromFileChange, AddAssemblyFromFileChange, AddAssemblyAliasesChange, ValidationResultSet, isDeleteFeatureChange, stringifyAttributes, attributesToRecords, validationRegistry, makeUserSessionId, DeleteAssemblyChange, annotationFeatureToGFF3, gff3ToAnnotationFeature, AddFeaturesFromFileChange, UserChange, DeleteUserChange, MergeExonsChange, MergeTranscriptsChange, AddRefSeqAliasesChange, SplitExonChange, getDecodedToken, isGFFInternalAttribute, isGFFColumnInternal, internalToGFF, gffInternalToColumn, gffToInternal, gffColumnToInternal, TypeChange, StrandChange, splitStringIntoChunks, filterJBrowseConfig, ImportJBrowseConfigChange, changes, CDSCheck, TranscriptCheck, CoreValidation, ParentChildValidation } from '@apollo-annotation/shared';
 import Plugin from '@jbrowse/core/Plugin';
 import { ConfigurationSchema, readConfObject, getConf, ConfigurationReference } from '@jbrowse/core/configuration';
 import { BaseInternetAccountConfig, InternetAccount, TextSearchAdapterType, BaseDisplay, WidgetType, createBaseTrackConfig, TrackType, createBaseTrackModel, InternetAccountType, DisplayType } from '@jbrowse/core/pluggableElementTypes';
-import { isUriLocation, isLocalPathLocation, isSessionModelWithWidgets, getSession, getEnv, isElectron, isAbstractMenuManager, revcom, defaultCodonTable, getFrame, getContainingView, doesIntersect2, intersection2, measureText } from '@jbrowse/core/util';
+import { isUriLocation, isLocalPathLocation, isSessionModelWithWidgets, revcom, getSession, getEnv, isElectron, isAbstractMenuManager, defaultCodonTable, getFrame, getContainingView, doesIntersect2, intersection2, measureText } from '@jbrowse/core/util';
 import AddIcon from '@mui/icons-material/Add';
-import { DialogTitle, IconButton, Autocomplete, TextField, DialogContent, DialogActions, Button, DialogContentText, Select, MenuItem, LinearProgress, Accordion, AccordionSummary, Typography, AccordionDetails, FormGroup, FormControlLabel, Box, Tooltip as Tooltip$1, Checkbox, Table, TableBody, TableRow, TableCell, InputAdornment, FormHelperText, FormControl, InputLabel, RadioGroup, Radio, SvgIcon, TableContainer, Paper, TableHead, Grid, Divider, Chip, List, ListItem, ListItemText, Menu, ListItemIcon, useTheme, alpha, createTheme, Alert, Badge, Avatar, CircularProgress } from '@mui/material';
+import { DialogTitle, IconButton, Autocomplete, TextField, DialogContent, DialogActions, Button, DialogContentText, Select, MenuItem, LinearProgress, Accordion, AccordionSummary, Typography, AccordionDetails, FormGroup, FormControlLabel, Box, Tooltip as Tooltip$1, Checkbox, Table, TableBody, TableRow, TableCell, InputAdornment, FormHelperText, FormControl, RadioGroup, Radio, InputLabel, SvgIcon, TableContainer, Paper, TableHead, Grid, Divider, Chip, List, ListItem, ListItemText, Menu, ListItemIcon, useTheme, alpha, createTheme, Alert, Badge, Avatar, CircularProgress, FormLabel } from '@mui/material';
 import { types, addDisposer, getSnapshot, flow, isAlive, getRoot, getParent, cast, resolveIdentifier, getParentOfType, applySnapshot } from '@jbrowse/mobx-state-tree';
 import { autorun, entries, observable, flow as flow$1, when } from 'mobx';
 import { io } from 'socket.io-client';
@@ -33,10 +33,11 @@ import equal from 'fast-deep-equal/es6';
 import { Dialog as Dialog$1, Menu as Menu$1, BaseTooltip } from '@jbrowse/core/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import { observer } from 'mobx-react';
-import { DataGrid, GridToolbar, GridActionsCellItem } from '@mui/x-data-grid';
-import { GFFFormattingTransformer } from '@gmod/gff';
+import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
+import { GFFFormattingTransformer, GFFTransformer } from '@gmod/gff';
 import { saveAs } from 'file-saver';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import BusinessIcon from '@mui/icons-material/Business';
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
 import { BaseAdapter, BaseSequenceAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
 import { nanoid } from 'nanoid';
@@ -49,9 +50,9 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import { AnnotationFeatureModel, CheckResult, ApolloAssembly, ApolloRefSeq } from '@apollo-annotation/mst';
 import styled from '@emotion/styled';
+import RemoveIcon from '@mui/icons-material/Remove';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import ContentCutIcon from '@mui/icons-material/ContentCut';
-import RemoveIcon from '@mui/icons-material/Remove';
 import ClearIcon from '@mui/icons-material/Clear';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
@@ -65,7 +66,7 @@ import RedoIcon from '@mui/icons-material/Redo';
 import UndoIcon from '@mui/icons-material/Undo';
 import SaveIcon from '@mui/icons-material/Save';
 
-var version = "1.0.1";
+var version = "1.1.1";
 
 const ApolloConfigSchema = ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -1368,9 +1369,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;
 }
 
@@ -1551,7 +1550,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;
             }
@@ -1580,7 +1579,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;
@@ -1918,8 +1917,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') {
@@ -2172,7 +2170,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;
@@ -2778,6 +2776,153 @@ function AddAssemblyAliases({ changeManager, handleClose, session, }) {
                         }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }) }) }), errorMessage ? (jsx(DialogContent, { children: jsx(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] = useState('longest-orf');
+    const [minInput, setMinInput] = useState('');
+    const [maxInput, setMaxInput] = useState('');
+    const [errorMessage, setErrorMessage] = 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 ? 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 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 (jsxs(Dialog, { open: true, title: "Add coding sequence", handleClose: handleClose, maxWidth: false, "data-testid": "add-coding-sequence", children: [jsxs("form", { onSubmit: (event) => {
+                    void onSubmit(event);
+                }, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsx(FormControl, { children: jsxs(RadioGroup, { value: method, onChange: (e) => {
+                                        setMethod(e.target.value);
+                                    }, children: [jsx(FormControlLabel, { value: "longest-orf", control: jsx(Radio, {}), label: "Calculate longest open reading frame" }), jsx(FormControlLabel, { value: "manual", control: jsx(Radio, {}), label: "Manual" })] }) }), method === 'manual' ? (jsxs(Fragment, { children: [jsx(TextField, { margin: "dense", id: "cds-min", label: "Min", type: "number", fullWidth: true, variant: "outlined", value: minInput, onChange: (e) => {
+                                            setMinInput(e.target.value);
+                                        } }), jsx(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] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: submitDisabled, children: "Submit" }), jsx(Button, { variant: "outlined", type: "button", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
+}
+
 class BackendDriver {
     clientStore;
     constructor(clientStore) {
@@ -2850,7 +2995,7 @@ class LocalDriver extends BackendDriver {
     async getSequence(region) {
         const session = 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}"`);
         }
@@ -2881,7 +3026,7 @@ class LocalDriver extends BackendDriver {
     async getRegions(assemblyName) {
         const session = 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}"`);
         }
@@ -2897,7 +3042,7 @@ class LocalDriver extends BackendDriver {
     async getRefNameAliases(assemblyName) {
         const session = 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}"`);
         }
@@ -3556,7 +3701,7 @@ class CollaborationServerDriver extends BackendDriver {
                 const localSessionId = 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
                 }
@@ -3604,14 +3749,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 };
@@ -3968,7 +4109,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)) {
@@ -3989,7 +4130,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
 function DeleteAssembly({ changeManager, handleClose, session, }) {
     const { internetAccounts } = getRoot(session);
     const [errorMessage, setErrorMessage] = useState('');
-    const [confirmDelete, setconfirmDelete] = useState(false);
+    const [confirmDelete, setConfirmDelete] = useState(false);
     const [submitted, setSubmitted] = useState(false);
     const apolloInternetAccounts = internetAccounts.filter((ia) => ia.type === 'ApolloInternetAccount');
     if (apolloInternetAccounts.length === 0) {
@@ -4030,7 +4171,7 @@ function DeleteAssembly({ changeManager, handleClose, session, }) {
         event.preventDefault();
     }
     return (jsxs(Dialog, { open: true, title: "Delete Assembly", handleClose: handleClose, maxWidth: false, "data-testid": "delete-assembly", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [apolloInternetAccounts.length > 1 ? (jsxs(Fragment, { children: [jsx(DialogContentText, { children: "Select account" }), jsx(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage, children: internetAccounts.map((option) => (jsx(MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsx(DialogContentText, { children: "Select assembly" }), jsx(Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsx(DialogContentText, { children: jsx("strong", { style: { color: 'red' }, children: "NOTE: All assembly data will be deleted and this operation cannot be undone!" }) }), jsx(FormGroup, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: confirmDelete, onChange: () => {
-                                            setconfirmDelete(!confirmDelete);
+                                            setConfirmDelete(!confirmDelete);
                                         } }), label: "I understand that all assembly data will be deleted" }) })] }), jsxs(DialogActions, { children: [jsx(Button, { disabled: !selectedAssembly || !confirmDelete, variant: "contained", type: "submit", children: "Delete" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
@@ -4039,7 +4180,7 @@ function Export(props) {
     return (jsx(SvgIcon, { viewBox: "0 0 24 24", ...props, children: 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] = useState(false);
+    const [includeFASTA, setIncludeFASTA] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
     const { getInternetAccount } = session.apolloDataStore;
     const { assemblyManager } = session;
@@ -4088,7 +4229,7 @@ function DownloadGFF3({ handleClose, session, assembly: assemblyName, }) {
         window.open(exportUri, '_blank');
     }
     return (jsxs(Dialog, { open: true, title: "Export annotations", handleClose: handleClose, maxWidth: false, "data-testid": "download-gff3", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxs(DialogContentText, { children: ["Exporting annotations for ", assemblyName] }), jsx(FormGroup, { children: jsx(FormControlLabel, { "data-testid": "include-fasta-checkbox", control: jsx(Checkbox, { checked: includeFASTA, onChange: () => {
-                                            setincludeFASTA(!includeFASTA);
+                                            setIncludeFASTA(!includeFASTA);
                                         }, disabled: !internetAccountConfigId }), label: "Include fasta sequence in GFF output" }) })] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", children: "Download" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 function getAssemblyGFF3Stream(assemblyName) {
@@ -4127,6 +4268,49 @@ async function* getFeaturesForAssembly(assemblyName) {
     db.close();
 }
 
+function ImportAnnotations({ assemblyName, handleClose, session, }) {
+    const { changeManager } = session.apolloDataStore;
+    const [file, setFile] = useState();
+    const [errorMessage, setErrorMessage] = useState('');
+    const [loading, setLoading] = 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 GFFTransformer({ parseSequences: false })));
+            for await (const value of stream) {
+                const annotationFeature = gff3ToAnnotationFeature(value);
+                const change = new AddFeatureChange({
+                    changedIds: [annotationFeature._id],
+                    typeName: 'AddFeatureChange',
+                    assembly: assemblyName,
+                    addedFeature: annotationFeature,
+                });
+                await changeManager.submit(change);
+            }
+            handleClose();
+        }
+        catch (error) {
+            setErrorMessage(String(error));
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    return (jsxs(Dialog, { open: true, title: "Import annotations", handleClose: handleClose, children: [loading ? jsx(LinearProgress, {}) : null, jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { children: [jsx(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." }), jsx("input", { type: "file", accept: ".gff,.gff3", onChange: handleChangeFile, disabled: loading }), errorMessage ? (jsx(DialogContentText, { color: "error", children: errorMessage })) : null] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: !file || loading, children: "Import" }), jsx(Button, { variant: "outlined", onClick: handleClose, children: "Cancel" })] })] })] }));
+}
+
 function ImportFeatures({ changeManager, handleClose, session, }) {
     const { apolloDataStore } = session;
     const [file, setFile] = useState();
@@ -4530,7 +4714,7 @@ function ManageUsers({ changeManager, handleClose, session, }) {
         });
         return newRow;
     }
-    return (jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxs(DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxs(Fragment, { children: [jsx(DialogContentText, { children: "Select account" }), jsx(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsx(MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsx("div", { style: { height: '100%', width: '100%' }, children: jsx(DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: GridToolbar }, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
+    return (jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxs(DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxs(Fragment, { children: [jsx(DialogContentText, { children: "Select account" }), jsx(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsx(MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsx("div", { style: { height: '100%', width: '100%' }, children: jsx(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));
                             } }) })] }), jsx(DialogActions, { children: jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
@@ -4840,12 +5024,13 @@ const AddRefSeqAliases = observer(function AddRefSeqAliases({ changeManager, han
     const [enableSubmit, setEnableSubmit] = useState(false);
     const [selectedAssembly, setSelectedAssembly] = useState();
     const [selectedRows, setSelectedRows] = useState([]);
-    const [refNameAliasMap, setRefNameAliasMap] = useState(new Map());
+    const [refNameAliasMap, setRefNameAliasMap] = useState(() => new Map());
     const { apolloDataStore } = session;
     const { collaborationServerDriver } = apolloDataStore;
     const assemblies = collaborationServerDriver.getAssemblies();
     useEffect(() => {
         if (assemblies.length > 0) {
+            // eslint-disable-next-line @eslint-react/set-state-in-effect
             setSelectedAssembly(assemblies[0]);
             collaborationServerDriver
                 .getRefNameAliases(assemblies[0].name)
@@ -4857,7 +5042,7 @@ const AddRefSeqAliases = observer(function AddRefSeqAliases({ changeManager, han
                 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();
@@ -5262,17 +5447,23 @@ const useStyles$d = makeStyles()((theme) => ({
 }));
 function GoogleButton(props) {
     const { classes } = useStyles$d();
-    const { disabled } = props;
-    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(Google, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Google" }));
+    const { message } = props;
+    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(Google, {}), ...props, children: message }));
 }
 function MicrosoftButton(props) {
     const { classes } = useStyles$d();
-    const { disabled } = props;
-    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(Microsoft, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Microsoft" }));
+    const { message } = props;
+    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(Microsoft, {}), ...props, children: message }));
 }
 function GuestButton(props) {
     const { classes } = useStyles$d();
-    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: "Continue as Guest" }));
+    const { message } = props;
+    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: message }));
+}
+function GenericButton(props) {
+    const { classes } = useStyles$d();
+    const { message } = props;
+    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(BusinessIcon, { fontSize: "small" }), ...props, children: message }));
 }
 
 const useStyles$c = makeStyles()((theme) => ({
@@ -5284,7 +5475,7 @@ const useStyles$c = makeStyles()((theme) => ({
 const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
     const { classes } = useStyles$c();
     const [errorMessage, setErrorMessage] = useState('');
-    const [loginTypes, setLoginTypes] = useState([]);
+    const [loginTypes, setLoginTypes] = useState(null);
     useEffect(() => {
         const controller = new AbortController();
         const { signal } = controller;
@@ -5298,6 +5489,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 (!isAbortException(error)) {
@@ -5309,26 +5503,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 (jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: [allowGoogle ? (jsx(GoogleButton, { disabled: !allowGoogle, onClick: () => {
-                            handleClick('google');
-                        } })) : null, allowMicrosoft ? (jsx(MicrosoftButton, { disabled: !allowMicrosoft, onClick: () => {
-                            handleClick('microsoft');
-                        } })) : null, allowGuest ? (jsxs(Fragment, { children: [jsx(Divider, { className: classes.divider }), jsx(GuestButton, { onClick: () => {
-                                    handleClick('guest');
-                                } })] })) : null] }), jsx(DialogActions, { children: jsx(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 (jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsx(DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: loginTypes.map((loginType) => {
+                    if (loginType.name === 'google') {
+                        return (jsx(GoogleButton, { message: loginType.message, onClick: () => {
+                                handleClick(loginType);
+                            } }, loginType.name));
+                    }
+                    if (loginType.name === 'microsoft') {
+                        return (jsx(MicrosoftButton, { message: loginType.message, onClick: () => {
+                                handleClick(loginType);
+                            } }, loginType.name));
+                    }
+                    if (loginType.name === 'guest') {
+                        return (jsxs(React.Fragment, { children: [jsx(Divider, { className: classes.divider }), jsx(GuestButton, { message: loginType.message, onClick: () => {
+                                        handleClick(loginType);
+                                    } })] }, loginType.name));
+                    }
+                    return (jsx(GenericButton, { message: loginType.message, onClick: () => {
+                            handleClick(loginType);
+                        } }, loginType.name));
+                }) }), jsx(DialogActions, { children: jsx(Button, { variant: "outlined", type: "submit", onClick: () => {
                         handleClose();
                     }, children: "Cancel" }) }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 };
@@ -5524,13 +5727,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 });
@@ -5651,7 +5854,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);
@@ -6271,7 +6474,9 @@ const DefaultAttributeEditor = observer(function DefaultAttributeEditor({ attrib
             return newValues;
         });
     }
-    return (jsxs(Fragment, { children: [newValues.map((value, idx) => (jsxs("div", { style: { display: 'flex' }, children: [jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
+    return (jsxs(Fragment, { children: [newValues.map((value, idx) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsxs("div", { style: { display: 'flex' }, children: [jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
                             updateValue(idx, editedValue);
                         }, variant: "outlined", fullWidth: true }), jsx(IconButton, { "aria-label": "delete", size: "medium", edge: "end", onClick: () => {
                             deleteValue(idx);
@@ -6283,7 +6488,9 @@ const DefaultAttributeEditor = observer(function DefaultAttributeEditor({ attrib
 });
 
 function DefaultAttributeViewer({ values }) {
-    return (jsx(Fragment, { children: values?.map((value, idx) => (jsx(Typography, { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
+    return (jsx(Fragment, { children: values?.map((value, idx) => (jsx(Typography
+        // eslint-disable-next-line @eslint-react/no-array-index-key
+        , { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
 }
 
 const useStyles$a = makeStyles()((theme) => ({
@@ -6589,6 +6796,7 @@ const ApolloFeatureDetailsWidget = observer(function ApolloFeatureDetailsWidget(
     const { classes } = useStyles$8();
     const [panelState, setPanelState] = useState(['attributes']);
     useEffect(() => {
+        // eslint-disable-next-line @eslint-react/set-state-in-effect
         setPanelState(['attributes']);
     }, [feature]);
     if (!(feature && currentAssembly)) {
@@ -6890,7 +7098,7 @@ const TranscriptSequence = observer(function TranscriptSequence({ assembly, feat
         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;
@@ -6953,19 +7161,6 @@ const TranscriptSequence = observer(function TranscriptSequence({ assembly, feat
                         .join(';'), "(strand=", feature.strand === 1 ? '+' : '-', ";length=", getSequenceLength(sequenceSegments), ")", 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',
@@ -6987,6 +7182,195 @@ const StyledAccordionSummary$1 = styled(AccordionSummary)(() => ({
         maxHeight: 30,
     },
 }));
+function Translation({ changeInProgress, cdsLocations, refData, strand, 
+// eslint-disable-next-line @typescript-eslint/unbound-method
+updateCDSLocation, cdsMin, cdsMax, feature, session, }) {
+    const seqRef = 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 ? 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 = 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 (jsx("div", { children: jsxs(Accordion, { children: [jsx(StyledAccordionSummary$1, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsx(Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxs(AccordionDetails, { children: [jsx(SequenceContainer, { children: jsx(Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: proteinSequence.map((protein, idx) => {
+                                    const codonGenomicPos = idx * 3;
+                                    if (protein === 'M') {
+                                        return (jsx(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 (jsx(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 (jsx(Typography, { component: 'span', children: protein }, codonGenomicPos));
+                                }) }) }), jsxs("div", { style: {
+                                marginTop: 10,
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 10,
+                            }, children: [jsx(Tooltip$1, { title: "Copy", children: jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsx(Tooltip$1, { title: "Trim", children: jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: 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 (jsx("div", { children: strand === 1 ? (jsx(AddIcon, {})) : strand === -1 ? (jsx(RemoveIcon, {})) : (jsx(Typography, { component: 'span', children: "N/A" })) }));
@@ -7005,7 +7389,6 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
     const refData = currentAssembly?.getByRefName(refName);
     const { changeManager } = session.apolloDataStore;
-    const seqRef = useRef(null);
     const { changeInProgress } = session;
     if (!refData) {
         return null;
@@ -7432,184 +7815,6 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
             },
         ];
     };
-    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 = revcom(wholeSequence);
-        }
-        const elements = [];
-        for (let codonGenomicPos = 0; codonGenomicPos < wholeSequence.length; codonGenomicPos += 3) {
-            const codonSeq = wholeSequence
-                .slice(codonGenomicPos, codonGenomicPos + 3)
-                .toUpperCase();
-            const protein = defaultCodonTable[codonSeq] || '&';
-            // highlight start codon and stop codons
-            if (codonSeq === 'ATG') {
-                elements.push(jsx(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(jsx(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
-                jsx(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 (jsxs("div", { children: [cdsPresent && (jsx("div", { children: jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsx(Grid, { size: 1 }), strand === 1 ? (jsx(Grid, { size: 4, children: 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 }) })) : (jsx(Grid, { size: 4, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
@@ -7619,8 +7824,12 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
                                 }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsx(Grid, { size: 4, children: 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 }) })), jsx(Grid, { size: 1 })] }) })), jsxs("div", { style: { marginTop: 5, marginBottom: 10 }, children: [jsx("div", { style: { textAlign: 'center' }, children: jsx(Typography, { children: "Exons" }) }), transcriptExonParts.map((loc, index) => {
-                        return (jsx("div", { children: loc.type === 'exon' && (jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsx(Grid, { size: 1, children: index !== 0 &&
-                                            getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsx(Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                        return (
+                        // eslint-disable-next-line @eslint-react/no-array-index-key
+                        jsx("div", { children: loc.type === 'exon' && (jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsx(Grid, { size: 1, children: index !== 0 &&
+                                            getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsx(Typography
+                                            // eslint-disable-next-line @eslint-react/no-array-index-key
+                                            , { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                                                 return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
                                             }, disabled: changeInProgress }) })) : (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                                                 return handleExonLocationChange(loc.max, newLocation, feature, false);
@@ -7629,14 +7838,10 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
                                             }, disabled: changeInProgress }) })) : (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                                                 return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
                                             }, disabled: changeInProgress }) })), jsx(Grid, { size: 1, children: index !== transcriptExonParts.length - 1 &&
-                                            getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsx(Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
-                    })] }), cdsPresent && (jsx("div", { children: jsxs(Accordion, { children: [jsx(StyledAccordionSummary$1, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsx(Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxs(AccordionDetails, { children: [jsx(SequenceContainer, { children: jsx(Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: getTranslationSequence() }) }), jsxs("div", { style: {
-                                        marginTop: 10,
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        gap: 10,
-                                    }, children: [jsx(Tooltip$1, { title: "Copy", children: jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsx(Tooltip$1, { title: "Trim", children: jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsx(ContentCutIcon, { style: { fontSize: 15 } }) }) })] })] })] }) }))] }));
+                                            getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsx(Typography
+                                            // eslint-disable-next-line @eslint-react/no-array-index-key
+                                            , { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
+                    })] }), cdsPresent && (jsx(Translation, { changeInProgress: changeInProgress, cdsLocations: cdsLocations, refData: refData, strand: strand, updateCDSLocation: updateCDSLocation, cdsMin: cdsMin, cdsMax: cdsMax, feature: feature, session: session }))] }));
 });
 
 const HeaderTableCell = styled(TableCell)(() => ({
@@ -7673,7 +7878,7 @@ const ApolloTranscriptDetailsWidget = observer(function ApolloTranscriptDetails(
     const { assembly, feature, refName } = model;
     useEffect(() => {
         setPanelState(DEFAULT_PANELS);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line @eslint-react/exhaustive-deps
     }, [feature]);
     const session = getSession(model);
     const { pluginManager } = getEnv(session);
@@ -7732,8 +7937,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);
@@ -7829,7 +8034,7 @@ const NumberCell = observer(function NumberCell({ initialValue, notifyError, onC
         if (initialValue !== value) {
             setValue(initialValue);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line @eslint-react/exhaustive-deps
     }, [initialValue]);
     useEffect(() => {
         if (blur) {
@@ -8670,8 +8875,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 = readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', { featureType: gene.type });
-        selectedColor = alpha(theme.palette.background.paper, 0.6);
+        const selectedColor = readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', {
+            featureType: gene.type,
+        }) ?? alpha(theme.palette.background.paper, 0.6);
         ctx.fillStyle = selectedColor;
         ctx.fillRect(left, top, width, height);
     }
@@ -8944,7 +9150,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);
@@ -8954,7 +9160,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,
@@ -8974,7 +9180,7 @@ function getContextMenuItems$1(display, feature) {
                         doneCallback();
                     },
                     changeManager,
-                    sourceFeature: feature,
+                    sourceFeature: transcript,
                     sourceAssemblyId: currentAssemblyId,
                     selectedFeature,
                     setSelectedFeature: (feature) => {
@@ -8994,7 +9200,7 @@ function getContextMenuItems$1(display, feature) {
                         doneCallback();
                     },
                     changeManager,
-                    sourceFeature: feature,
+                    sourceFeature: transcript,
                     sourceAssemblyId: currentAssemblyId,
                     selectedFeature,
                     setSelectedFeature: (feature) => {
@@ -9004,6 +9210,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"
@@ -9181,7 +9412,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';
 }
@@ -9278,8 +9509,7 @@ function baseModelFactory$2(_pluginManager, configSchema) {
             return internetAccounts.find((ia) => getConf(ia, 'internetAccountId') === internetAccountConfigId);
         },
         get changeManager() {
-            return self.session.apolloDataStore
-                .changeManager;
+            return self.session.apolloDataStore.changeManager;
         },
         getAssemblyId(assemblyName) {
             const { assemblyManager } = self.session;
@@ -9290,12 +9520,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) => ({
@@ -9340,8 +9568,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',
@@ -9393,7 +9624,7 @@ function baseModelFactory$2(_pluginManager, configSchema) {
                     {
                         label: 'Filter features by type',
                         onClick: () => {
-                            const session = self.session;
+                            const { session } = self;
                             self.session.queueDialog((doneCallback) => [
                                 FilterFeatures,
                                 {
@@ -9409,76 +9640,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;
             },
         };
     })
@@ -10544,8 +10792,7 @@ function baseModelFactory$1(_pluginManager, configSchema) {
             return internetAccounts.find((ia) => getConf(ia, 'internetAccountId') === internetAccountConfigId);
         },
         get changeManager() {
-            return self.session.apolloDataStore
-                .changeManager;
+            return self.session.apolloDataStore.changeManager;
         },
         getAssemblyId(assemblyName) {
             const { assemblyManager } = self.session;
@@ -10556,12 +10803,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;
@@ -10773,11 +11018,9 @@ const FilterTranscripts = observer(function FilterTranscripts({ sourceFeature, f
         onUpdate(newForms);
         setExcludedTranscripts(newForms);
     };
-    return (jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxs(DialogContent, { children: [jsx(DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 8, children: jsx(FormGroup, { children: allTranscripts.map((item) => (
-                            // eslint-disable-next-line react/jsx-key
-                            jsx(FormControlLabel, { control: jsx(Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
+    return (jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxs(DialogContent, { children: [jsx(DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 8, children: jsx(FormGroup, { children: allTranscripts.map((item) => (jsx(FormControlLabel, { control: jsx(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;
@@ -11623,8 +11866,7 @@ function baseModelFactory(_pluginManager, configSchema) {
             return internetAccounts.find((ia) => getConf(ia, 'internetAccountId') === internetAccountConfigId);
         },
         get changeManager() {
-            return self.session.apolloDataStore
-                .changeManager;
+            return self.session.apolloDataStore.changeManager;
         },
         getAssemblyId(assemblyName) {
             const { assemblyManager } = self.session;
@@ -11635,12 +11877,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) => ({
@@ -11768,7 +12008,7 @@ function baseModelFactory(_pluginManager, configSchema) {
                     {
                         label: 'Filter features by type',
                         onClick: () => {
-                            const session = self.session;
+                            const { session } = self;
                             self.session.queueDialog((doneCallback) => [
                                 FilterFeatures,
                                 {
@@ -12206,17 +12446,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');
@@ -12238,7 +12473,6 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
                     }
                     return false;
                 });
-            }
             if (!foundFeature) {
                 return mousePosition;
             }
@@ -12561,27 +12795,33 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     const [selectedDestinationFeature, setSelectedDestinationFeature] = 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 = getSnapshot(f);
-                filteredFeatures.push(featureSnapshot);
-            }
-        }
-        return filteredFeatures;
-    };
+    const features = useMemo(() => refSeq?.getFeatures(region.start, region.end), [refSeq, region.start, region.end]);
     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 = 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);
@@ -12861,8 +13101,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;
@@ -12878,9 +13131,7 @@ function annotationFromPileup(pluggableElement) {
                     case 'M':
                     case '=':
                     case 'X': {
-                        if (currentExonStart === undefined) {
-                            currentExonStart = position;
-                        }
+                        currentExonStart ??= position;
                         position += len;
                         break;
                     }
@@ -13294,7 +13545,7 @@ const LinearApolloDisplay = observer(function LinearApolloDisplay(props) {
                             : undefined, menuItems: contextMenuItems })] }))] }));
 });
 
-const TrackLines = observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx = 0, }) {
+const TrackLines = observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx, }) {
     const { apolloRowHeight, highestRow, showFeatureLabels } = model;
     const featureLabelSpacer = showFeatureLabels ? 2 : 1;
     return (jsx("div", { style: {
@@ -13366,8 +13617,7 @@ const LinearApolloSixFrameDisplay = observer(function LinearApolloSixFrameDispla
                                         regionNumber: idx,
                                     })?.offsetPx ?? 0) - lgv.offsetPx;
                                     const [feature] = checkResult.featureIds;
-                                    if (!feature ||
-                                        !feature.parent ||
+                                    if (!feature?.parent ||
                                         !looksLikeGene(feature.parent, session)) {
                                         return null;
                                     }
@@ -13619,18 +13869,15 @@ function addTopLevelMenus(rootModel) {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-confusing-void-expression */
 const ApolloJobModel = types
     .model('JobsManager', {})
     .views((self) => ({
     get jobStatusWidget() {
         const { widgets } = 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 = getSession(self).addWidget('JobsListWidget', 'JobsList');
-        }
+            getSession(self).addWidget('JobsListWidget', 'JobsList');
         return jobStatusWidget;
     },
 }))
@@ -13909,19 +14156,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);
@@ -13938,24 +14181,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] = useState('keepExisting');
+    const [errorMessage, setErrorMessage] = useState('');
+    const [submitted, setSubmitted] = useState(false);
+    const handleSubmit = async () => {
+        setErrorMessage('');
+        setSubmitted(true);
+        try {
+            if (choice === 'useNew') {
+                const deleteChange = new DeleteFeatureChange({
+                    typeName: 'DeleteFeatureChange',
+                    assembly: assemblyName,
+                    changedIds: [existingFeature._id],
+                    deletedFeature: existingFeature,
+                });
+                await changeManager.submit(deleteChange);
+                const addChange = new 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 AddFeatureChange({
+                    typeName: 'AddFeatureChange',
+                    assembly: assemblyName,
+                    changedIds: [newSnapshot._id],
+                    addedFeature: newSnapshot,
+                });
+                await changeManager.submit(addChange);
+            }
+            handleClose();
+        }
+        catch (error) {
+            setErrorMessage(String(error));
+            setSubmitted(false);
+        }
+    };
+    return (jsxs(Dialog, { open: true, title: "Duplicate Feature Detected", handleClose: handleClose, maxWidth: "sm", fullWidth: true, children: [jsxs(DialogContent, { children: [jsxs(DialogContentText, { children: ["A feature with ID \u201C", featureSnapshot._id, "\u201D already exists. How would you like to resolve this conflict?"] }), jsxs(FormControl, { component: "fieldset", sx: { mt: 2 }, children: [jsx(FormLabel, { component: "legend", children: "Resolution" }), jsxs(RadioGroup, { value: choice, onChange: (e) => {
+                                    setChoice(e.target.value);
+                                }, children: [jsx(FormControlLabel, { value: "keepExisting", control: jsx(Radio, {}), label: "Keep the existing feature" }), jsx(FormControlLabel, { value: "useNew", control: jsx(Radio, {}), label: "Replace with the new feature" }), jsx(FormControlLabel, { value: "keepBoth", control: jsx(Radio, {}), label: "Keep both (assign new IDs to the incoming feature)" })] })] }), errorMessage ? (jsx(DialogContentText, { color: "error", sx: { mt: 1 }, children: errorMessage })) : null] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", onClick: handleSubmit, disabled: submitted, children: "Confirm" }), jsx(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 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) {
@@ -14041,8 +14413,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 });
                         }
                     }
@@ -14101,8 +14472,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 });
                             }
                         }
@@ -14222,6 +14593,37 @@ function extendSession(pluginManager, sessionModel) {
         beforeDestroy() {
             self.abortController.abort(new DOMException('Clean up Apollo session', 'AbortError'));
         },
+    }))
+        .actions((self) => ({
+        async afterCreate() {
+            if (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() {
+            addDisposer(self, 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
@@ -14353,7 +14755,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) {
@@ -14541,10 +14942,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;
                     }
@@ -14562,7 +14963,7 @@ class ApolloPlugin extends Plugin {
                                 break;
                             }
                             const { seq: sequence } = await backendDriver.getSequence(region);
-                            handle.workers[0].postMessage({
+                            handle.worker.postMessage({
                                 apollo,
                                 messageId,
                                 sequence,
@@ -14580,7 +14981,7 @@ class ApolloPlugin extends Plugin {
                                 break;
                             }
                             const regions = await backendDriver.getRegions(assembly);
-                            handle.workers[0].postMessage({
+                            handle.worker.postMessage({
                                 apollo,
                                 messageId,
                                 regions,
@@ -14598,7 +14999,7 @@ class ApolloPlugin extends Plugin {
                                 break;
                             }
                             const refNameAliases = await backendDriver.getRefNameAliases(assembly);
-                            handle.workers[0].postMessage({
+                            handle.worker.postMessage({
                                 apollo,
                                 messageId,
                                 refNameAliases,