@apollo-annotation/jbrowse-plugin-apollo 0.3.11 → 0.3.12

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

@@ -10,21 +10,22 @@ var pluggableElementTypes = require('@jbrowse/core/pluggableElementTypes');
 var util = require('@jbrowse/core/util');
 var AddIcon = require('@mui/icons-material/Add');
 var material = require('@mui/material');
+var mobxStateTree = require('@jbrowse/mobx-state-tree');
 var mobx = require('mobx');
-var mobxStateTree = require('mobx-state-tree');
 var socket_ioClient = require('socket.io-client');
 var AdminPanelSettingsIcon = require('@mui/icons-material/AdminPanelSettings');
 var DeleteIcon = require('@mui/icons-material/Delete');
 var InputIcon = require('@mui/icons-material/Input');
 var PersonIcon = require('@mui/icons-material/Person');
 var RuleIcon = require('@mui/icons-material/Rule');
+var jsxRuntime = require('react/jsx-runtime');
+var tssReact = require('@jbrowse/core/util/tss-react');
 var InfoIcon = require('@mui/icons-material/Info');
 var LinkIcon = require('@mui/icons-material/Link');
 var RadioButtonCheckedIcon = require('@mui/icons-material/RadioButtonChecked');
 var RadioButtonUncheckedIcon = require('@mui/icons-material/RadioButtonUnchecked');
 var ObjectID = require('bson-objectid');
 var React = require('react');
-var mui = require('tss-react/mui');
 var gff = require('@gmod/gff');
 var SkipNextRoundedIcon = require('@mui/icons-material/SkipNextRounded');
 var SkipPreviousRoundedIcon = require('@mui/icons-material/SkipPreviousRounded');
@@ -39,9 +40,6 @@ var jsonpath = require('jsonpath');
 var io = require('@jbrowse/core/util/io');
 var equal = require('fast-deep-equal/es6');
 var fileSaver = require('file-saver');
-var Checkbox = require('@mui/material/Checkbox');
-var FormControlLabel = require('@mui/material/FormControlLabel');
-var LinearProgress = require('@mui/material/LinearProgress');
 var nanoid = require('nanoid');
 var AccountCircleIcon = require('@mui/icons-material/AccountCircle');
 var AdapterType = require('@jbrowse/core/pluggableElementTypes/AdapterType');
@@ -73,56 +71,7 @@ var TrackChangesIcon = require('@mui/icons-material/TrackChanges');
 var UndoIcon = require('@mui/icons-material/Undo');
 var SaveIcon = require('@mui/icons-material/Save');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Plugin__default = /*#__PURE__*/_interopDefaultLegacy(Plugin);
-var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
-var AdminPanelSettingsIcon__default = /*#__PURE__*/_interopDefaultLegacy(AdminPanelSettingsIcon);
-var DeleteIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteIcon);
-var InputIcon__default = /*#__PURE__*/_interopDefaultLegacy(InputIcon);
-var PersonIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonIcon);
-var RuleIcon__default = /*#__PURE__*/_interopDefaultLegacy(RuleIcon);
-var InfoIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoIcon);
-var LinkIcon__default = /*#__PURE__*/_interopDefaultLegacy(LinkIcon);
-var RadioButtonCheckedIcon__default = /*#__PURE__*/_interopDefaultLegacy(RadioButtonCheckedIcon);
-var RadioButtonUncheckedIcon__default = /*#__PURE__*/_interopDefaultLegacy(RadioButtonUncheckedIcon);
-var ObjectID__default = /*#__PURE__*/_interopDefaultLegacy(ObjectID);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var SkipNextRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SkipNextRoundedIcon);
-var SkipPreviousRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SkipPreviousRoundedIcon);
-var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
-var jsonpath__default = /*#__PURE__*/_interopDefaultLegacy(jsonpath);
-var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
-var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
-var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
-var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
-var AccountCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(AccountCircleIcon);
-var AdapterType__default = /*#__PURE__*/_interopDefaultLegacy(AdapterType);
-var SimpleFeature__default = /*#__PURE__*/_interopDefaultLegacy(SimpleFeature);
-var BaseResult__default = /*#__PURE__*/_interopDefaultLegacy(BaseResult);
-var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
-var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
-var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
-var AddBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddBoxIcon);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var ContentCopyIcon__default = /*#__PURE__*/_interopDefaultLegacy(ContentCopyIcon);
-var ContentCutIcon__default = /*#__PURE__*/_interopDefaultLegacy(ContentCutIcon);
-var RemoveIcon__default = /*#__PURE__*/_interopDefaultLegacy(RemoveIcon);
-var ClearIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearIcon);
-var UnfoldLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(UnfoldLessIcon);
-var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
-var LockIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockIcon);
-var ErrorIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorIcon);
-var DownloadIcon__default = /*#__PURE__*/_interopDefaultLegacy(DownloadIcon);
-var FactCheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(FactCheckIcon);
-var FileOpenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FileOpenIcon);
-var LogoutIcon__default = /*#__PURE__*/_interopDefaultLegacy(LogoutIcon);
-var RedoIcon__default = /*#__PURE__*/_interopDefaultLegacy(RedoIcon);
-var TrackChangesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TrackChangesIcon);
-var UndoIcon__default = /*#__PURE__*/_interopDefaultLegacy(UndoIcon);
-var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
-
-var version = "0.3.11";
+var version = "0.3.12";
 
 const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -405,21 +354,21 @@ function getAdjacentExons(currentExon, display, mousePosition, session) {
 function getStreamIcon(strand, isUpstream, isFlipped) {
     // This is the icon you would use for strand=1, downstream, straight
     // (non-flipped) view
-    let icon = SkipNextRoundedIcon__default["default"];
+    let icon = SkipNextRoundedIcon;
     if (strand === -1) {
-        icon = SkipPreviousRoundedIcon__default["default"];
+        icon = SkipPreviousRoundedIcon;
     }
     if (isUpstream) {
         icon =
-            icon === SkipPreviousRoundedIcon__default["default"]
-                ? SkipNextRoundedIcon__default["default"]
-                : SkipPreviousRoundedIcon__default["default"];
+            icon === SkipPreviousRoundedIcon
+                ? SkipNextRoundedIcon
+                : SkipPreviousRoundedIcon;
     }
     if (isFlipped) {
         icon =
-            icon === SkipPreviousRoundedIcon__default["default"]
-                ? SkipNextRoundedIcon__default["default"]
-                : SkipPreviousRoundedIcon__default["default"];
+            icon === SkipPreviousRoundedIcon
+                ? SkipNextRoundedIcon
+                : SkipPreviousRoundedIcon;
     }
     return icon;
 }
@@ -677,8 +626,7 @@ function getApolloInternetAccount(session) {
     return internetAccounts.find((ia) => ia.type === 'ApolloInternetAccount');
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
-const useStyles$g = mui.makeStyles()((theme) => ({
+const useStyles$g = tssReact.makeStyles()((theme) => ({
     dialogTitle: {
         background: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
@@ -694,13 +642,9 @@ const useStyles$g = mui.makeStyles()((theme) => ({
 const Dialog = mobxReact.observer(function JBrowseDialog(props) {
     const { classes } = useStyles$g();
     const { handleClose, title, ...other } = props;
-    return (React__default["default"].createElement(ui.Dialog, { ...other, header: React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(material.DialogTitle, { className: classes.dialogTitle }, title),
-            React__default["default"].createElement(material.IconButton, { "aria-label": "close", onClick: handleClose, className: classes.closeButton },
-                React__default["default"].createElement(CloseIcon__default["default"], null))) }));
+    return (jsxRuntime.jsx(ui.Dialog, { ...other, header: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogTitle, { className: classes.dialogTitle, children: title }), jsxRuntime.jsx(material.IconButton, { "aria-label": "close", onClick: handleClose, className: classes.closeButton, children: jsxRuntime.jsx(CloseIcon, {}) })] }) }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 var FileType;
 (function (FileType) {
     FileType["GFF3"] = "text/x-gff3";
@@ -710,7 +654,7 @@ var FileType;
     FileType["GZI"] = "application/x-gzi";
     FileType["EXTERNAL"] = "text/x-external";
 })(FileType || (FileType = {}));
-const useStyles$f = mui.makeStyles()((theme) => ({
+const useStyles$f = tssReact.makeStyles()((theme) => ({
     accordion: {
         border: `1px solid ${theme.palette.divider}`,
         '&:not(:last-child)': {
@@ -766,6 +710,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
     const [importFeatures, setImportFeatures] = React.useState(true);
     const [sequenceIsEditable, setSequenceIsEditable] = React.useState(false);
     const [submitted, setSubmitted] = React.useState(false);
+    const [strict, setStrict] = React.useState(true);
     const [fastaFile, setFastaFile] = React.useState(null);
     const [fastaIndexFile, setFastaIndexFile] = React.useState(null);
     const [fastaGziIndexFile, setFastaGziIndexFile] = React.useState(null);
@@ -812,36 +757,33 @@ function AddAssembly({ changeManager, handleClose, session, }) {
             locationType: 'UriLocation',
             uri,
         });
-        if (apolloFetchFile) {
-            const job = {
-                name: `UploadAssemblyFile for ${assemblyName}`,
-                statusMessage: 'Pre-validating',
-                progressPct: 0,
-                cancelCallback: () => {
-                    controller.abort('AddAssembly');
-                    jobsManager.abortJob(job.name);
-                },
-            };
-            jobsManager.runJob(job);
-            jobsManager.update(job.name, `Uploading ${file.name}, this may take awhile`);
-            const { signal } = controller;
-            const response = await apolloFetchFile(uri, {
-                method: 'POST',
-                body: formData,
-                signal,
-            });
-            if (!response.ok) {
-                const newErrorMessage = await createFetchErrorMessage(response, 'Error when inserting new assembly (while uploading file)');
-                jobsManager.abortJob(job.name, newErrorMessage);
-                setErrorMessage(newErrorMessage);
-                return '';
-            }
-            const result = await response.json();
-            const fileId = result._id;
-            jobsManager.done(job);
-            return fileId;
+        const job = {
+            name: `UploadAssemblyFile for ${assemblyName}`,
+            statusMessage: 'Pre-validating',
+            progressPct: 0,
+            cancelCallback: () => {
+                controller.abort(new DOMException(`Canceling adding of assembly "${assemblyName}"`, 'AbortError'));
+                jobsManager.abortJob(job.name);
+            },
+        };
+        jobsManager.runJob(job);
+        jobsManager.update(job.name, `Uploading ${file.name}, this may take awhile`);
+        const { signal } = controller;
+        const response = await apolloFetchFile(uri, {
+            method: 'POST',
+            body: formData,
+            signal,
+        });
+        if (!response.ok) {
+            const newErrorMessage = await createFetchErrorMessage(response, 'Error when inserting new assembly (while uploading file)');
+            jobsManager.abortJob(job.name, newErrorMessage);
+            setErrorMessage(newErrorMessage);
+            return '';
         }
-        throw new Error('Failed to fetch');
+        const result = await response.json();
+        const fileId = result._id;
+        jobsManager.done(job);
+        return fileId;
     }
     async function onSubmit(event) {
         event.preventDefault();
@@ -855,7 +797,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
         if (fileType === FileType.EXTERNAL) {
             change = new shared.AddAssemblyFromExternalChange({
                 typeName: 'AddAssemblyFromExternalChange',
-                assembly: new ObjectID__default["default"]().toHexString(),
+                assembly: new ObjectID().toHexString(),
                 assemblyName,
                 externalLocation: {
                     fa: fastaUrl,
@@ -872,16 +814,17 @@ function AddAssembly({ changeManager, handleClose, session, }) {
                 const faId = await uploadFile(fastaFile, FileType.GFF3);
                 change = new shared.AddAssemblyAndFeaturesFromFileChange({
                     typeName: 'AddAssemblyAndFeaturesFromFileChange',
-                    assembly: new ObjectID__default["default"]().toHexString(),
+                    assembly: new ObjectID().toHexString(),
                     assemblyName,
                     fileIds: { fa: faId },
+                    parseOptions: { strict },
                 });
             }
             else if (fileType === FileType.GFF3) {
                 const faId = await uploadFile(fastaFile, FileType.GFF3);
                 change = new shared.AddAssemblyFromFileChange({
                     typeName: 'AddAssemblyFromFileChange',
-                    assembly: new ObjectID__default["default"]().toHexString(),
+                    assembly: new ObjectID().toHexString(),
                     assemblyName,
                     fileIds: {
                         fa: faId,
@@ -892,7 +835,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
                 const faId = await uploadFile(fastaFile, FileType.FASTA);
                 change = new shared.AddAssemblyFromFileChange({
                     typeName: 'AddAssemblyFromFileChange',
-                    assembly: new ObjectID__default["default"]().toHexString(),
+                    assembly: new ObjectID().toHexString(),
                     assemblyName,
                     fileIds: {
                         fa: faId,
@@ -908,7 +851,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
                 const gziId = await uploadFile(fastaGziIndexFile, FileType.GZI);
                 change = new shared.AddAssemblyFromFileChange({
                     typeName: 'AddAssemblyFromFileChange',
-                    assembly: new ObjectID__default["default"]().toHexString(),
+                    assembly: new ObjectID().toHexString(),
                     assemblyName,
                     fileIds: {
                         fa: faId,
@@ -956,157 +899,82 @@ function AddAssembly({ changeManager, handleClose, session, }) {
     catch {
         // pass
     }
-    const [expanded, setExpanded] = React__default["default"].useState('panelFastaInput');
+    const [expanded, setExpanded] = React.useState('panelFastaInput');
     const handleAccordionChange = (panel) => (event, newExpanded) => {
         if (newExpanded) {
             setExpanded(panel);
         }
     };
-    return (React__default["default"].createElement(Dialog, { open: true, handleClose: handleClose, "data-testid": "add-assembly-dialog", title: "Add new assembly", maxWidth: false },
-        React__default["default"].createElement("form", { onSubmit: onSubmit, "data-testid": "submit-form" },
-            React__default["default"].createElement(material.DialogContent, { className: classes.dialog },
-                loading ? React__default["default"].createElement(material.LinearProgress, null) : null,
-                React__default["default"].createElement(material.TextField, { margin: "dense", id: "name", label: "Assembly name", type: "TextField", fullWidth: true, variant: "outlined", onChange: (e) => {
-                        setSubmitted(false);
-                        setAssemblyName(e.target.value);
-                        checkAssemblyName(e.target.value);
-                    }, disabled: submitted && !errorMessage }),
-                React__default["default"].createElement(material.Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelFastaInput', onChange: handleAccordionChange('panelFastaInput') },
-                    React__default["default"].createElement(material.AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelFastaInput' ? (React__default["default"].createElement(RadioButtonCheckedIcon__default["default"], { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (React__default["default"].createElement(RadioButtonUncheckedIcon__default["default"], { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelFastaInputd-content", id: "panelFastaInputd-header" },
-                        React__default["default"].createElement(material.Typography, { component: "span" }, "FASTA input")),
-                    React__default["default"].createElement(material.AccordionDetails, { className: classes.accordionDetails },
-                        React__default["default"].createElement(material.FormGroup, null,
-                            React__default["default"].createElement(material.FormControlLabel, { "data-testid": "files-on-url-checkbox", control: React__default["default"].createElement(material.Checkbox, { onChange: () => {
-                                        setFileType(fileType === FileType.EXTERNAL
-                                            ? FileType.BGZIP_FASTA
-                                            : FileType.EXTERNAL);
-                                        if (fileType === FileType.EXTERNAL) {
-                                            setSequenceIsEditable(false);
-                                        }
-                                    }, checked: fileType === FileType.EXTERNAL, disabled: sequenceIsEditable && fileType !== FileType.GFF3 }), label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" },
-                                    "Use external URLs",
-                                    React__default["default"].createElement(material.Tooltip, { title: "Use external URLs to provide FASTA and index files. Does not copy the files to the Apollo collaboration server, so ensure the URLs are stable.", placement: "top-start" },
-                                        React__default["default"].createElement(material.IconButton, { size: "small" },
-                                            React__default["default"].createElement(InfoIcon__default["default"], { sx: { fontSize: 18 } })))) }),
-                            React__default["default"].createElement(material.FormControlLabel, { "data-testid": "sequence-is-editable-checkbox", control: React__default["default"].createElement(material.Checkbox, { onChange: () => {
-                                        setSequenceIsEditable(!sequenceIsEditable);
-                                    } }), checked: sequenceIsEditable, disabled: fileType === FileType.EXTERNAL, label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" },
-                                    "Store sequence in database",
-                                    React__default["default"].createElement(material.Tooltip, { title: "Enables users to edit the genomic sequence, but comes with performance impacts. Use with care.", placement: "top-start" },
-                                        React__default["default"].createElement(material.IconButton, { size: "small" },
-                                            React__default["default"].createElement(InfoIcon__default["default"], { sx: { fontSize: 18 } })))) }),
-                            React__default["default"].createElement(material.FormControlLabel, { "data-testid": "fasta-is-gzip-checkbox", control: React__default["default"].createElement(material.Checkbox, { checked: !sequenceIsEditable || fastaGzipChecked, onChange: () => {
-                                        if (sequenceIsEditable) {
-                                            setFastaGzipChecked(!fastaGzipChecked);
-                                        }
-                                        else {
-                                            setFastaGzipChecked(true);
-                                        }
-                                    }, disabled: !sequenceIsEditable }), label: "FASTA is gzip compressed" }),
-                            fileType === FileType.BGZIP_FASTA ||
-                                fileType === FileType.GFF3 ? (React__default["default"].createElement(material.Table, { size: "small", sx: { mt: 2 } },
-                                React__default["default"].createElement(material.TableBody, null,
-                                    React__default["default"].createElement(material.TableRow, null,
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" },
-                                                React__default["default"].createElement("span", null, "FASTA"),
-                                                React__default["default"].createElement(material.Tooltip, { title: 'Unless "Store sequence in database" enabled, FASTA input must be compressed with bgzip and indexed with samtools faidx (or equivalent). Compression is optional for sequences stored in the database.' },
-                                                    React__default["default"].createElement(material.IconButton, { size: "small" },
-                                                        React__default["default"].createElement(InfoIcon__default["default"], { sx: { fontSize: 18 } }))))),
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement("input", { "data-testid": "fasta-input-file", type: "file", onChange: (e) => {
-                                                    const file = e.target.files?.item(0);
-                                                    if (file) {
-                                                        setFastaFile(file);
-                                                        if (file.name.endsWith('.gz')) {
-                                                            setFastaGzipChecked(true);
+    return (jsxRuntime.jsxs(Dialog, { open: true, handleClose: handleClose, "data-testid": "add-assembly-dialog", title: "Add new assembly", maxWidth: false, children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, "data-testid": "submit-form", children: [jsxRuntime.jsxs(material.DialogContent, { className: classes.dialog, children: [loading ? jsxRuntime.jsx(material.LinearProgress, {}) : null, jsxRuntime.jsx(material.TextField, { margin: "dense", id: "name", label: "Assembly name", type: "TextField", fullWidth: true, variant: "outlined", onChange: (e) => {
+                                    setSubmitted(false);
+                                    setAssemblyName(e.target.value);
+                                    checkAssemblyName(e.target.value);
+                                }, disabled: submitted && !errorMessage }), jsxRuntime.jsxs(material.Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelFastaInput', onChange: handleAccordionChange('panelFastaInput'), children: [jsxRuntime.jsx(material.AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelFastaInput' ? (jsxRuntime.jsx(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (jsxRuntime.jsx(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelFastaInputd-content", id: "panelFastaInputd-header", children: jsxRuntime.jsx(material.Typography, { component: "span", children: "FASTA input" }) }), jsxRuntime.jsx(material.AccordionDetails, { className: classes.accordionDetails, children: jsxRuntime.jsxs(material.FormGroup, { children: [jsxRuntime.jsx(material.FormControlLabel, { "data-testid": "files-on-url-checkbox", control: jsxRuntime.jsx(material.Checkbox, { onChange: () => {
+                                                            setFileType(fileType === FileType.EXTERNAL
+                                                                ? FileType.BGZIP_FASTA
+                                                                : FileType.EXTERNAL);
+                                                            if (fileType === FileType.EXTERNAL) {
+                                                                setSequenceIsEditable(false);
+                                                            }
+                                                        }, checked: fileType === FileType.EXTERNAL, disabled: sequenceIsEditable && fileType !== FileType.GFF3 }), label: jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: ["Use external URLs", jsxRuntime.jsx(material.Tooltip, { title: "Use external URLs to provide FASTA and index files. Does not copy the files to the Apollo collaboration server, so ensure the URLs are stable.", placement: "top-start", children: jsxRuntime.jsx(material.IconButton, { size: "small", children: jsxRuntime.jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsxRuntime.jsx(material.FormControlLabel, { "data-testid": "sequence-is-editable-checkbox", control: jsxRuntime.jsx(material.Checkbox, { onChange: () => {
+                                                            setSequenceIsEditable(!sequenceIsEditable);
+                                                        } }), checked: sequenceIsEditable, disabled: fileType === FileType.EXTERNAL, label: jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: ["Store sequence in database", jsxRuntime.jsx(material.Tooltip, { title: "Enables users to edit the genomic sequence, but comes with performance impacts. Use with care.", placement: "top-start", children: jsxRuntime.jsx(material.IconButton, { size: "small", children: jsxRuntime.jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsxRuntime.jsx(material.FormControlLabel, { "data-testid": "fasta-is-gzip-checkbox", control: jsxRuntime.jsx(material.Checkbox, { checked: !sequenceIsEditable || fastaGzipChecked, onChange: () => {
+                                                            if (sequenceIsEditable) {
+                                                                setFastaGzipChecked(!fastaGzipChecked);
+                                                            }
+                                                            else {
+                                                                setFastaGzipChecked(true);
+                                                            }
+                                                        }, disabled: !sequenceIsEditable }), label: "FASTA is gzip compressed" }), fileType === FileType.BGZIP_FASTA ||
+                                                    fileType === FileType.GFF3 ? (jsxRuntime.jsx(material.Table, { size: "small", sx: { mt: 2 }, children: jsxRuntime.jsxs(material.TableBody, { children: [jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx("span", { children: "FASTA" }), jsxRuntime.jsx(material.Tooltip, { title: 'Unless "Store sequence in database" enabled, FASTA input must be compressed with bgzip and indexed with samtools faidx (or equivalent). Compression is optional for sequences stored in the database.', children: jsxRuntime.jsx(material.IconButton, { size: "small", children: jsxRuntime.jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsx("input", { "data-testid": "fasta-input-file", type: "file", onChange: (e) => {
+                                                                                const file = e.target.files?.item(0);
+                                                                                if (file) {
+                                                                                    setFastaFile(file);
+                                                                                    if (file.name.endsWith('.gz')) {
+                                                                                        setFastaGzipChecked(true);
+                                                                                    }
+                                                                                }
+                                                                            }, disabled: submitted && !errorMessage }) })] }), jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA index (.fai)" }), jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsx("input", { "data-testid": "fai-input-file", type: "file", onChange: (e) => {
+                                                                                setFastaIndexFile(e.target.files?.item(0) ?? null);
+                                                                            }, disabled: (submitted && !errorMessage) || sequenceIsEditable }) })] }), jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA binary index (.gzi)" }), jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsx("input", { "data-testid": "gzi-input-file", type: "file", onChange: (e) => {
+                                                                                setFastaGziIndexFile(e.target.files?.item(0) ?? null);
+                                                                            }, disabled: (submitted && !errorMessage) || sequenceIsEditable }) })] })] }) })) : (jsxRuntime.jsx(material.Table, { size: "small", sx: { mt: 2 }, children: jsxRuntime.jsxs(material.TableBody, { children: [jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx("span", { children: "FASTA" }), jsxRuntime.jsx(material.Tooltip, { title: "Remote FASTA input must be compressed with bgzip and indexed with samtools faidx (or equivalent)", children: jsxRuntime.jsx(material.IconButton, { size: "small", children: jsxRuntime.jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsx(material.TextField, { "data-testid": "fasta-input-url", variant: "outlined", value: fastaUrl, error: !validFastaUrl, onChange: (e) => {
+                                                                                const { value } = e.target;
+                                                                                setFastaUrl(value);
+                                                                                setFastaIndexUrl(value ? `${value}.fai` : '');
+                                                                                setFastaGziIndexUrl(value ? `${value}.gzi` : '');
+                                                                            }, disabled: submitted && !errorMessage, slotProps: {
+                                                                                input: {
+                                                                                    startAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "start", children: jsxRuntime.jsx(LinkIcon, {}) })),
+                                                                                },
+                                                                            } }) })] }), jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA index (.fai)" }), jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsx(material.TextField, { "data-testid": "fai-input-url", variant: "outlined", value: fastaIndexUrl, error: !validFastaIndexUrl, onChange: (e) => {
+                                                                                setFastaIndexUrl(e.target.value);
+                                                                            }, disabled: submitted && !errorMessage, slotProps: {
+                                                                                input: {
+                                                                                    startAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "start", children: jsxRuntime.jsx(LinkIcon, {}) })),
+                                                                                },
+                                                                            } }) })] }), jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA binary index (.gzi)" }), jsxRuntime.jsx(material.TableCell, { style: { borderBottomWidth: 0 }, children: jsxRuntime.jsx(material.TextField, { "data-testid": "gzi-input-url", variant: "outlined", value: fastaGziIndexUrl, error: !validFastaGziIndexUrl, onChange: (e) => {
+                                                                                setFastaGziIndexUrl(e.target.value);
+                                                                            }, disabled: submitted && !errorMessage, slotProps: {
+                                                                                input: {
+                                                                                    startAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "start", children: jsxRuntime.jsx(LinkIcon, {}) })),
+                                                                                },
+                                                                            } }) })] })] }) }))] }) })] }), jsxRuntime.jsxs(material.Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelGffInput', onChange: handleAccordionChange('panelGffInput'), children: [jsxRuntime.jsx(material.AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelGffInput' ? (jsxRuntime.jsx(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (jsxRuntime.jsx(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelGffInputd-content", children: jsxRuntime.jsxs(material.Typography, { component: "span", children: ["GFF3 input", jsxRuntime.jsx(material.Tooltip, { title: "GFF3 must includes FASTA sequences. File can be gzip compressed.", children: jsxRuntime.jsx(InfoIcon, { className: classes.radioIcon, sx: { fontSize: 18 } }) })] }) }), jsxRuntime.jsx(material.AccordionDetails, { className: classes.accordionDetails, children: jsxRuntime.jsxs(material.Box, { style: { marginTop: 20 }, children: [jsxRuntime.jsx("input", { "data-testid": "gff3-input-file", type: "file", disabled: submitted && !errorMessage, onChange: (e) => {
+                                                        const file = e.target.files?.item(0);
+                                                        if (file) {
+                                                            setFastaFile(file);
+                                                            setFileType(FileType.GFF3);
+                                                            if (file.name.endsWith('.gz')) {
+                                                                setGff3GzipChecked(true);
+                                                            }
                                                         }
-                                                    }
-                                                }, disabled: submitted && !errorMessage }))),
-                                    React__default["default"].createElement(material.TableRow, null,
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } }, "FASTA index (.fai)"),
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement("input", { "data-testid": "fai-input-file", type: "file", onChange: (e) => {
-                                                    setFastaIndexFile(e.target.files?.item(0) ?? null);
-                                                }, disabled: (submitted && !errorMessage) || sequenceIsEditable }))),
-                                    React__default["default"].createElement(material.TableRow, null,
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } }, "FASTA binary index (.gzi)"),
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement("input", { "data-testid": "gzi-input-file", type: "file", onChange: (e) => {
-                                                    setFastaGziIndexFile(e.target.files?.item(0) ?? null);
-                                                }, disabled: (submitted && !errorMessage) || sequenceIsEditable })))))) : (React__default["default"].createElement(material.Table, { size: "small", sx: { mt: 2 } },
-                                React__default["default"].createElement(material.TableBody, null,
-                                    React__default["default"].createElement(material.TableRow, null,
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" },
-                                                React__default["default"].createElement("span", null, "FASTA"),
-                                                React__default["default"].createElement(material.Tooltip, { title: "Remote FASTA input must be compressed with bgzip and indexed with samtools faidx (or equivalent)" },
-                                                    React__default["default"].createElement(material.IconButton, { size: "small" },
-                                                        React__default["default"].createElement(InfoIcon__default["default"], { sx: { fontSize: 18 } }))))),
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement(material.TextField, { "data-testid": "fasta-input-url", variant: "outlined", value: fastaUrl, error: !validFastaUrl, onChange: (e) => {
-                                                    const { value } = e.target;
-                                                    setFastaUrl(value);
-                                                    setFastaIndexUrl(value ? `${value}.fai` : '');
-                                                    setFastaGziIndexUrl(value ? `${value}.gzi` : '');
-                                                }, disabled: submitted && !errorMessage, slotProps: {
-                                                    input: {
-                                                        startAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "start" },
-                                                            React__default["default"].createElement(LinkIcon__default["default"], null))),
-                                                    },
-                                                } }))),
-                                    React__default["default"].createElement(material.TableRow, null,
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } }, "FASTA index (.fai)"),
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement(material.TextField, { "data-testid": "fai-input-url", variant: "outlined", value: fastaIndexUrl, error: !validFastaIndexUrl, onChange: (e) => {
-                                                    setFastaIndexUrl(e.target.value);
-                                                }, disabled: submitted && !errorMessage, slotProps: {
-                                                    input: {
-                                                        startAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "start" },
-                                                            React__default["default"].createElement(LinkIcon__default["default"], null))),
-                                                    },
-                                                } }))),
-                                    React__default["default"].createElement(material.TableRow, null,
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } }, "FASTA binary index (.gzi)"),
-                                        React__default["default"].createElement(material.TableCell, { style: { borderBottomWidth: 0 } },
-                                            React__default["default"].createElement(material.TextField, { "data-testid": "gzi-input-url", variant: "outlined", value: fastaGziIndexUrl, error: !validFastaGziIndexUrl, onChange: (e) => {
-                                                    setFastaGziIndexUrl(e.target.value);
-                                                }, disabled: submitted && !errorMessage, slotProps: {
-                                                    input: {
-                                                        startAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "start" },
-                                                            React__default["default"].createElement(LinkIcon__default["default"], null))),
-                                                    },
-                                                } }))))))))),
-                React__default["default"].createElement(material.Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelGffInput', onChange: handleAccordionChange('panelGffInput') },
-                    React__default["default"].createElement(material.AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelGffInput' ? (React__default["default"].createElement(RadioButtonCheckedIcon__default["default"], { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (React__default["default"].createElement(RadioButtonUncheckedIcon__default["default"], { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelGffInputd-content" },
-                        React__default["default"].createElement(material.Typography, { component: "span" },
-                            "GFF3 input",
-                            React__default["default"].createElement(material.Tooltip, { title: "GFF3 must includes FASTA sequences. File can be gzip compressed." },
-                                React__default["default"].createElement(InfoIcon__default["default"], { className: classes.radioIcon, sx: { fontSize: 18 } })))),
-                    React__default["default"].createElement(material.AccordionDetails, { className: classes.accordionDetails },
-                        React__default["default"].createElement(material.Box, { style: { marginTop: 20 } },
-                            React__default["default"].createElement("input", { "data-testid": "gff3-input-file", type: "file", disabled: submitted && !errorMessage, onChange: (e) => {
-                                    const file = e.target.files?.item(0);
-                                    if (file) {
-                                        setFastaFile(file);
-                                        setFileType(FileType.GFF3);
-                                        if (file.name.endsWith('.gz')) {
-                                            setGff3GzipChecked(true);
-                                        }
-                                    }
-                                } }),
-                            React__default["default"].createElement(material.FormGroup, { style: { display: 'grid' } },
-                                React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { checked: importFeatures, onChange: () => {
-                                            setImportFeatures(!importFeatures);
-                                        }, disabled: submitted && !errorMessage }), label: "Load features from GFF3 file" }),
-                                React__default["default"].createElement(material.FormControlLabel, { "data-testid": "gff3-is-gzip-checkbox", control: React__default["default"].createElement(material.Checkbox, { checked: gff3GzipChecked, onChange: () => {
-                                            setGff3GzipChecked(!gff3GzipChecked);
-                                        }, disabled: submitted && !errorMessage }), label: "GFF3 is gzip compressed" })))))),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { disabled: !checkSumbission(validAsm, sequenceIsEditable, fileType, fastaFile, fastaIndexFile, fastaGziIndexFile, validFastaUrl, validFastaIndexUrl, validFastaGziIndexUrl) || submitted, variant: "contained", type: "submit", "data-testid": "submit-button" }, submitted ? 'Submitting...' : 'Submit'),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+                                                    } }), jsxRuntime.jsxs(material.FormGroup, { style: { display: 'grid' }, children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: importFeatures, onChange: () => {
+                                                                    setImportFeatures(!importFeatures);
+                                                                }, disabled: submitted && !errorMessage }), label: "Load features from GFF3 file" }), jsxRuntime.jsx(material.FormControlLabel, { label: "Strict parsing", disabled: !importFeatures || (submitted && !errorMessage), control: jsxRuntime.jsx(material.Checkbox, { checked: strict, onChange: (e) => {
+                                                                    setStrict(e.target.checked);
+                                                                } }) }), jsxRuntime.jsx(material.FormHelperText, { children: "Don't import any features if any lines in the GFF3 are unable to be processed" }), jsxRuntime.jsx(material.FormControlLabel, { "data-testid": "gff3-is-gzip-checkbox", control: jsxRuntime.jsx(material.Checkbox, { checked: gff3GzipChecked, onChange: () => {
+                                                                    setGff3GzipChecked(!gff3GzipChecked);
+                                                                }, disabled: submitted && !errorMessage }), label: "GFF3 is gzip compressed" })] })] }) })] })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !checkSumbission(validAsm, sequenceIsEditable, fileType, fastaFile, fastaIndexFile, fastaGziIndexFile, validFastaUrl, validFastaIndexUrl, validFastaGziIndexUrl) || submitted, variant: "contained", type: "submit", "data-testid": "submit-button", children: submitted ? 'Submitting...' : 'Submit' }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 const columns$1 = [
@@ -1134,7 +1002,7 @@ function AddAssemblyAliases({ changeManager, handleClose, session, }) {
             aliases: assembly.aliases.join(', '),
         };
     });
-    const [errorMessage, setErrorMessage] = React__default["default"].useState('');
+    const [errorMessage, setErrorMessage] = React.useState('');
     const processRowUpdate = (newRow, _oldRow) => {
         const change = new shared.AddAssemblyAliasesChange({
             typeName: 'AddAssemblyAliasesChange',
@@ -1147,18 +1015,13 @@ function AddAssemblyAliases({ changeManager, handleClose, session, }) {
         handleClose();
         return newRow;
     };
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Add assembly aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-assembly-alias", fullWidth: true },
-        React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-            React__default["default"].createElement(material.Box, { sx: { height: 400, width: '100%' } },
-                React__default["default"].createElement(xDataGrid.DataGrid, { rows: rows, columns: columns$1, initialState: {
-                        pagination: {
-                            paginationModel: {
-                                pageSize: 5,
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Add assembly aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-assembly-alias", fullWidth: true, children: [jsxRuntime.jsx(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsxRuntime.jsx(material.Box, { sx: { height: 400, width: '100%' }, children: jsxRuntime.jsx(xDataGrid.DataGrid, { rows: rows, columns: columns$1, initialState: {
+                            pagination: {
+                                paginationModel: {
+                                    pageSize: 5,
+                                },
                             },
-                        },
-                    }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+                        }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }) }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 /** set of words that should be ignored by fulltext indexing */
@@ -1342,6 +1205,8 @@ function expandPrefixes(uri, prefixes) {
 }
 
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+// jsonpath triggers this rule for some reason. import { query } from 'jsonpath' does not work
 /** special value of jsonPath that gets the IRI (that is, ID) of the node with the configured prefixes applied */
 const PREFIXED_ID_PATH = '$PREFIXED_ID';
 /** small wrapper for jsonpath.query that intercepts requests for the special prefixed ID path */
@@ -1349,7 +1214,15 @@ function jsonPathQuery(node, path, prefixes) {
     if (path === PREFIXED_ID_PATH) {
         return [applyPrefixes(node.id, prefixes)];
     }
-    return jsonpath__default["default"].query(node, path);
+    let response;
+    try {
+        response = jsonpath.query(node, path);
+    }
+    catch {
+        // eslint-disable-next-line unicorn/prefer-structured-clone
+        response = jsonpath.query(JSON.parse(JSON.stringify(node)), path);
+    }
+    return response;
 }
 function wordsInString(str) {
     return str
@@ -1372,7 +1245,7 @@ function* extractStrings(things) {
             yield thing;
         }
         else if (typeof thing === 'object') {
-            const members = jsonpath__default["default"].query(thing, '$..*');
+            const members = jsonpath.query(thing, '$..*');
             yield* extractStrings(members);
         }
     }
@@ -1685,11 +1558,12 @@ async function isDatabaseCurrent(db) {
         return false;
     }
     // check that the index paths and prefixes are the same as our current ones
-    return (equal__default["default"](this.options.prefixes, meta.storeOptions.prefixes) &&
-        equal__default["default"](this.options.textIndexing, meta.storeOptions.textIndexing));
+    return (equal(this.options.prefixes, meta.storeOptions.prefixes) &&
+        equal(this.options.textIndexing, meta.storeOptions.textIndexing));
 }
 
 /* eslint-disable @typescript-eslint/only-throw-error */
+/* eslint-disable unicorn/no-await-expression-member */
 async function arrayFromAsync(iter) {
     const a = [];
     for await (const i of iter) {
@@ -2185,7 +2059,6 @@ async function fetchValidDescendantTerms(parentFeature, ontologyStore, _signal)
     return subpartTerms;
 }
 
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsProp, includeDeprecated, onChange, ontologyName, ontologyVersion, renderInput, session, style, value: valueString, }) {
     const [open, setOpen] = React.useState(false);
     const [termChoices, setTermChoices] = React.useState();
@@ -2216,7 +2089,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             });
         }
         return () => {
-            controller.abort('OntologyTermAutocomplete matcher');
+            controller.abort(new DOMException('Cancel getting current term from ontology store', 'AbortError'));
         };
     }, [session, valueString, filterTerms, ontologyStore, needToLoadCurrentTerm]);
     // effect for loading term autocompletions
@@ -2235,7 +2108,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             });
         }
         return () => {
-            controller.abort('OntologyTermAutocomplete loader');
+            controller.abort(new DOMException('Canceling getting valid terms from ontology store', 'AbortError'));
         };
     }, [
         needToLoadTermChoices,
@@ -2263,14 +2136,14 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
         extraTextFieldParams.error = true;
         extraTextFieldParams.helperText = currentOntologyTermInvalid;
     }
-    return (React__default["default"].createElement(material.Autocomplete, { style: style, autoComplete: true, filterSelectedOptions: true, disableClearable: true, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, freeSolo: true, value: valueString, options: termChoices ?? [], onOpen: () => {
+    return (jsxRuntime.jsx(material.Autocomplete, { style: style, autoComplete: true, filterSelectedOptions: true, disableClearable: true, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, freeSolo: true, value: valueString, options: termChoices ?? [], onOpen: () => {
             setOpen(true);
         }, onClose: () => {
             setOpen(false);
         }, 
         // noOptionsText={valueString ? 'No matches' : 'Start typing to search'}
         loading: needToLoadTermChoices, renderInput: renderInput ??
-            ((params) => React__default["default"].createElement(material.TextField, { ...params, ...extraTextFieldParams })), getOptionLabel: (option) => {
+            ((params) => jsxRuntime.jsx(material.TextField, { ...params, ...extraTextFieldParams })), getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return option;
             }
@@ -2303,7 +2176,6 @@ async function getValidTerms(ontologyStore, fetchValidTerms, filterTerms, signal
     return filterTerms ? result.filter((element) => filterTerms(element)) : result;
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId, sourceFeature, }) {
     const [end, setEnd] = React.useState(String(sourceFeature.max));
     const [start, setStart] = React.useState(String(sourceFeature.min + 1));
@@ -2321,7 +2193,7 @@ function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId
     function onSubmit(event) {
         event.preventDefault();
         setErrorMessage('');
-        const _id = new ObjectID__default["default"]().toHexString();
+        const _id = new ObjectID().toHexString();
         const change = new shared.AddFeatureChange({
             changedIds: [sourceFeature._id],
             typeName: 'AddFeatureChange',
@@ -2346,25 +2218,15 @@ function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId
         setType(newType);
     }
     const error = Number(end) <= Number(start);
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Add new child feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
-                        setStart(e.target.value);
-                    } }),
-                React__default["default"].createElement(material.TextField, { margin: "dense", id: "end", label: "End", type: "number", fullWidth: true, variant: "outlined", value: end, onChange: (e) => {
-                        setEnd(e.target.value);
-                    }, error: error, helperText: error ? '"End" must be greater than "Start"' : null }),
-                React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, sourceFeature), renderInput: (params) => (React__default["default"].createElement(material.TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
-                        if (newValue) {
-                            handleChangeType(newValue);
-                        }
-                    } })),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: error || !(start && end && type) }, "Submit"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Add new child feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
+                                    setStart(e.target.value);
+                                } }), jsxRuntime.jsx(material.TextField, { margin: "dense", id: "end", label: "End", type: "number", fullWidth: true, variant: "outlined", value: end, onChange: (e) => {
+                                    setEnd(e.target.value);
+                                }, error: error, helperText: error ? '"End" must be greater than "Start"' : null }), jsxRuntime.jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, sourceFeature), renderInput: (params) => (jsxRuntime.jsx(material.TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
+                                    if (newValue) {
+                                        handleChangeType(newValue);
+                                    }
+                                } })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: error || !(start && end && type), children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 class BackendDriver {
@@ -2375,6 +2237,8 @@ class BackendDriver {
 }
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 class ChangeManager {
     dataStore;
     constructor(dataStore) {
@@ -2404,7 +2268,7 @@ class ChangeManager {
             statusMessage: 'Pre-validating',
             progressPct: 0,
             cancelCallback: () => {
-                controller.abort('ChangeManager');
+                controller.abort(new DOMException(`Cancelling change "${change.typeName}"`, 'AbortError'));
             },
         };
         if (updateJobsManager) {
@@ -2519,6 +2383,11 @@ class ChangeManager {
 }
 
 /* eslint-disable @typescript-eslint/no-base-to-string */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 class CollaborationServerDriver extends BackendDriver {
     inFlight = new Map();
     refSeqMaps = new Map();
@@ -3016,7 +2885,6 @@ class DesktopFileDriver extends BackendDriver {
     }
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 var NewFeature;
 (function (NewFeature) {
     NewFeature["GENE_AND_SUBFEATURES"] = "GENE_AND_SUBFEATURES";
@@ -3025,7 +2893,7 @@ var NewFeature;
 })(NewFeature || (NewFeature = {}));
 function makeCodingMrna(refSeqId, strand, min, max) {
     const cds = {
-        _id: new ObjectID__default["default"]().toHexString(),
+        _id: new ObjectID().toHexString(),
         refSeq: refSeqId,
         type: 'CDS',
         min,
@@ -3033,7 +2901,7 @@ function makeCodingMrna(refSeqId, strand, min, max) {
         strand,
     };
     const exon = {
-        _id: new ObjectID__default["default"]().toHexString(),
+        _id: new ObjectID().toHexString(),
         refSeq: refSeqId,
         type: 'exon',
         min,
@@ -3044,7 +2912,7 @@ function makeCodingMrna(refSeqId, strand, min, max) {
     children[cds._id] = cds;
     children[exon._id] = exon;
     const mRNA = {
-        _id: new ObjectID__default["default"]().toHexString(),
+        _id: new ObjectID().toHexString(),
         refSeq: refSeqId,
         type: 'mRNA',
         min,
@@ -3082,7 +2950,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
             const mRNA = makeCodingMrna(refSeqId, strand, Number(start) - 1, Number(end));
             const children = {};
             children[mRNA._id] = mRNA;
-            const id = new ObjectID__default["default"]().toHexString();
+            const id = new ObjectID().toHexString();
             const change = new shared.AddFeatureChange({
                 changedIds: [id],
                 typeName: 'AddFeatureChange',
@@ -3121,7 +2989,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
             setErrorMessage('No type selected');
             return;
         }
-        const id = new ObjectID__default["default"]().toHexString();
+        const id = new ObjectID().toHexString();
         const change = new shared.AddFeatureChange({
             changedIds: [id],
             typeName: 'AddFeatureChange',
@@ -3175,45 +3043,16 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
         (!strand && type === NewFeature.TRANSCRIPT_AND_SUBFEATURES)) {
         submitDisabled = true;
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Add new feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit, "data-testid": "submit-form" },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: Number(start), onChange: (e) => {
-                        setStart(e.target.value);
-                    } }),
-                React__default["default"].createElement(material.TextField, { margin: "dense", id: "end", label: "End", type: "number", fullWidth: true, variant: "outlined", value: end, onChange: (e) => {
-                        setEnd(e.target.value);
-                    }, error: error, helperText: error ? '"End" must be greater than "Start"' : null }),
-                React__default["default"].createElement(material.FormControl, null,
-                    React__default["default"].createElement(material.InputLabel, { id: "demo-simple-select-label" }, "Strand"),
-                    React__default["default"].createElement(material.Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Strand", value: strand?.toString(), onChange: handleChangeStrand },
-                        React__default["default"].createElement(material.MenuItem, { value: undefined }),
-                        React__default["default"].createElement(material.MenuItem, { value: 1 }, "+"),
-                        React__default["default"].createElement(material.MenuItem, { value: -1 }, "-"))),
-                React__default["default"].createElement(material.FormControl, { style: { marginTop: 20 } },
-                    React__default["default"].createElement(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: NewFeature.GENE_AND_SUBFEATURES, name: "radio-buttons-group", value: type, onChange: handleTypeChange },
-                        React__default["default"].createElement(material.FormControlLabel, { value: NewFeature.GENE_AND_SUBFEATURES, control: React__default["default"].createElement(material.Radio, null), label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" },
-                                "Add gene and sub-features",
-                                React__default["default"].createElement(material.Tooltip, { title: "This is a shortcut to create a gene with a single mRNA, exon, and CDS" },
-                                    React__default["default"].createElement(material.IconButton, { size: "small" },
-                                        React__default["default"].createElement(InfoIcon__default["default"], { sx: { fontSize: 18 } })))) }),
-                        React__default["default"].createElement(material.FormControlLabel, { value: NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: React__default["default"].createElement(material.Radio, null), label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" },
-                                "Add transcript and sub-features",
-                                React__default["default"].createElement(material.Tooltip, { title: "This is a shortcut to create a single mRNA with exon and CDS, but without a parent gene" },
-                                    React__default["default"].createElement(material.IconButton, { size: "small" },
-                                        React__default["default"].createElement(InfoIcon__default["default"], { sx: { fontSize: 18 } })))) }),
-                        React__default["default"].createElement(material.FormControlLabel, { value: NewFeature.CUSTOM, checked: type !== NewFeature.GENE_AND_SUBFEATURES &&
-                                type !== NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: React__default["default"].createElement(material.Radio, null), label: "Add feature with a sequence ontology type" }))),
-                type === NewFeature.CUSTOM ? (React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: customType, filterTerms: isOntologyClass, renderInput: (params) => (React__default["default"].createElement(material.TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true })), onChange: (_oldValue, newValue) => {
-                        if (newValue) {
-                            handleChangeOntologyType(newValue);
-                        }
-                    } })) : null),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: submitDisabled }, "Submit"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Add new feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, "data-testid": "submit-form", children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: Number(start), onChange: (e) => {
+                                    setStart(e.target.value);
+                                } }), jsxRuntime.jsx(material.TextField, { margin: "dense", id: "end", label: "End", type: "number", fullWidth: true, variant: "outlined", value: end, onChange: (e) => {
+                                    setEnd(e.target.value);
+                                }, error: error, helperText: error ? '"End" must be greater than "Start"' : null }), jsxRuntime.jsxs(material.FormControl, { children: [jsxRuntime.jsx(material.InputLabel, { id: "demo-simple-select-label", children: "Strand" }), jsxRuntime.jsxs(material.Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Strand", value: strand?.toString(), onChange: handleChangeStrand, children: [jsxRuntime.jsx(material.MenuItem, { value: undefined }), jsxRuntime.jsx(material.MenuItem, { value: 1, children: "+" }), jsxRuntime.jsx(material.MenuItem, { value: -1, children: "-" })] })] }), jsxRuntime.jsx(material.FormControl, { style: { marginTop: 20 }, children: jsxRuntime.jsxs(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: NewFeature.GENE_AND_SUBFEATURES, name: "radio-buttons-group", value: type, onChange: handleTypeChange, children: [jsxRuntime.jsx(material.FormControlLabel, { value: NewFeature.GENE_AND_SUBFEATURES, control: jsxRuntime.jsx(material.Radio, {}), label: jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: ["Add gene and sub-features", jsxRuntime.jsx(material.Tooltip, { title: "This is a shortcut to create a gene with a single mRNA, exon, and CDS", children: jsxRuntime.jsx(material.IconButton, { size: "small", children: jsxRuntime.jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsxRuntime.jsx(material.FormControlLabel, { value: NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: jsxRuntime.jsx(material.Radio, {}), label: jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: ["Add transcript and sub-features", jsxRuntime.jsx(material.Tooltip, { title: "This is a shortcut to create a single mRNA with exon and CDS, but without a parent gene", children: jsxRuntime.jsx(material.IconButton, { size: "small", children: jsxRuntime.jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsxRuntime.jsx(material.FormControlLabel, { value: NewFeature.CUSTOM, checked: type !== NewFeature.GENE_AND_SUBFEATURES &&
+                                                type !== NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: jsxRuntime.jsx(material.Radio, {}), label: "Add feature with a sequence ontology type" })] }) }), type === NewFeature.CUSTOM ? (jsxRuntime.jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: customType, filterTerms: isOntologyClass, renderInput: (params) => (jsxRuntime.jsx(material.TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true })), onChange: (_oldValue, newValue) => {
+                                    if (newValue) {
+                                        handleChangeOntologyType(newValue);
+                                    }
+                                } })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: submitDisabled, children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 /**
@@ -3224,7 +3063,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
 function generateNewIds(
 // feature: AnnotationFeatureSnapshot,
 feature, featureIds) {
-    const newId = new ObjectID__default["default"]().toHexString();
+    const newId = new ObjectID().toHexString();
     featureIds.push(newId);
     const children = {};
     if (feature.children) {
@@ -3379,27 +3218,13 @@ function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, so
             _id: id,
         };
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Copy features and annotations", handleClose: handleClose, maxWidth: false, "data-testid": "copy-feature" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.DialogContentText, null, "Target assembly"),
-                React__default["default"].createElement(material.Select, { labelId: "label", value: selectedAssemblyId, onChange: handleChangeAssembly }, assemblies
-                    .filter((option) => option.name !== sourceAssemblyId)
-                    .map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, configuration.readConfObject(option, 'displayName'))))),
-                React__default["default"].createElement(material.DialogContentText, null, "Target reference sequence"),
-                React__default["default"].createElement(material.Select, { labelId: "label", value: selectedRefSeqId, onChange: handleChangeRefSeq }, refNames.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option._id, value: option._id }, option.name)))),
-                React__default["default"].createElement(material.DialogContentText, null, "Start position in target reference sequence"),
-                React__default["default"].createElement(material.TextField, { margin: "dense", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
-                        setStart(Number(e.target.value));
-                    } })),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { disabled: !selectedAssemblyId || !selectedRefSeqId || !start, variant: "contained", type: "submit" }, "Submit"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Copy features and annotations", handleClose: handleClose, maxWidth: false, "data-testid": "copy-feature", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.DialogContentText, { children: "Target assembly" }), jsxRuntime.jsx(material.Select, { labelId: "label", value: selectedAssemblyId, onChange: handleChangeAssembly, children: assemblies
+                                    .filter((option) => option.name !== sourceAssemblyId)
+                                    .map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: configuration.readConfObject(option, 'displayName') }, option.name))) }), jsxRuntime.jsx(material.DialogContentText, { children: "Target reference sequence" }), jsxRuntime.jsx(material.Select, { labelId: "label", value: selectedRefSeqId, onChange: handleChangeRefSeq, children: refNames.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option._id, children: option.name }, option._id))) }), jsxRuntime.jsx(material.DialogContentText, { children: "Start position in target reference sequence" }), jsxRuntime.jsx(material.TextField, { margin: "dense", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
+                                    setStart(Number(e.target.value));
+                                } })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !selectedAssemblyId || !selectedRefSeqId || !start, variant: "contained", type: "submit", children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function DeleteAssembly({ changeManager, handleClose, session, }) {
     const { internetAccounts } = mobxStateTree.getRoot(session);
     const [errorMessage, setErrorMessage] = React.useState('');
@@ -3443,28 +3268,11 @@ function DeleteAssembly({ changeManager, handleClose, session, }) {
         handleClose();
         event.preventDefault();
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Delete Assembly", handleClose: handleClose, maxWidth: false, "data-testid": "delete-assembly" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                apolloInternetAccounts.length > 1 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(material.DialogContentText, null, "Select account"),
-                    React__default["default"].createElement(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage }, internetAccounts.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-                React__default["default"].createElement(material.DialogContentText, null, "Select assembly"),
-                React__default["default"].createElement(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName)))),
-                React__default["default"].createElement(material.DialogContentText, null,
-                    React__default["default"].createElement("strong", { style: { color: 'red' } }, "NOTE: All assembly data will be deleted and this operation cannot be undone!")),
-                React__default["default"].createElement(material.FormGroup, null,
-                    React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { checked: confirmDelete, onChange: () => {
-                                setconfirmDelete(!confirmDelete);
-                            } }), label: "I understand that all assembly data will be deleted" }))),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { disabled: !selectedAssembly || !confirmDelete, variant: "contained", type: "submit" }, "Delete"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Delete Assembly", handleClose: handleClose, maxWidth: false, "data-testid": "delete-assembly", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx(material.DialogContentText, { children: "Select assembly" }), jsxRuntime.jsx(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsxRuntime.jsx(material.DialogContentText, { children: jsxRuntime.jsx("strong", { style: { color: 'red' }, children: "NOTE: All assembly data will be deleted and this operation cannot be undone!" }) }), jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: confirmDelete, onChange: () => {
+                                            setconfirmDelete(!confirmDelete);
+                                        } }), label: "I understand that all assembly data will be deleted" }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !selectedAssembly || !confirmDelete, variant: "contained", type: "submit", children: "Delete" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function lumpLocationChanges(changes, assembly) {
     if (changes.length === 0) {
         return;
@@ -3772,17 +3580,9 @@ function DeleteFeature({ changeManager, handleClose, selectedFeature, session, s
         handleClose();
         event.preventDefault();
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Delete feature", handleClose: handleClose, maxWidth: false, "data-testid": "delete-feature" },
-        React__default["default"].createElement("form", { onSubmit: (event) => {
-                void onSubmit(event);
-            } },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.DialogContentText, null, "Are you sure you want to delete the selected feature?")),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit" }, "Yes"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Delete feature", handleClose: handleClose, maxWidth: false, "data-testid": "delete-feature", children: [jsxRuntime.jsxs("form", { onSubmit: (event) => {
+                    void onSubmit(event);
+                }, children: [jsxRuntime.jsx(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsxRuntime.jsx(material.DialogContentText, { children: "Are you sure you want to delete the selected feature?" }) }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", children: "Yes" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function DownloadGFF3({ handleClose, session }) {
@@ -3892,24 +3692,11 @@ function DownloadGFF3({ handleClose, session }) {
         const gff3Blob = new Blob([gff3], { type: 'text/plain;charset=utf-8' });
         fileSaver.saveAs(gff3Blob, `${selectedAssembly.displayName ?? selectedAssembly.name}.gff3`);
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Export GFF3", handleClose: handleClose, maxWidth: false, "data-testid": "download-gff3" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.DialogContentText, null, "Select assembly"),
-                React__default["default"].createElement(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName ?? option.name)))),
-                React__default["default"].createElement(material.DialogContentText, null, "Select assembly to export to GFF3"),
-                React__default["default"].createElement(material.FormGroup, null,
-                    React__default["default"].createElement(material.FormControlLabel, { "data-testid": "include-fasta-checkbox", control: React__default["default"].createElement(material.Checkbox, { checked: includeFASTA, onChange: () => {
-                                setincludeFASTA(!includeFASTA);
-                            } }), label: "Include fasta sequence in GFF output" }))),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { disabled: !selectedAssembly, variant: "contained", type: "submit" }, "Download"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
-}
-
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Export GFF3", handleClose: handleClose, maxWidth: false, "data-testid": "download-gff3", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select assembly" }), jsxRuntime.jsx(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName ?? option.name }, option.name))) }), jsxRuntime.jsx(material.DialogContentText, { children: "Select assembly to export to GFF3" }), jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.FormControlLabel, { "data-testid": "include-fasta-checkbox", control: jsxRuntime.jsx(material.Checkbox, { checked: includeFASTA, onChange: () => {
+                                            setincludeFASTA(!includeFASTA);
+                                        } }), label: "Include fasta sequence in GFF output" }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !selectedAssembly, variant: "contained", type: "submit", children: "Download" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
+}
+
 function ImportFeatures({ changeManager, handleClose, session, }) {
     const { apolloDataStore } = session;
     const [file, setFile] = React.useState();
@@ -3919,6 +3706,7 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
     // default is -1, submit button should be disabled until count is set
     const [featuresCount, setFeaturesCount] = React.useState();
     const [deleteFeatures, setDeleteFeatures] = React.useState(false);
+    const [strict, setStrict] = React.useState(true);
     const [loading, setLoading] = React.useState(false);
     const { collaborationServerDriver, getInternetAccount } = apolloDataStore;
     const assemblies = collaborationServerDriver.getAssemblies();
@@ -3930,6 +3718,9 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
     function handleDeleteFeatures(e) {
         setDeleteFeatures(e.target.checked);
     }
+    function handleSetStrict(e) {
+        setStrict(e.target.checked);
+    }
     // fetch and set features count for selected assembly
     React.useEffect(() => {
         if (!selectedAssembly) {
@@ -4019,7 +3810,7 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
             statusMessage: 'Uploading file, this may take awhile',
             progressPct: 0,
             cancelCallback: () => {
-                controller.abort('ImportFeatures');
+                controller.abort(new DOMException(`Canceling importing of features to ${selectedAssembly.displayName}`, 'AbortError'));
                 jobsManager.abortJob(job.name);
             },
         };
@@ -4046,35 +3837,16 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
             typeName: 'AddFeaturesFromFileChange',
             assembly: selectedAssembly.name,
             fileId,
+            parseOptions: { strict },
             deleteExistingFeatures: deleteFeatures,
         });
         jobsManager.done(job);
         await changeManager.submit(change, { updateJobsManager: true });
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Import Features from GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "import-features-dialog" },
-        loading ? React__default["default"].createElement(LinearProgress__default["default"], null) : null,
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.DialogContentText, null, "Select assembly"),
-                React__default["default"].createElement(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: submitted && !errorMessage }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName ?? option.name))))),
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.DialogContentText, null, "Upload GFF3 to load features"),
-                React__default["default"].createElement("input", { type: "file", onChange: handleChangeFile, disabled: submitted && !errorMessage })),
-            featuresCount && featuresCount > 0 ? (React__default["default"].createElement(material.DialogContent, null,
-                React__default["default"].createElement(material.DialogContentText, null,
-                    "This assembly already has ",
-                    featuresCount,
-                    " features, would you like to delete the existing features before importing new ones?"),
-                React__default["default"].createElement(FormControlLabel__default["default"], { label: "Yes, delete existing features", disabled: submitted && !errorMessage, control: React__default["default"].createElement(Checkbox__default["default"], { checked: deleteFeatures, onChange: handleDeleteFeatures, slotProps: { input: { 'aria-label': 'controlled' } }, color: "warning" }) }))) : null,
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { disabled: !(selectedAssembly && file && featuresCount !== undefined) ||
-                        submitted, variant: "contained", type: "submit" }, submitted ? 'Submitting...' : 'Submit'),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Import Features from GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "import-features-dialog", children: [loading ? jsxRuntime.jsx(material.LinearProgress, {}) : null, jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select assembly" }), jsxRuntime.jsx(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: submitted && !errorMessage, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName ?? option.name }, option.name))) }), jsxRuntime.jsx(material.DialogContentText, { children: "Upload GFF3 to load features" }), jsxRuntime.jsx("input", { type: "file", onChange: handleChangeFile, disabled: submitted && !errorMessage }), jsxRuntime.jsx(material.FormControlLabel, { label: "Strict parsing", disabled: submitted && !errorMessage, control: jsxRuntime.jsx(material.Checkbox, { checked: strict, onChange: handleSetStrict }) }), jsxRuntime.jsx(material.FormHelperText, { children: "Don't import any features if any lines in the GFF3 are unable to be processed" }), featuresCount && featuresCount > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.FormControlLabel, { label: "Delete existing features", disabled: submitted && !errorMessage, control: jsxRuntime.jsx(material.Checkbox, { checked: deleteFeatures, onChange: handleDeleteFeatures, slotProps: { input: { 'aria-label': 'controlled' } }, color: "warning" }) }), jsxRuntime.jsxs(material.FormHelperText, { children: ["This assembly has ", featuresCount, " features that will be deleted"] })] })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !(selectedAssembly && file && featuresCount !== undefined) ||
+                                    submitted, variant: "contained", type: "submit", children: submitted ? 'Submitting...' : 'Submit' }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function LogOut({ handleClose, session }) {
     const { internetAccounts } = mobxStateTree.getRoot(session);
     const [errorMessage, setErrorMessage] = React.useState('');
@@ -4096,18 +3868,7 @@ function LogOut({ handleClose, session }) {
         selectedInternetAccount.removeToken();
         globalThis.location.reload();
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Log out", handleClose: handleClose, maxWidth: false, "data-testid": "log-out" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                apolloInternetAccounts.length > 1 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(material.DialogContentText, null, "Select account"),
-                    React__default["default"].createElement(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount }, internetAccounts.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-                React__default["default"].createElement(material.DialogContentText, null, "Are you sure you want to log out?")),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { disabled: !selectedInternetAccount, variant: "contained", type: "submit" }, "Log Out"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Log out", handleClose: handleClose, maxWidth: false, "data-testid": "log-out", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx(material.DialogContentText, { children: "Are you sure you want to log out?" })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !selectedInternetAccount, variant: "contained", type: "submit", children: "Log Out" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function ManageChecks({ handleClose, session }) {
@@ -4224,37 +3985,18 @@ function ManageChecks({ handleClose, session }) {
         }
         setSelectedInternetAccount(newlySelectedInternetAccount);
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Manage Checks", handleClose: handleClose, "data-testid": "manage-checks" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, null,
-                apolloInternetAccounts.length > 1 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(material.DialogContentText, null, "Select account"),
-                    React__default["default"].createElement(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage }, internetAccounts.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-                React__default["default"].createElement(material.DialogContentText, null, "Select assembly"),
-                React__default["default"].createElement(material.Select, { style: { width: 300 }, labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName)))),
-                React__default["default"].createElement("br", null),
-                React__default["default"].createElement("br", null),
-                React__default["default"].createElement(material.TableContainer, { component: material.Paper },
-                    React__default["default"].createElement(material.Table, null,
-                        React__default["default"].createElement(material.TableHead, null,
-                            React__default["default"].createElement(material.TableRow, null,
-                                React__default["default"].createElement(material.TableCell, null, "Check name"),
-                                React__default["default"].createElement(material.TableCell, null, "Use check"))),
-                        React__default["default"].createElement(material.TableBody, null, checks.map((check) => (React__default["default"].createElement(material.TableRow, { key: check._id },
-                            React__default["default"].createElement(material.TableCell, null, check.name),
-                            React__default["default"].createElement(material.TableCell, null,
-                                React__default["default"].createElement(material.Checkbox, { value: check._id, checked: selectedChecks.includes(check._id), onChange: handleCheckboxChange }))))))))),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit" }, "Submit"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Manage Checks", handleClose: handleClose, "data-testid": "manage-checks", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx(material.DialogContentText, { children: "Select assembly" }), jsxRuntime.jsx(material.Select, { style: { width: 300 }, labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(material.TableContainer, { component: material.Paper, children: jsxRuntime.jsxs(material.Table, { children: [jsxRuntime.jsx(material.TableHead, { children: jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { children: "Check name" }), jsxRuntime.jsx(material.TableCell, { children: "Use check" })] }) }), jsxRuntime.jsx(material.TableBody, { children: checks.map((check) => (jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(material.TableCell, { children: check.name }), jsxRuntime.jsx(material.TableCell, { children: jsxRuntime.jsx(material.Checkbox, { value: check._id, checked: selectedChecks.includes(check._id), onChange: handleCheckboxChange }) })] }, check._id))) })] }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
+}
+
+function isApolloInternetAccount(internetAccount) {
+    return internetAccount.type === 'ApolloInternetAccount';
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function ManageUsers({ changeManager, handleClose, session, }) {
     const { internetAccounts } = mobxStateTree.getRoot(session);
-    const apolloInternetAccounts = internetAccounts.filter((ia) => ia.type === 'ApolloInternetAccount' && ia.role?.includes('admin'));
+    const apolloInternetAccounts = internetAccounts
+        .filter((ia) => isApolloInternetAccount(ia))
+        .filter((ia) => ia.role?.includes('admin'));
     if (apolloInternetAccounts.length === 0) {
         throw new Error('No Apollo internet account found');
     }
@@ -4269,16 +4011,14 @@ function ManageUsers({ changeManager, handleClose, session, }) {
                 locationType: 'UriLocation',
                 uri,
             });
-            if (apolloFetch) {
-                const response = await apolloFetch(uri, { method: 'GET' });
-                if (!response.ok) {
-                    const newErrorMessage = await createFetchErrorMessage(response, 'Error when getting user data from db');
-                    setErrorMessage(newErrorMessage);
-                    return;
-                }
-                const data = (await response.json());
-                setUsers(data.map((u) => (u.role === undefined ? { ...u, role: '' } : u)));
+            const response = await apolloFetch(uri, { method: 'GET' });
+            if (!response.ok) {
+                const newErrorMessage = await createFetchErrorMessage(response, 'Error when getting user data from db');
+                setErrorMessage(newErrorMessage);
+                return;
             }
+            const data = (await response.json());
+            setUsers(data.map((u) => (u.role === undefined ? { ...u, role: '' } : u)));
         }
         getUsers().catch((error) => {
             setErrorMessage(String(error));
@@ -4334,11 +4074,11 @@ function ManageUsers({ changeManager, handleClose, session, }) {
             field: 'actions',
             type: 'actions',
             getActions: (params) => [
-                React__default["default"].createElement(xDataGrid.GridActionsCellItem, { key: `delete-${params.id}`, icon: React__default["default"].createElement(DeleteIcon__default["default"], null), onClick: async () => {
+                jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(DeleteIcon, {}), onClick: async () => {
                         if (globalThis.confirm('Delete this user?')) {
                             await deleteUser(params.id);
                         }
-                    }, disabled: isCurrentUser(params.id), label: "Delete" }),
+                    }, disabled: isCurrentUser(params.id), label: "Delete" }, `delete-${params.id}`),
             ],
         },
     ];
@@ -4360,22 +4100,11 @@ function ManageUsers({ changeManager, handleClose, session, }) {
         });
         return newRow;
     }
-    return (React__default["default"].createElement(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users" },
-        React__default["default"].createElement(material.DialogContent, null,
-            apolloInternetAccounts.length > 1 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(material.DialogContentText, null, "Select account"),
-                React__default["default"].createElement(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage }, internetAccounts.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-            React__default["default"].createElement("div", { style: { height: '100%', width: '100%' } },
-                React__default["default"].createElement(xDataGrid.DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
-                        setErrorMessage(String(error));
-                    } }))),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxRuntime.jsxs(material.DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx("div", { style: { height: '100%', width: '100%' }, children: jsxRuntime.jsx(xDataGrid.DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
+                                setErrorMessage(String(error));
+                            } }) })] }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function getNeighboringExons(referenceExon) {
     const neighboringExons = {};
     const tx = referenceExon.parent;
@@ -4459,20 +4188,10 @@ function MergeExons({ changeManager, handleClose, selectedFeature, setSelectedFe
         setSelectedExon(neighboringExons[value]);
     };
     const neighboringExons = getNeighboringExons(sourceFeature);
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Merge exons", handleClose: handleClose, maxWidth: false, "data-testid": "merge-exons" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                Object.keys(neighboringExons).length === 0
-                    ? 'There are no neighbouring exons to merge with'
-                    : 'Merge with exon on:',
-                React__default["default"].createElement(material.FormControl, { style: { marginTop: 5 } },
-                    React__default["default"].createElement(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedExon, onChange: handleTypeChange }, Object.keys(neighboringExons).map((key) => (React__default["default"].createElement(material.FormControlLabel, { value: key, key: key, control: React__default["default"].createElement(material.Radio, null), label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" }, makeRadioButtonName$1(key, neighboringExons)) })))))),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: Object.keys(neighboringExons).length === 0 ||
-                        selectedExon === undefined }, "Submit"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Merge exons", handleClose: handleClose, maxWidth: false, "data-testid": "merge-exons", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [Object.keys(neighboringExons).length === 0
+                                ? 'There are no neighbouring exons to merge with'
+                                : 'Merge with exon on:', jsxRuntime.jsx(material.FormControl, { style: { marginTop: 5 }, children: jsxRuntime.jsx(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedExon, onChange: handleTypeChange, children: Object.keys(neighboringExons).map((key) => (jsxRuntime.jsx(material.FormControlLabel, { value: key, control: jsxRuntime.jsx(material.Radio, {}), label: jsxRuntime.jsx(material.Box, { display: "flex", alignItems: "center", children: makeRadioButtonName$1(key, neighboringExons) }) }, key))) }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: Object.keys(neighboringExons).length === 0 ||
+                                    selectedExon === undefined, children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function getTranscripts(referenceTranscript, session) {
@@ -4542,23 +4261,12 @@ function MergeTranscripts({ changeManager, handleClose, selectedFeature, session
         const { value } = e.target;
         setSelectedTranscriptId(value);
     };
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Merge transcripts", handleClose: handleClose, maxWidth: false, "data-testid": "merge-transcripts" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                Object.keys(transcripts).length === 0
-                    ? 'There are no transcripts to merge with'
-                    : 'Merge with transcript:',
-                React__default["default"].createElement(material.FormControl, { style: { marginTop: 5 } },
-                    React__default["default"].createElement(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedTranscriptId, onChange: handleTypeChange }, Object.keys(transcripts).map((key) => (React__default["default"].createElement(material.FormControlLabel, { value: key, key: key, control: React__default["default"].createElement(material.Radio, null), label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" }, makeRadioButtonName(transcripts[key])) })))))),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: Object.keys(transcripts).length === 0 ||
-                        selectedTranscriptId === undefined }, "Submit"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Merge transcripts", handleClose: handleClose, maxWidth: false, "data-testid": "merge-transcripts", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [Object.keys(transcripts).length === 0
+                                ? 'There are no transcripts to merge with'
+                                : 'Merge with transcript:', jsxRuntime.jsx(material.FormControl, { style: { marginTop: 5 }, children: jsxRuntime.jsx(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedTranscriptId, onChange: handleTypeChange, children: Object.keys(transcripts).map((key) => (jsxRuntime.jsx(material.FormControlLabel, { value: key, control: jsxRuntime.jsx(material.Radio, {}), label: jsxRuntime.jsx(material.Box, { display: "flex", alignItems: "center", children: makeRadioButtonName(transcripts[key]) }) }, key))) }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: Object.keys(transcripts).length === 0 ||
+                                    selectedTranscriptId === undefined, children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 function OpenLocalFile({ handleClose, session }) {
     const { apolloDataStore } = session;
     const { addAssembly, addSessionAssembly, assemblyManager, notify } = session;
@@ -4640,26 +4348,10 @@ function OpenLocalFile({ handleClose, session }) {
     function handleAssemblyNameChange(event) {
         setAssemblyName(event.target.value);
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Open local GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "open-local-file" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.FormControl, null,
-                    React__default["default"].createElement("div", { style: { flexDirection: 'row' } },
-                        React__default["default"].createElement(material.Button, { variant: "contained", component: "label", style: { marginRight: theme.spacing() } },
-                            "Choose File",
-                            React__default["default"].createElement("input", { type: "file", required: true, hidden: true, onChange: handleChangeFile })),
-                        file ? file.name : 'No file chosen'),
-                    React__default["default"].createElement(material.FormHelperText, null, "Make sure your GFF3 has an embedded FASTA section")),
-                React__default["default"].createElement(material.TextField, { required: true, label: "Assembly name", value: assemblyName, onChange: handleAssemblyNameChange })),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { disabled: false, variant: "contained", type: "submit" }, submitted ? 'Submitting...' : 'Submit'),
-                React__default["default"].createElement(material.Button, { disabled: submitted, variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Open local GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "open-local-file", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsxs(material.FormControl, { children: [jsxRuntime.jsxs("div", { style: { flexDirection: 'row' }, children: [jsxRuntime.jsxs(material.Button, { variant: "contained", component: "label", style: { marginRight: theme.spacing() }, children: ["Choose File", jsxRuntime.jsx("input", { type: "file", required: true, hidden: true, onChange: handleChangeFile })] }), file ? file.name : 'No file chosen'] }), jsxRuntime.jsx(material.FormHelperText, { children: "Make sure your GFF3 has an embedded FASTA section" })] }), jsxRuntime.jsx(material.TextField, { required: true, label: "Assembly name", value: assemblyName, onChange: handleAssemblyNameChange })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: false, variant: "contained", type: "submit", children: submitted ? 'Submitting...' : 'Submit' }), jsxRuntime.jsx(material.Button, { disabled: submitted, variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
-const useStyles$e = mui.makeStyles()((theme) => ({
+const useStyles$e = tssReact.makeStyles()((theme) => ({
     changeTextarea: {
         fontFamily: 'monospace',
         width: 600,
@@ -4695,7 +4387,7 @@ function ViewChangeLog({ handleClose, session }) {
             field: 'changes',
             headerName: 'Change JSON',
             width: 600,
-            renderCell: ({ value }) => (React__default["default"].createElement("textarea", { className: classes.changeTextarea, value: JSON.stringify(value), readOnly: true })),
+            renderCell: ({ value }) => (jsxRuntime.jsx("textarea", { className: classes.changeTextarea, value: JSON.stringify(value), readOnly: true })),
         },
         { field: 'user', headerName: 'User', width: 140 },
         {
@@ -4743,20 +4435,12 @@ function ViewChangeLog({ handleClose, session }) {
         const newAssembly = assemblies.find((asm) => asm.name === e.target.value);
         setSelectedAssembly(newAssembly);
     }
-    return (React__default["default"].createElement(Dialog, { open: true, fullScreen: true, title: "View change log", handleClose: handleClose, "data-testid": "view-changelog" },
-        React__default["default"].createElement(material.Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName || option.name)))),
-        React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(xDataGrid.DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, initialState: {
-                    sorting: { sortModel: [{ field: 'sequence', sort: 'desc' }] },
-                    columns: { columnVisibilityModel: { sequence: false } },
-                } })),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, fullScreen: true, title: "View change log", handleClose: handleClose, "data-testid": "view-changelog", children: [jsxRuntime.jsx(material.Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName || option.name }, option.name))) }), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(xDataGrid.DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, initialState: {
+                        sorting: { sortModel: [{ field: 'sequence', sort: 'desc' }] },
+                        columns: { columnVisibilityModel: { sequence: false } },
+                    } }) }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const columns = [
     { field: 'refName', headerName: 'Ref Name' },
     { field: 'aliases', headerName: 'Aliases', editable: true, flex: 1 },
@@ -4900,31 +4584,13 @@ const AddRefSeqAliases = mobxReact.observer(function AddRefSeqAliases({ changeMa
         });
         handleClose();
     };
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Add reference sequence aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-refseq-alias", fullWidth: true },
-        React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-            React__default["default"].createElement(material.Grid, { container: true, spacing: 2 },
-                React__default["default"].createElement(material.Grid, null,
-                    React__default["default"].createElement(material.FormControl, { disabled: enableSubmit && !errorMessage, fullWidth: true },
-                        React__default["default"].createElement(material.InputLabel, { id: "demo-simple-select-label" }, "Assembly"),
-                        React__default["default"].createElement(material.Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Assembly", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, style: { minWidth: 150 } }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName)))))),
-                React__default["default"].createElement(material.Grid, null,
-                    React__default["default"].createElement(material.InputLabel, null, "Load RefName alias"),
-                    React__default["default"].createElement("input", { type: "file", onChange: handleChangeFileHandler, ref: fileRef, disabled: (enableSubmit && !errorMessage) || !selectedAssembly }))),
-            selectedAssembly && refNameAliasMap.size > 0 ? (React__default["default"].createElement("div", { style: { height: 200, width: '100%', marginTop: 20 } },
-                React__default["default"].createElement(material.InputLabel, null, "Refname aliases found for selected assembly."),
-                React__default["default"].createElement(xDataGrid.DataGrid, { rows: getTableRows(), columns: columns, initialState: {
-                        pagination: {
-                            paginationModel: { page: 0, pageSize: 5 },
-                        },
-                    }, pageSizeOptions: [5, 10], onRowSelectionModelChange: rowSelectionChange, processRowUpdate: processRowUpdate, checkboxSelection: true, disableRowSelectionExcludeModel: true }))) : null),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: !enableSubmit, onClick: handleSubmit }, "Submit"),
-            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Add reference sequence aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-refseq-alias", fullWidth: true, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsxs(material.Grid, { container: true, spacing: 2, children: [jsxRuntime.jsx(material.Grid, { children: jsxRuntime.jsxs(material.FormControl, { disabled: enableSubmit && !errorMessage, fullWidth: true, children: [jsxRuntime.jsx(material.InputLabel, { id: "demo-simple-select-label", children: "Assembly" }), jsxRuntime.jsx(material.Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Assembly", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, style: { minWidth: 150 }, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName }, option.name))) })] }) }), jsxRuntime.jsxs(material.Grid, { children: [jsxRuntime.jsx(material.InputLabel, { children: "Load RefName alias" }), jsxRuntime.jsx("input", { type: "file", onChange: handleChangeFileHandler, ref: fileRef, disabled: (enableSubmit && !errorMessage) || !selectedAssembly })] })] }), selectedAssembly && refNameAliasMap.size > 0 ? (jsxRuntime.jsxs("div", { style: { height: 200, width: '100%', marginTop: 20 }, children: [jsxRuntime.jsx(material.InputLabel, { children: "Refname aliases found for selected assembly." }), jsxRuntime.jsx(xDataGrid.DataGrid, { rows: getTableRows(), columns: columns, initialState: {
+                                    pagination: {
+                                        paginationModel: { page: 0, pageSize: 5 },
+                                    },
+                                }, pageSizeOptions: [5, 10], onRowSelectionModelChange: rowSelectionChange, processRowUpdate: processRowUpdate, checkboxSelection: true, disableRowSelectionExcludeModel: true })] })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: !enableSubmit, onClick: handleSubmit, children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function ViewCheckResults({ handleClose, session, }) {
     const { internetAccounts } = mobxStateTree.getRoot(session);
     const { collaborationServerDriver } = session.apolloDataStore;
@@ -4983,20 +4649,12 @@ function ViewCheckResults({ handleClose, session, }) {
         const newAssembly = assemblies.find((asm) => asm.name === e.target.value);
         setSelectedAssembly(newAssembly);
     }
-    return (React__default["default"].createElement(Dialog, { open: true, fullScreen: true, title: "View check results", handleClose: handleClose, "data-testid": "view-check-results" },
-        React__default["default"].createElement(material.Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName)))),
-        React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(xDataGrid.DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, initialState: {
-                    sorting: { sortModel: [{ field: 'name', sort: 'asc' }] },
-                    columns: { columnVisibilityModel: { name: true } },
-                } })),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, fullScreen: true, title: "View check results", handleClose: handleClose, "data-testid": "view-check-results", children: [jsxRuntime.jsx(material.Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(xDataGrid.DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, initialState: {
+                        sorting: { sortModel: [{ field: 'name', sort: 'asc' }] },
+                        columns: { columnVisibilityModel: { name: true } },
+                    } }) }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function exonIsSplittable(exonToBeSplit) {
     if (exonToBeSplit.max - exonToBeSplit.min < 2) {
         return {
@@ -5036,33 +4694,79 @@ function SplitExon({ changeManager, handleClose, selectedFeature, setSelectedFea
             parentFeatureId: sourceFeature.parent._id,
             upstreamCut,
             downstreamCut,
-            leftExonId: new ObjectID__default["default"]().toHexString(),
-            rightExonId: new ObjectID__default["default"]().toHexString(),
+            leftExonId: new ObjectID().toHexString(),
+            rightExonId: new ObjectID().toHexString(),
         });
         void changeManager.submit(change);
         handleClose();
         event.preventDefault();
     }
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Split exon", handleClose: handleClose, maxWidth: false, "data-testid": "split-exon" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
-            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React__default["default"].createElement(material.DialogContentText, null, makeDialogText(exonToBeSplit))),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: !exonIsSplittable(exonToBeSplit).isSplittable }, "Yes"),
-                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Split exon", handleClose: handleClose, maxWidth: false, "data-testid": "split-exon", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsx(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsxRuntime.jsx(material.DialogContentText, { children: makeDialogText(exonToBeSplit) }) }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: !exonIsSplittable(exonToBeSplit).isSplittable, children: "Yes" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
+}
+
+function DuplicateTranscript({ changeManager, handleClose, session, sourceAssemblyId, sourceFeature, setSelectedFeature, }) {
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const { notify } = session;
+    async function onSubmit(event) {
+        event.preventDefault();
+        setErrorMessage('');
+        try {
+            const parentGene = sourceFeature.parent;
+            if (!parentGene) {
+                setErrorMessage('No parent gene found for this transcript');
+                return;
+            }
+            const transcriptSnapshot = mobxStateTree.getSnapshot(sourceFeature);
+            const newTranscriptId = new ObjectID().toHexString();
+            const duplicateTranscript = {
+                ...transcriptSnapshot,
+                _id: newTranscriptId,
+            };
+            if (duplicateTranscript.children) {
+                const newChildren = {};
+                for (const [, child] of Object.entries(duplicateTranscript.children)) {
+                    const newChildId = new ObjectID().toHexString();
+                    newChildren[newChildId] = {
+                        ...child,
+                        _id: newChildId,
+                    };
+                }
+                duplicateTranscript.children = newChildren;
+            }
+            const change = new shared.AddFeatureChange({
+                parentFeatureId: parentGene._id,
+                changedIds: [parentGene._id],
+                typeName: 'AddFeatureChange',
+                assembly: sourceAssemblyId,
+                addedFeature: duplicateTranscript,
+            });
+            await changeManager.submit(change).then(() => {
+                setSelectedFeature(undefined);
+                session.apolloSetSelectedFeature(newTranscriptId);
+                notify('Successfully duplicated transcript', 'success');
+            });
+            handleClose();
+        }
+        catch (error) {
+            setErrorMessage(error instanceof Error
+                ? error.message
+                : 'Failed to duplicate transcript');
+        }
+    }
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Duplicate transcript", handleClose: handleClose, maxWidth: false, "data-testid": "duplicate-transcript", children: [jsxRuntime.jsxs("form", { onSubmit: (event) => {
+                    void onSubmit(event);
+                }, children: [jsxRuntime.jsx(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsxRuntime.jsx(material.DialogContentText, { children: "Are you sure you want to create a duplicate of this transcript?" }) }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", children: "Yes" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "button", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function addTopLevelAdminMenus(rootModel) {
     rootModel.appendToMenu('Apollo', {
         label: 'Admin',
         type: 'subMenu',
-        icon: AdminPanelSettingsIcon__default["default"],
+        icon: AdminPanelSettingsIcon,
         subMenu: [
             {
                 label: 'Add Assembly',
-                icon: AddIcon__default["default"],
+                icon: AddIcon,
                 onClick: (session) => {
                     session.queueDialog((doneCallback) => [
                         AddAssembly,
@@ -5078,7 +4782,7 @@ function addTopLevelAdminMenus(rootModel) {
             },
             {
                 label: 'Delete Assembly',
-                icon: DeleteIcon__default["default"],
+                icon: DeleteIcon,
                 onClick: (session) => {
                     session.queueDialog((doneCallback) => [
                         DeleteAssembly,
@@ -5094,7 +4798,7 @@ function addTopLevelAdminMenus(rootModel) {
             },
             {
                 label: 'Import Features',
-                icon: InputIcon__default["default"],
+                icon: InputIcon,
                 onClick: (session) => {
                     session.queueDialog((doneCallback) => [
                         ImportFeatures,
@@ -5140,7 +4844,7 @@ function addTopLevelAdminMenus(rootModel) {
             },
             {
                 label: 'Manage Users',
-                icon: PersonIcon__default["default"],
+                icon: PersonIcon,
                 onClick: (session) => {
                     session.queueDialog((doneCallback) => [
                         ManageUsers,
@@ -5156,7 +4860,7 @@ function addTopLevelAdminMenus(rootModel) {
             },
             {
                 label: 'Manage Checks',
-                icon: RuleIcon__default["default"],
+                icon: RuleIcon,
                 onClick: (session) => {
                     session.queueDialog((doneCallback) => [
                         ManageChecks,
@@ -5176,23 +4880,15 @@ function addTopLevelAdminMenus(rootModel) {
 // Icon source: https://developers.google.com/identity/branding-guidelines
 function Google(props) {
     const { color } = props;
-    return (React__default["default"].createElement(material.SvgIcon, { viewBox: "0 0 18 18", style: { fontSize: 18, marginRight: 4 }, ...props }, color === 'disabled' ? (React__default["default"].createElement("path", { d: "M9.001,10.71 l0,-3.348 l8.424,0 c0.126,0.567,0.225,1.098,0.225,1.845 c0,5.139,-3.447,8.793,-8.64,8.793 c-4.968,0,-9,-4.032,-9,-9 c0,-4.968,4.032,-9,9,-9 c2.43,0,4.464,0.891,6.021,2.349 l-2.556,2.484 c-0.648,-0.612,-1.782,-1.332,-3.465,-1.332 c-2.979,0,-5.409,2.475,-5.409,5.508 c0,3.033,2.43,5.508,5.409,5.508 c3.447,0,4.716,-2.385,4.95,-3.798 l-4.959,0 l0,-0.009 z" })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("path", { d: "M17.64,9.20454545 c0,-0.638,-0.057,-1.252,-0.164,-1.841 l-8.476,0 l0,3.481 l4.844,0 c-0.209,1.125,-0.843,2.079,-1.796,2.717 l0,2.258 l2.908,0 c1.702,-1.567,2.684,-3.874,2.684,-6.615 l0,0 z", fill: "#4285F4" }),
-        React__default["default"].createElement("path", { d: "M9,18 c2.43,0,4.467,-0.806,5.956,-2.18 l-2.908,-2.259 c-0.806,0.54,-1.837,0.859,-3.048,0.859 c-2.344,0,-4.328,-1.583,-5.036,-3.71 l-3.007,0 l0,2.332 c1.481,2.941,4.525,4.958,8.043,4.958 l0,0 z", fill: "#34A853" }),
-        React__default["default"].createElement("path", { d: "M3.96409091,10.71 c-0.18,-0.54,-0.282,-1.117,-0.282,-1.71 c0,-0.593,0.102,-1.17,0.282,-1.71 l0,-2.332 l-3.007,0 c-0.609,1.215,-0.957,2.59,-0.957,4.042 c0,1.452,0.348,2.827,0.957,4.042 l3.007,-2.332 l0,0 z", fill: "#FBBC05" }),
-        React__default["default"].createElement("path", { d: "M9,3.57954545 c1.321,0,2.508,0.454,3.44,1.346 l2.582,-2.581 c-1.559,-1.453,-3.596,-2.345,-6.022,-2.345 c-3.518,0,-6.562,2.017,-8.043,4.959 l3.007,2.331 c0.708,-2.127,2.692,-3.71,5.036,-3.71 l0,0 z", fill: "#EA4335" })))));
+    return (jsxRuntime.jsx(material.SvgIcon, { viewBox: "0 0 18 18", style: { fontSize: 18, marginRight: 4 }, ...props, children: color === 'disabled' ? (jsxRuntime.jsx("path", { d: "M9.001,10.71 l0,-3.348 l8.424,0 c0.126,0.567,0.225,1.098,0.225,1.845 c0,5.139,-3.447,8.793,-8.64,8.793 c-4.968,0,-9,-4.032,-9,-9 c0,-4.968,4.032,-9,9,-9 c2.43,0,4.464,0.891,6.021,2.349 l-2.556,2.484 c-0.648,-0.612,-1.782,-1.332,-3.465,-1.332 c-2.979,0,-5.409,2.475,-5.409,5.508 c0,3.033,2.43,5.508,5.409,5.508 c3.447,0,4.716,-2.385,4.95,-3.798 l-4.959,0 l0,-0.009 z" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M17.64,9.20454545 c0,-0.638,-0.057,-1.252,-0.164,-1.841 l-8.476,0 l0,3.481 l4.844,0 c-0.209,1.125,-0.843,2.079,-1.796,2.717 l0,2.258 l2.908,0 c1.702,-1.567,2.684,-3.874,2.684,-6.615 l0,0 z", fill: "#4285F4" }), jsxRuntime.jsx("path", { d: "M9,18 c2.43,0,4.467,-0.806,5.956,-2.18 l-2.908,-2.259 c-0.806,0.54,-1.837,0.859,-3.048,0.859 c-2.344,0,-4.328,-1.583,-5.036,-3.71 l-3.007,0 l0,2.332 c1.481,2.941,4.525,4.958,8.043,4.958 l0,0 z", fill: "#34A853" }), jsxRuntime.jsx("path", { d: "M3.96409091,10.71 c-0.18,-0.54,-0.282,-1.117,-0.282,-1.71 c0,-0.593,0.102,-1.17,0.282,-1.71 l0,-2.332 l-3.007,0 c-0.609,1.215,-0.957,2.59,-0.957,4.042 c0,1.452,0.348,2.827,0.957,4.042 l3.007,-2.332 l0,0 z", fill: "#FBBC05" }), jsxRuntime.jsx("path", { d: "M9,3.57954545 c1.321,0,2.508,0.454,3.44,1.346 l2.582,-2.581 c-1.559,-1.453,-3.596,-2.345,-6.022,-2.345 c-3.518,0,-6.562,2.017,-8.043,4.959 l3.007,2.331 c0.708,-2.127,2.692,-3.71,5.036,-3.71 l0,0 z", fill: "#EA4335" })] })) }));
 }
 // Icon source: https://learn.microsoft.com/en-us/azure/active-directory/develop/howto-add-branding-in-azure-ad-apps
 function Microsoft(props) {
     const { color } = props;
-    return (React__default["default"].createElement(material.SvgIcon, { viewBox: "0 0 21 21", style: { fontSize: 21 }, ...props },
-        React__default["default"].createElement("rect", { x: "1", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#F25022' }),
-        React__default["default"].createElement("rect", { x: "1", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#00A4EF' }),
-        React__default["default"].createElement("rect", { x: "11", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#939393' : '#7FBA00' }),
-        React__default["default"].createElement("rect", { x: "11", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#B9B9B9' : '#FFB900' })));
+    return (jsxRuntime.jsxs(material.SvgIcon, { viewBox: "0 0 21 21", style: { fontSize: 21 }, ...props, children: [jsxRuntime.jsx("rect", { x: "1", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#F25022' }), jsxRuntime.jsx("rect", { x: "1", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#00A4EF' }), jsxRuntime.jsx("rect", { x: "11", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#939393' : '#7FBA00' }), jsxRuntime.jsx("rect", { x: "11", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#B9B9B9' : '#FFB900' })] }));
 }
 
-const useStyles$d = mui.makeStyles()((theme) => ({
+const useStyles$d = tssReact.makeStyles()((theme) => ({
     loginButton: {
         marginBottom: theme.spacing(1),
         width: '220px',
@@ -5206,20 +4902,19 @@ const useStyles$d = mui.makeStyles()((theme) => ({
 function GoogleButton(props) {
     const { classes } = useStyles$d();
     const { disabled } = props;
-    return (React__default["default"].createElement(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: React__default["default"].createElement(Google, { color: disabled ? 'disabled' : undefined }), ...props }, "Sign in with Google"));
+    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Google, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Google" }));
 }
 function MicrosoftButton(props) {
     const { classes } = useStyles$d();
     const { disabled } = props;
-    return (React__default["default"].createElement(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: React__default["default"].createElement(Microsoft, { color: disabled ? 'disabled' : undefined }), ...props }, "Sign in with Microsoft"));
+    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Microsoft, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Microsoft" }));
 }
 function GuestButton(props) {
     const { classes } = useStyles$d();
-    return (React__default["default"].createElement(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: React__default["default"].createElement(AccountCircleIcon__default["default"], { fontSize: "small" }), ...props }, "Continue as Guest"));
+    return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: "Continue as Guest" }));
 }
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
-const useStyles$c = mui.makeStyles()((theme) => ({
+const useStyles$c = tssReact.makeStyles()((theme) => ({
     divider: {
         marginTop: theme.spacing(4),
         marginBottom: theme.spacing(5),
@@ -5249,7 +4944,7 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
             }
         });
         return () => {
-            controller.abort('AuthTypeSelector');
+            controller.abort(new DOMException('Error retrieving valid authentication types', 'AbortError'));
         };
     }, [baseURL]);
     function handleClick(authType) {
@@ -5266,28 +4961,24 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
     const allowGoogle = loginTypes.includes('google');
     const allowMicrosoft = loginTypes.includes('microsoft');
     const allowGuest = loginTypes.includes('guest');
-    return (React__default["default"].createElement(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo" },
-        React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 } },
-            allowGoogle ? (React__default["default"].createElement(GoogleButton, { disabled: !allowGoogle, onClick: () => {
-                    handleClick('google');
-                } })) : null,
-            allowMicrosoft ? (React__default["default"].createElement(MicrosoftButton, { disabled: !allowMicrosoft, onClick: () => {
-                    handleClick('microsoft');
-                } })) : null,
-            allowGuest ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(material.Divider, { className: classes.divider }),
-                React__default["default"].createElement(GuestButton, { onClick: () => {
-                        handleClick('guest');
-                    } }))) : null),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: () => {
-                    handleClose();
-                } }, "Cancel")),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: [allowGoogle ? (jsxRuntime.jsx(GoogleButton, { disabled: !allowGoogle, onClick: () => {
+                            handleClick('google');
+                        } })) : null, allowMicrosoft ? (jsxRuntime.jsx(MicrosoftButton, { disabled: !allowMicrosoft, onClick: () => {
+                            handleClick('microsoft');
+                        } })) : null, allowGuest ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { className: classes.divider }), jsxRuntime.jsx(GuestButton, { onClick: () => {
+                                    handleClick('guest');
+                                } })] })) : null] }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: () => {
+                        handleClose();
+                    }, children: "Cancel" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 };
 
 /* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/unbound-method */
+/* eslint-disable @typescript-eslint/no-misused-promises */
 const inWebWorker$1 = typeof sessionStorage === 'undefined';
 const stateModelFactory$3 = (configSchema) => {
     return pluggableElementTypes.InternetAccount.named('ApolloInternetAccount')
@@ -5340,7 +5031,6 @@ const stateModelFactory$3 = (configSchema) => {
             },
             finishOAuthWindow(event, resolve, reject) {
                 if (event.data.name !== `JBrowseAuthWindow-${self.internetAccountId}`) {
-                    this.deleteMessageChannel();
                     return;
                 }
                 const redirectUriWithInfo = event.data.redirectUri;
@@ -5699,7 +5389,7 @@ const stateModelFactory$3 = (configSchema) => {
         beforeDestroy() {
             self.removeBeforeUnloadListener();
             self.removeVisibilityChangeListener();
-            self.controller.abort('internet account beforeDestroy');
+            self.controller.abort(new DOMException('Cleaning up Apollo connection', 'AbortError'));
             self.socket.close();
         },
     }));
@@ -5770,7 +5460,7 @@ var configSchema$5 = configuration.ConfigurationSchema('ApolloRefNameAliasAdapte
 }, { explicitlyTyped: true });
 
 function installApolloRefNameAliasAdapter(pluginManager) {
-    pluginManager.addAdapterType(() => new AdapterType__default["default"]({
+    pluginManager.addAdapterType(() => new AdapterType({
         name: 'ApolloRefNameAliasAdapter',
         configSchema: configSchema$5,
         adapterMetadata: {
@@ -5783,6 +5473,10 @@ function installApolloRefNameAliasAdapter(pluginManager) {
 }
 
 /* eslint-disable @typescript-eslint/prefer-promise-reject-errors */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 function isApolloMessageData$1(data) {
     return (typeof data === 'object' &&
         data !== null &&
@@ -5874,7 +5568,7 @@ class ApolloSequenceAdapter extends BaseAdapter.BaseSequenceAdapter {
                     regionWithAssemblyName.end = region.end;
                 }
                 const { seq } = await backendDriver.getSequence(regionWithAssemblyName);
-                observer.next(new SimpleFeature__default["default"]({
+                observer.next(new SimpleFeature({
                     id: `${refName} ${start}-${end}`,
                     data: { refName, start, end, seq },
                 }));
@@ -5907,7 +5601,7 @@ class ApolloSequenceAdapter extends BaseAdapter.BaseSequenceAdapter {
                     messageId,
                 });
             });
-            observer.next(new SimpleFeature__default["default"]({
+            observer.next(new SimpleFeature({
                 id: `${refName} ${start}-${end}`,
                 data: { refName, start, end, seq },
             }));
@@ -5931,7 +5625,7 @@ var configSchema$4 = configuration.ConfigurationSchema('ApolloSequenceAdapter',
 }, { explicitlyTyped: true });
 
 function installApolloSequenceAdapter(pluginManager) {
-    pluginManager.addAdapterType(() => new AdapterType__default["default"]({
+    pluginManager.addAdapterType(() => new AdapterType({
         name: 'ApolloSequenceAdapter',
         configSchema: configSchema$4,
         adapterMetadata: {
@@ -5943,6 +5637,23 @@ function installApolloSequenceAdapter(pluginManager) {
     }));
 }
 
+function getMatchedFeature(query, feature) {
+    // @ts-expect-error this actually has a bit more info that a plain snapshot
+    const { children, indexedIds, ...featureWithoutChildren } = feature;
+    const featureString = JSON.stringify(featureWithoutChildren);
+    if (featureString.includes(query)) {
+        return feature;
+    }
+    if (!children) {
+        return undefined;
+    }
+    for (const subFeature of Object.values(children)) {
+        const matchedFeature = getMatchedFeature(query, subFeature);
+        if (matchedFeature) {
+            return matchedFeature;
+        }
+    }
+}
 class ApolloTextSearchAdapter extends BaseAdapter.BaseAdapter {
     get baseURL() {
         return configuration.readConfObject(this.config, 'baseURL').uri;
@@ -5955,11 +5666,13 @@ class ApolloTextSearchAdapter extends BaseAdapter.BaseAdapter {
     }
     mapBaseResult(features, assembly, query) {
         return features.map((feature) => {
+            const matchedObject = getMatchedFeature(query, feature) ?? feature;
             const refName = assembly.getCanonicalRefName(feature.refSeq);
-            return new BaseResult__default["default"]({
+            return new BaseResult({
                 label: query,
                 trackId: this.trackId,
-                locString: `${refName}:${feature.min + 1}..${feature.max}`,
+                locString: `${refName}:${matchedObject.min + 1}..${matchedObject.max}`,
+                matchedObject,
             });
         });
     }
@@ -6018,7 +5731,7 @@ function installApolloTextSearchAdapter(pluginManager) {
     }));
 }
 
-const useStyles$b = mui.makeStyles()((theme) => ({
+const useStyles$b = tssReact.makeStyles()((theme) => ({
     attributeKey: {
         fontWeight: 'bold',
         marginRight: theme.spacing(2),
@@ -6041,10 +5754,7 @@ function AttributeKey({ attributeKey: key }) {
         titleText =
             'On GFF3 export, this attribute will be changed to start with a lower-case letter because attributes starting with an upper-case letter are reserved in GFF3';
     }
-    return (React__default["default"].createElement("div", { style: { display: 'flex' } },
-        React__default["default"].createElement(material.Typography, { className: classes.attributeKey }, displayKey),
-        titleText ? (React__default["default"].createElement(material.Tooltip, { title: titleText },
-            React__default["default"].createElement(material.Chip, { icon: React__default["default"].createElement(InfoIcon__default["default"], null), label: "GFF3", size: "small", variant: "outlined" }))) : null));
+    return (jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(material.Typography, { className: classes.attributeKey, children: displayKey }), titleText ? (jsxRuntime.jsx(material.Tooltip, { title: titleText, children: jsxRuntime.jsx(material.Chip, { icon: jsxRuntime.jsx(InfoIcon, {}), label: "GFF3", size: "small", variant: "outlined" }) })) : null] }));
 }
 
 const customKeyName = 'Custom';
@@ -6075,22 +5785,13 @@ const AttributeKeySelector = mobxReact.observer(function AttributeKeySelector({
     function handleCancel() {
         setKey();
     }
-    return (React__default["default"].createElement("form", { onSubmit: handleSubmit },
-        React__default["default"].createElement("div", { style: { display: 'flex', flexDirection: 'column', margin: 8 } },
-            React__default["default"].createElement(material.FormControl, { variant: "outlined" },
-                React__default["default"].createElement(material.InputLabel, { id: "attribute-key-select-label" }, "Key"),
-                React__default["default"].createElement(material.Select, { labelId: "attribute-key-select-label", value: selectedKey, label: "Key", onChange: (event) => {
-                        setSelectedKey(event.target.value);
-                    } }, Object.keys(reservedKeys).map((val) => (React__default["default"].createElement(material.MenuItem, { key: val, value: val }, val))))),
-            isCustom ? (React__default["default"].createElement(material.TextField, { label: "Attribute key", variant: "outlined", id: "attributeKey", onChange: (event) => {
-                    setCustomKey(event.target.value);
-                } })) : null),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { color: "primary", variant: "contained", type: "submit", disabled: isCustom && !customKey }, "Add"),
-            React__default["default"].createElement(material.Button, { variant: "outlined", onClick: handleCancel }, "Cancel"))));
+    return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', margin: 8 }, children: [jsxRuntime.jsxs(material.FormControl, { variant: "outlined", children: [jsxRuntime.jsx(material.InputLabel, { id: "attribute-key-select-label", children: "Key" }), jsxRuntime.jsx(material.Select, { labelId: "attribute-key-select-label", value: selectedKey, label: "Key", onChange: (event) => {
+                                    setSelectedKey(event.target.value);
+                                }, children: Object.keys(reservedKeys).map((val) => (jsxRuntime.jsx(material.MenuItem, { value: val, children: val }, val))) })] }), isCustom ? (jsxRuntime.jsx(material.TextField, { label: "Attribute key", variant: "outlined", id: "attributeKey", onChange: (event) => {
+                            setCustomKey(event.target.value);
+                        } })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { color: "primary", variant: "contained", type: "submit", disabled: isCustom && !customKey, children: "Add" }), jsxRuntime.jsx(material.Button, { variant: "outlined", onClick: handleCancel, children: "Cancel" })] })] }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const StringTextField = mobxReact.observer(function StringTextField({ onChangeCommitted, value: initialValue, ...props }) {
     const [value, setValue] = React.useState(String(initialValue));
     const [blur, setBlur] = React.useState(false);
@@ -6107,7 +5808,7 @@ const StringTextField = mobxReact.observer(function StringTextField({ onChangeCo
     function onChange(event) {
         setValue(event.target.value);
     }
-    return (React__default["default"].createElement(material.TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
+    return (jsxRuntime.jsx(material.TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
             if (event.key === 'Enter') {
                 inputNode?.blur();
             }
@@ -6147,31 +5848,22 @@ const DefaultAttributeEditor = mobxReact.observer(function DefaultAttributeEdito
             return newValues;
         });
     }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        newValues.map((value, idx) => (React__default["default"].createElement("div", { key: `${idx}-${value}`, style: { display: 'flex' } },
-            React__default["default"].createElement(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
-                    updateValue(idx, editedValue);
-                }, variant: "outlined", fullWidth: true }),
-            React__default["default"].createElement(material.IconButton, { "aria-label": "delete", size: "medium", edge: "end", onClick: () => {
-                    deleteValue(idx);
-                } },
-                React__default["default"].createElement(DeleteIcon__default["default"], { fontSize: "inherit" }))))),
-        React__default["default"].createElement(material.IconButton, { "aria-label": "add", size: "medium", color: "secondary", edge: "start", onClick: addValue },
-            React__default["default"].createElement(AddBoxIcon__default["default"], { fontSize: "inherit" })),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { color: "primary", variant: "contained", onClick: () => {
-                    setAttribute(newValues.filter(Boolean));
-                } }, isNew ? 'Add' : 'Update'),
-            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: () => {
-                    setAttribute();
-                } }, "Cancel"))));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [newValues.map((value, idx) => (jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
+                            updateValue(idx, editedValue);
+                        }, variant: "outlined", fullWidth: true }), jsxRuntime.jsx(material.IconButton, { "aria-label": "delete", size: "medium", edge: "end", onClick: () => {
+                            deleteValue(idx);
+                        }, children: jsxRuntime.jsx(DeleteIcon, { fontSize: "inherit" }) })] }, `${idx}-${value}`))), jsxRuntime.jsx(material.IconButton, { "aria-label": "add", size: "medium", color: "secondary", edge: "start", onClick: addValue, children: jsxRuntime.jsx(AddBoxIcon, { fontSize: "inherit" }) }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { color: "primary", variant: "contained", onClick: () => {
+                            setAttribute(newValues.filter(Boolean));
+                        }, children: isNew ? 'Add' : 'Update' }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: () => {
+                            setAttribute();
+                        }, children: "Cancel" })] })] }));
 });
 
 function DefaultAttributeViewer({ values }) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, values?.map((value, idx) => (React__default["default"].createElement(material.Typography, { key: `${idx}.${value}`, variant: "body2", color: "textSecondary" }, value)))));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: values?.map((value, idx) => (jsxRuntime.jsx(material.Typography, { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
 }
 
-const useStyles$a = mui.makeStyles()((theme) => ({
+const useStyles$a = tssReact.makeStyles()((theme) => ({
     list: {
         'li:nth-of-type(odd)': {
             backgroundColor: theme.palette.action.focus,
@@ -6267,49 +5959,30 @@ const Attributes = mobxReact.observer(function Attributes({ assembly, editable,
         void changeManager.submit(change);
     }
     const NewKeyAttributeEditor = pluginManager.evaluateExtensionPoint('Apollo-AttributeEditorComponent', DefaultAttributeEditor, { key: newKey });
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.List, { className: classes.list },
-            mobx.entries(attributes).map(([key, values]) => {
-                const AttributeEditor = pluginManager.evaluateExtensionPoint('Apollo-AttributeEditorComponent', DefaultAttributeEditor, { key });
-                const AttributeViewer = pluginManager.evaluateExtensionPoint('Apollo-AttributeViewerComponent', DefaultAttributeViewer, { key });
-                return (React__default["default"].createElement(material.ListItem, { key: key, secondaryAction: editable && !editingKey ? (React__default["default"].createElement(material.IconButton, { edge: "end", onClick: (event) => {
-                            handleListMenuClick(event, key);
-                        } },
-                        React__default["default"].createElement(MoreHorizIcon__default["default"], null))) : null },
-                    React__default["default"].createElement(material.ListItemText, { disableTypography: true, primary: React__default["default"].createElement(AttributeKey, { attributeKey: key }), secondary: editingKey === key ? (React__default["default"].createElement(AttributeEditor, { session: session, attributeValues: values, setAttribute: (newValues) => {
-                                setEditingKey(null);
-                                if (newValues) {
-                                    modifyFeatureAttribute(key, newValues);
-                                }
-                            } })) : (React__default["default"].createElement(AttributeViewer, { values: values })) })));
-            }),
-            newKey ? (React__default["default"].createElement(material.ListItem, null,
-                React__default["default"].createElement(material.ListItemText, { disableTypography: true, primary: React__default["default"].createElement(AttributeKey, { attributeKey: newKey }), secondary: React__default["default"].createElement(NewKeyAttributeEditor, { session: session, attributeValues: [], setAttribute: (newValues) => {
-                            if (newValues) {
-                                addFeatureAttribute(newKey, newValues);
-                            }
-                            setNewKey(undefined);
-                        }, isNew: true }) }))) : null),
-        editable ? (React__default["default"].createElement(material.Button, { color: "primary", variant: "contained", disabled: showAddNewForm || Boolean(newKey), onClick: () => {
-                setShowAddNewForm(true);
-            } }, "Add new")) : null,
-        showAddNewForm ? (React__default["default"].createElement(material.Paper, { variant: "outlined", style: { marginTop: 8 } },
-            React__default["default"].createElement(AttributeKeySelector, { session: session, setKey: (newKey) => {
-                    setNewKey(newKey);
-                    setShowAddNewForm(false);
-                } }))) : null,
-        React__default["default"].createElement(material.Menu, { anchorEl: anchorEl, open: open, onClose: handleClose },
-            React__default["default"].createElement(material.MenuItem, { onClick: handleDelete },
-                React__default["default"].createElement(material.ListItemIcon, null,
-                    React__default["default"].createElement(DeleteIcon__default["default"], { fontSize: "small" })),
-                React__default["default"].createElement(material.Typography, { variant: "inherit" }, "Delete")),
-            React__default["default"].createElement(material.MenuItem, { onClick: handleEdit },
-                React__default["default"].createElement(material.ListItemIcon, null,
-                    React__default["default"].createElement(EditIcon__default["default"], { fontSize: "small" })),
-                React__default["default"].createElement(material.Typography, { variant: "inherit" }, "Edit")))));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(material.List, { className: classes.list, children: [mobx.entries(attributes).map(([key, values]) => {
+                        const AttributeEditor = pluginManager.evaluateExtensionPoint('Apollo-AttributeEditorComponent', DefaultAttributeEditor, { key });
+                        const AttributeViewer = pluginManager.evaluateExtensionPoint('Apollo-AttributeViewerComponent', DefaultAttributeViewer, { key });
+                        return (jsxRuntime.jsx(material.ListItem, { secondaryAction: editable && !editingKey ? (jsxRuntime.jsx(material.IconButton, { edge: "end", onClick: (event) => {
+                                    handleListMenuClick(event, key);
+                                }, children: jsxRuntime.jsx(MoreHorizIcon, {}) })) : null, children: jsxRuntime.jsx(material.ListItemText, { disableTypography: true, primary: jsxRuntime.jsx(AttributeKey, { attributeKey: key }), secondary: editingKey === key ? (jsxRuntime.jsx(AttributeEditor, { session: session, attributeValues: values, setAttribute: (newValues) => {
+                                        setEditingKey(null);
+                                        if (newValues) {
+                                            modifyFeatureAttribute(key, newValues);
+                                        }
+                                    } })) : (jsxRuntime.jsx(AttributeViewer, { values: values })) }) }, key));
+                    }), newKey ? (jsxRuntime.jsx(material.ListItem, { children: jsxRuntime.jsx(material.ListItemText, { disableTypography: true, primary: jsxRuntime.jsx(AttributeKey, { attributeKey: newKey }), secondary: jsxRuntime.jsx(NewKeyAttributeEditor, { session: session, attributeValues: [], setAttribute: (newValues) => {
+                                    if (newValues) {
+                                        addFeatureAttribute(newKey, newValues);
+                                    }
+                                    setNewKey(undefined);
+                                }, isNew: true }) }) })) : null] }), editable ? (jsxRuntime.jsx(material.Button, { color: "primary", variant: "contained", disabled: showAddNewForm || Boolean(newKey), onClick: () => {
+                    setShowAddNewForm(true);
+                }, children: "Add new" })) : null, showAddNewForm ? (jsxRuntime.jsx(material.Paper, { variant: "outlined", style: { marginTop: 8 }, children: jsxRuntime.jsx(AttributeKeySelector, { session: session, setKey: (newKey) => {
+                        setNewKey(newKey);
+                        setShowAddNewForm(false);
+                    } }) })) : null, jsxRuntime.jsxs(material.Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, children: [jsxRuntime.jsxs(material.MenuItem, { onClick: handleDelete, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(DeleteIcon, { fontSize: "small" }) }), jsxRuntime.jsx(material.Typography, { variant: "inherit", children: "Delete" })] }), jsxRuntime.jsxs(material.MenuItem, { onClick: handleEdit, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(EditIcon, { fontSize: "small" }) }), jsxRuntime.jsx(material.Typography, { variant: "inherit", children: "Edit" })] })] })] }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const NumberTextField = mobxReact.observer(function NumberTextField({ onChangeCommitted, value: initialValue, ...props }) {
     const [value, setValue] = React.useState(String(initialValue));
     const [blur, setBlur] = React.useState(false);
@@ -6327,7 +6000,7 @@ const NumberTextField = mobxReact.observer(function NumberTextField({ onChangeCo
         setValue(event.target.value);
     }
     const error = Number.isNaN(Number(value));
-    return (React__default["default"].createElement(material.TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
+    return (jsxRuntime.jsx(material.TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
             if (event.key === 'Enter') {
                 inputNode?.blur();
             }
@@ -6420,24 +6093,11 @@ const BasicInformation = mobxReact.observer(function BasicInformation({ assembly
         }
         return terms;
     }
-    return (React__default["default"].createElement("div", { "data-testid": "basic_information" },
-        React__default["default"].createElement(NumberTextField, { margin: "dense", id: "start", label: "Start", fullWidth: true, variant: "outlined", value: min + 1, onChangeCommitted: handleStartChange }),
-        React__default["default"].createElement(NumberTextField, { margin: "dense", id: "end", label: "End", fullWidth: true, variant: "outlined", value: max, onChangeCommitted: handleEndChange }),
-        React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, feature), renderInput: (params) => (React__default["default"].createElement(material.TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
-                if (newValue) {
-                    handleTypeChange(newValue).catch(notifyError);
-                }
-            } }),
-        React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "radio", value: "1", checked: strand === 1, onChange: handleStrandChange }),
-            "Positive Strand (+)"),
-        React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "radio", value: "-1", checked: strand === -1, onChange: handleStrandChange }),
-            "Negative Strand (-)"),
-        React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "radio", value: "", checked: strand === undefined, onChange: handleStrandChange }),
-            "No Strand Information"),
-        errorMessage ? (React__default["default"].createElement(material.Typography, { color: "error" }, errorMessage)) : null));
+    return (jsxRuntime.jsxs("div", { "data-testid": "basic_information", children: [jsxRuntime.jsx(NumberTextField, { margin: "dense", id: "start", label: "Start", fullWidth: true, variant: "outlined", value: min + 1, onChangeCommitted: handleStartChange }), jsxRuntime.jsx(NumberTextField, { margin: "dense", id: "end", label: "End", fullWidth: true, variant: "outlined", value: max, onChangeCommitted: handleEndChange }), jsxRuntime.jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, feature), renderInput: (params) => (jsxRuntime.jsx(material.TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
+                    if (newValue) {
+                        handleTypeChange(newValue).catch(notifyError);
+                    }
+                } }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "radio", value: "1", checked: strand === 1, onChange: handleStrandChange }), "Positive Strand (+)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "radio", value: "-1", checked: strand === -1, onChange: handleStrandChange }), "Negative Strand (-)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "radio", value: "", checked: strand === undefined, onChange: handleStrandChange }), "No Strand Information"] }), errorMessage ? (jsxRuntime.jsx(material.Typography, { color: "error", children: errorMessage })) : null] }));
 });
 
 const FeatureDetailsNavigation = mobxReact.observer(function FeatureDetailsNavigation(props) {
@@ -6452,42 +6112,19 @@ const FeatureDetailsNavigation = mobxReact.observer(function FeatureDetailsNavig
     if (!(parent ?? childFeatures.length > 0)) {
         return null;
     }
-    return (React__default["default"].createElement("div", { style: { marginTop: 10 } },
-        parent && (React__default["default"].createElement("div", null,
-            React__default["default"].createElement(material.Typography, { variant: "h6" }, "Parent:"),
-            React__default["default"].createElement(material.Button, { variant: "contained", onClick: () => {
-                    model.setFeature(parent);
-                } },
-                parent.type,
-                getFeatureNameOrId$1(parent),
-                " (",
-                parent.min,
-                "..",
-                parent.max,
-                ")"))),
-        childFeatures.length > 0 && (React__default["default"].createElement("div", null,
-            React__default["default"].createElement(material.Typography, { variant: "h6" },
-                childFeatures.length === 1 ? 'Child' : 'Children',
-                ":"),
-            childFeatures.map((child) => (React__default["default"].createElement("div", { key: child._id, style: { marginBottom: 5 } },
-                React__default["default"].createElement(material.Button, { variant: "contained", onClick: () => {
-                        model.setFeature(child);
-                    } },
-                    child.type,
-                    getFeatureNameOrId$1(child),
-                    " (",
-                    child.min,
-                    "..",
-                    child.max,
-                    ")"))))))));
+    return (jsxRuntime.jsxs("div", { style: { marginTop: 10 }, children: [parent && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(material.Typography, { variant: "h6", children: "Parent:" }), jsxRuntime.jsxs(material.Button, { variant: "contained", onClick: () => {
+                            model.setFeature(parent);
+                        }, children: [parent.type, getFeatureNameOrId$1(parent), " (", parent.min, "..", parent.max, ")"] })] })), childFeatures.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(material.Typography, { variant: "h6", children: [childFeatures.length === 1 ? 'Child' : 'Children', ":"] }), childFeatures.map((child) => (jsxRuntime.jsx("div", { style: { marginBottom: 5 }, children: jsxRuntime.jsxs(material.Button, { variant: "contained", onClick: () => {
+                                model.setFeature(child);
+                            }, children: [child.type, getFeatureNameOrId$1(child), " (", child.min, "..", child.max, ")"] }) }, child._id)))] }))] }));
 });
 
 function formatSequence(seq, refName, start, end, wrap) {
     const header = `>${refName}:${start + 1}–${end}\n`;
-    const body = wrap === undefined ? seq : shared.splitStringIntoChunks(seq, wrap).join('\n');
+    const body = seq ;
     return `${header}${body}`;
 }
-const useStyles$9 = mui.makeStyles()({
+const useStyles$9 = tssReact.makeStyles()({
     sequence: {
         width: '100%',
         resize: 'vertical',
@@ -6513,11 +6150,10 @@ const Sequence = mobxReact.observer(function Sequence({ assembly, feature, refNa
             { assemblyName: assembly, refName, start: min, end: max },
         ]);
     }
-    return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence })));
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence }) }));
 });
 
-const useStyles$8 = mui.makeStyles()((theme) => ({
+const useStyles$8 = tssReact.makeStyles()((theme) => ({
     root: {
         padding: theme.spacing(2),
     },
@@ -6554,31 +6190,17 @@ const ApolloFeatureDetailsWidget = mobxReact.observer(function ApolloFeatureDeta
             setPanelState(panelState.filter((p) => p !== panel));
         }
     }
-    return (React__default["default"].createElement("div", { className: classes.root },
-        React__default["default"].createElement(BasicInformation, { feature: feature, session: session, assembly: currentAssembly._id }),
-        React__default["default"].createElement(material.Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('attributes'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'attributes');
-            } },
-            React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
-                React__default["default"].createElement(material.Typography, { component: "span" }, "Attributes")),
-            React__default["default"].createElement(material.AccordionDetails, null,
-                React__default["default"].createElement(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }))),
-        React__default["default"].createElement(material.Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'sequence');
-            } },
-            React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header" },
-                React__default["default"].createElement(material.Typography, { component: "span" }, "Sequence")),
-            React__default["default"].createElement(material.AccordionDetails, null, panelState.includes('sequence') && (React__default["default"].createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName })))),
-        React__default["default"].createElement(material.Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('related_features'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'related_features');
-            } },
-            React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header" },
-                React__default["default"].createElement(material.Typography, { component: "span" }, "Related features")),
-            React__default["default"].createElement(material.AccordionDetails, null,
-                React__default["default"].createElement(FeatureDetailsNavigation, { model: model, feature: feature })))));
+    return (jsxRuntime.jsxs("div", { className: classes.root, children: [jsxRuntime.jsx(BasicInformation, { feature: feature, session: session, assembly: currentAssembly._id }), jsxRuntime.jsxs(material.Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('attributes'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'attributes');
+                }, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(material.Typography, { component: "span", children: "Attributes" }) }), jsxRuntime.jsx(material.AccordionDetails, { children: jsxRuntime.jsx(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }) })] }), jsxRuntime.jsxs(material.Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'sequence');
+                }, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header", children: jsxRuntime.jsx(material.Typography, { component: "span", children: "Sequence" }) }), jsxRuntime.jsx(material.AccordionDetails, { children: panelState.includes('sequence') && (jsxRuntime.jsx(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName })) })] }), jsxRuntime.jsxs(material.Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('related_features'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'related_features');
+                }, children: [jsxRuntime.jsx(material.AccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header", children: jsxRuntime.jsx(material.Typography, { component: "span", children: "Related features" }) }), jsxRuntime.jsx(material.AccordionDetails, { children: jsxRuntime.jsx(FeatureDetailsNavigation, { model: model, feature: feature }) })] })] }));
 });
 
 /* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 const ApolloFeatureDetailsWidgetModel = mobxStateTree.types
     .model('ApolloFeatureDetailsWidget', {
     id: mst.ElementId,
@@ -6888,41 +6510,27 @@ const TranscriptSequence = mobxReact.observer(function TranscriptSequence({ asse
                 segment.sequence.slice(0, sequenceWrapLength - lastLineLength);
             const remainingLines = shared.splitStringIntoChunks(segment.sequence.slice(firstLine.length), sequenceWrapLength);
             const printLines = [firstLine, ...remainingLines];
-            const span = (React__default["default"].createElement("span", { key: `${segment.type}-${index}`, style: {
+            const span = (jsxRuntime.jsx("span", { style: {
                     background: getSegmentColor(segment.type),
                     color: theme.palette.getContrastText(getSegmentColor(segment.type)),
                     whiteSpace: 'pre-line',
-                } }, printLines.join('\n')));
+                }, children: printLines.join('\n') }, `${segment.type}-${index}`));
             seqElements.push(span);
         }
         return seqElements;
     }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Select, { defaultValue: "genomic", value: selectedOption, onChange: handleChangeSeqOption, size: "small", "data-testid": "sequenceOptionSelector" }, sequenceOptions.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option, value: option, "data-testid": `sequenceOption-${option}` }, option)))),
-        React__default["default"].createElement(material.Button, { variant: "contained", onClick: onCopyClick, style: { marginLeft: 10 }, size: "medium" }, "Copy sequence"),
-        React__default["default"].createElement(material.Paper, { style: {
-                fontFamily: 'monospace',
-                padding: theme.spacing(),
-                overflowX: 'auto',
-            }, ref: seqRef },
-            ">",
-            refSeq.name,
-            ":",
-            locationIntervals
-                .map((interval) => feature.strand === 1
-                ? `${interval.min + 1}-${interval.max}`
-                : `${interval.max}-${interval.min + 1}`)
-                .join(';'),
-            "(strand=",
-            feature.strand === 1 ? '+' : '-',
-            ";length=",
-            getSequenceLength(sequenceSegments),
-            ")",
-            React__default["default"].createElement("br", null),
-            wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH))));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Select, { defaultValue: "genomic", value: selectedOption, onChange: handleChangeSeqOption, size: "small", "data-testid": "sequenceOptionSelector", children: sequenceOptions.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option, "data-testid": `sequenceOption-${option}`, children: option }, option))) }), jsxRuntime.jsx(material.Button, { variant: "contained", onClick: onCopyClick, style: { marginLeft: 10 }, size: "medium", children: "Copy sequence" }), jsxRuntime.jsxs(material.Paper, { style: {
+                    fontFamily: 'monospace',
+                    padding: theme.spacing(),
+                    overflowX: 'auto',
+                }, ref: seqRef, children: [">", refSeq.name, ":", locationIntervals
+                        .map((interval) => feature.strand === 1
+                        ? `${interval.min + 1}-${interval.max}`
+                        : `${interval.max}-${interval.min + 1}`)
+                        .join(';'), "(strand=", feature.strand === 1 ? '+' : '-', ";length=", getSequenceLength(sequenceSegments), ")", jsxRuntime.jsx("br", {}), wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH)] })] }));
 });
 
-const StyledTextField = styled__default["default"](NumberTextField)(() => ({
+const StyledTextField = styled(NumberTextField)(() => ({
     '&.MuiFormControl-root': {
         marginTop: 0,
         marginBottom: 0,
@@ -6935,7 +6543,7 @@ const StyledTextField = styled__default["default"](NumberTextField)(() => ({
         paddingLeft: 10,
     },
 }));
-const SequenceContainer = styled__default["default"]('div')({
+const SequenceContainer = styled('div')({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -6950,7 +6558,7 @@ const SequenceContainer = styled__default["default"]('div')({
 });
 const Strand = (props) => {
     const { strand } = props;
-    return (React__default["default"].createElement("div", null, strand === 1 ? (React__default["default"].createElement(AddIcon__default["default"], null)) : strand === -1 ? (React__default["default"].createElement(RemoveIcon__default["default"], null)) : (React__default["default"].createElement(material.Typography, { component: 'span' }, "N/A"))));
+    return (jsxRuntime.jsx("div", { children: strand === 1 ? (jsxRuntime.jsx(AddIcon, {})) : strand === -1 ? (jsxRuntime.jsx(RemoveIcon, {})) : (jsxRuntime.jsx(material.Typography, { component: 'span', children: "N/A" })) }));
 };
 const minMaxExonTranscriptLocation = (transcript, featureTypeOntology) => {
     const { transcriptExonParts } = transcript;
@@ -7414,11 +7022,11 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
             const protein = util.defaultCodonTable[codonSeq] || '&';
             // highlight start codon and stop codons
             if (codonSeq === 'ATG') {
-                elements.push(React__default["default"].createElement(material.Typography, { component: 'span', style: {
+                elements.push(jsxRuntime.jsx(material.Typography, { component: 'span', style: {
                         backgroundColor: changeInProgress ? 'lightgray' : 'yellow',
                         cursor: 'pointer',
                         border: '1px solid black',
-                    }, key: codonGenomicPos, onClick: () => {
+                    }, onClick: () => {
                         if (changeInProgress) {
                             return;
                         }
@@ -7432,17 +7040,15 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
                         if (startCodonGenomicLocation !== cdsMax && strand === -1) {
                             updateCDSLocation(cdsMax, startCodonGenomicLocation, feature, false);
                         }
-                    } }, protein));
+                    }, children: protein }, codonGenomicPos));
             }
             else if (['TAA', 'TAG', 'TGA'].includes(codonSeq)) {
-                elements.push(React__default["default"].createElement(material.Typography, { style: { backgroundColor: 'red', color: 'white' }, component: 'span', 
-                    // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
-                    key: codonGenomicPos }, protein));
+                elements.push(jsxRuntime.jsx(material.Typography, { style: { backgroundColor: 'red', color: 'white' }, component: 'span', children: protein }, codonGenomicPos));
             }
             else {
                 elements.push(
                 // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
-                React__default["default"].createElement(material.Typography, { component: 'span', key: codonGenomicPos }, protein));
+                jsxRuntime.jsx(material.Typography, { component: 'span', children: protein }, codonGenomicPos));
             }
         }
         return elements;
@@ -7573,108 +7179,51 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
         }
         void copyToClipboard(seqDiv);
     };
-    return (React__default["default"].createElement("div", null,
-        cdsPresent && (React__default["default"].createElement("div", null,
-            React__default["default"].createElement(material.Accordion, null,
-                React__default["default"].createElement(StyledAccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
-                    React__default["default"].createElement(material.Typography, { component: "span", fontWeight: 'bold' }, "Translation")),
-                React__default["default"].createElement(material.AccordionDetails, null,
-                    React__default["default"].createElement(SequenceContainer, null,
-                        React__default["default"].createElement(material.Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' } }, getTranslationSequence())),
-                    React__default["default"].createElement("div", { style: {
-                            marginTop: 10,
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 10,
-                        } },
-                        React__default["default"].createElement(material.Tooltip, { title: "Copy" },
-                            React__default["default"].createElement("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
-                                React__default["default"].createElement(ContentCopyIcon__default["default"], { style: { fontSize: 15 } }))),
-                        React__default["default"].createElement(material.Tooltip, { title: "Trim" },
-                            React__default["default"].createElement("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
-                                React__default["default"].createElement(ContentCutIcon__default["default"], { style: { fontSize: 15 } })))))),
-            React__default["default"].createElement(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 } },
-                React__default["default"].createElement(material.Grid, { size: 1 }),
-                strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4 },
-                    React__default["default"].createElement(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 }))) : (React__default["default"].createElement(material.Grid, { size: 4 },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
-                            return updateCDSLocation(cdsMax, newLocation, feature, false);
-                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))),
-                React__default["default"].createElement(material.Grid, { size: 2 },
-                    React__default["default"].createElement(material.Typography, { component: 'span' }, "CDS")),
-                strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4 },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
-                            return updateCDSLocation(cdsMax, newLocation, feature, false);
-                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))) : (React__default["default"].createElement(material.Grid, { size: 4 },
-                    React__default["default"].createElement(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 }))),
-                React__default["default"].createElement(material.Grid, { size: 1 })))),
-        React__default["default"].createElement("div", { style: { marginTop: 5 } }, transcriptExonParts.map((loc, index) => {
-            return (React__default["default"].createElement("div", { key: index }, loc.type === 'exon' && (React__default["default"].createElement(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' } },
-                React__default["default"].createElement(material.Grid, { size: 1 }, index !== 0 &&
-                    getFivePrimeSpliceSite(loc, index).map((site, idx) => (React__default["default"].createElement(material.Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite)))),
-                strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        }, disabled: changeInProgress }))) : (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        }, disabled: changeInProgress }))),
-                React__default["default"].createElement(material.Grid, { size: 2 },
-                    React__default["default"].createElement(Strand, { strand: feature.strand })),
-                strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        }, disabled: changeInProgress }))) : (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        }, disabled: changeInProgress }))),
-                React__default["default"].createElement(material.Grid, { size: 1 }, index !== transcriptExonParts.length - 1 &&
-                    getThreePrimeSpliceSite(loc, index).map((site, idx) => (React__default["default"].createElement(material.Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite))))))));
-        }))));
+    return (jsxRuntime.jsxs("div", { children: [cdsPresent && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(material.Accordion, { children: [jsxRuntime.jsx(StyledAccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(SequenceContainer, { children: jsxRuntime.jsx(material.Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: getTranslationSequence() }) }), jsxRuntime.jsxs("div", { style: {
+                                            marginTop: 10,
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: 10,
+                                        }, children: [jsxRuntime.jsx(material.Tooltip, { title: "Copy", children: jsxRuntime.jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsxRuntime.jsx(material.Tooltip, { title: "Trim", children: jsxRuntime.jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCutIcon, { style: { fontSize: 15 } }) }) })] })] })] }), jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 }, children: [jsxRuntime.jsx(material.Grid, { size: 1 }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
+                                        return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
+                                    }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
+                                        return updateCDSLocation(cdsMax, newLocation, feature, false);
+                                    }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 2, children: jsxRuntime.jsx(material.Typography, { component: 'span', children: "CDS" }) }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
+                                        return updateCDSLocation(cdsMax, newLocation, feature, false);
+                                    }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
+                                        return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
+                                    }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 1 })] })] })), jsxRuntime.jsx("div", { style: { marginTop: 5 }, children: transcriptExonParts.map((loc, index) => {
+                    return (jsxRuntime.jsx("div", { children: loc.type === 'exon' && (jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsxRuntime.jsx(material.Grid, { size: 1, children: index !== 0 &&
+                                        getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
+                                        }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.max, newLocation, feature, false);
+                                        }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 2, children: jsxRuntime.jsx(Strand, { strand: feature.strand }) }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.max, newLocation, feature, false);
+                                        }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
+                                        }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 1, children: index !== transcriptExonParts.length - 1 &&
+                                        getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
+                }) })] }));
 });
 
-const HeaderTableCell = styled__default["default"](material.TableCell)(() => ({
+const HeaderTableCell = styled(material.TableCell)(() => ({
     fontWeight: 'bold',
 }));
 const TranscriptWidgetSummary = mobxReact.observer(function TranscriptWidgetSummary(props) {
     const { feature } = props;
     const name = getFeatureName$1(feature);
     const id = getFeatureId$1(feature);
-    return (React__default["default"].createElement(material.Table, { size: "small", sx: { fontSize: '0.75rem', '& .MuiTableCell-root': { padding: '4px' } } },
-        React__default["default"].createElement(material.TableBody, null,
-            name !== '' && (React__default["default"].createElement(material.TableRow, null,
-                React__default["default"].createElement(HeaderTableCell, null, "Name"),
-                React__default["default"].createElement(material.TableCell, null, getFeatureName$1(feature)))),
-            id !== '' && (React__default["default"].createElement(material.TableRow, null,
-                React__default["default"].createElement(HeaderTableCell, null, "ID"),
-                React__default["default"].createElement(material.TableCell, null, getFeatureId$1(feature)))),
-            React__default["default"].createElement(material.TableRow, null,
-                React__default["default"].createElement(HeaderTableCell, null, "Type"),
-                React__default["default"].createElement(material.TableCell, null, feature.type)),
-            React__default["default"].createElement(material.TableRow, null,
-                React__default["default"].createElement(HeaderTableCell, null, "Location"),
-                React__default["default"].createElement(material.TableCell, null,
-                    props.refName,
-                    ":",
-                    feature.min,
-                    "..",
-                    feature.max)),
-            React__default["default"].createElement(material.TableRow, null,
-                React__default["default"].createElement(HeaderTableCell, null, "Strand"),
-                React__default["default"].createElement(material.TableCell, null, getStrand(feature.strand))))));
+    return (jsxRuntime.jsx(material.Table, { size: "small", sx: { fontSize: '0.75rem', '& .MuiTableCell-root': { padding: '4px' } }, children: jsxRuntime.jsxs(material.TableBody, { children: [name !== '' && (jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(HeaderTableCell, { children: "Name" }), jsxRuntime.jsx(material.TableCell, { children: getFeatureName$1(feature) })] })), id !== '' && (jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(HeaderTableCell, { children: "ID" }), jsxRuntime.jsx(material.TableCell, { children: getFeatureId$1(feature) })] })), jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(HeaderTableCell, { children: "Type" }), jsxRuntime.jsx(material.TableCell, { children: feature.type })] }), jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(HeaderTableCell, { children: "Location" }), jsxRuntime.jsxs(material.TableCell, { children: [props.refName, ":", feature.min, "..", feature.max] })] }), jsxRuntime.jsxs(material.TableRow, { children: [jsxRuntime.jsx(HeaderTableCell, { children: "Strand" }), jsxRuntime.jsx(material.TableCell, { children: getStrand(feature.strand) })] })] }) }));
 });
 
-const useStyles$7 = mui.makeStyles()((theme) => ({
+const useStyles$7 = tssReact.makeStyles()((theme) => ({
     root: {
         padding: theme.spacing(2),
     },
 }));
-const StyledAccordionSummary = styled__default["default"](material.AccordionSummary)(() => ({
+const StyledAccordionSummary = styled(material.AccordionSummary)(() => ({
     minHeight: 30,
     maxHeight: 30,
     '&.Mui-expanded': {
@@ -7733,48 +7282,15 @@ const ApolloTranscriptDetailsWidget = mobxReact.observer(function ApolloTranscri
     const CustomComponentAfterAttributes = pluginManager.evaluateExtensionPoint('Apollo-TranscriptDetailsCustomComponent-AfterAttributes', NoOpCustomComponent, { feature, session });
     const CustomComponentInsideSequence = pluginManager.evaluateExtensionPoint('Apollo-TranscriptDetailsCustomComponent-InsideSequence', NoOpCustomComponent, { feature, session });
     const CustomComponentAfterSequence = pluginManager.evaluateExtensionPoint('Apollo-TranscriptDetailsCustomComponent-AfterSequence', NoOpCustomComponent, { feature, session });
-    return (React__default["default"].createElement("div", { className: classes.root },
-        React__default["default"].createElement(material.Accordion, { expanded: panelState.includes('summary'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'summary');
-            } },
-            React__default["default"].createElement(StyledAccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
-                React__default["default"].createElement(material.Typography, { component: "span", fontWeight: 'bold' }, "Summary")),
-            React__default["default"].createElement(material.AccordionDetails, null,
-                React__default["default"].createElement(TranscriptWidgetSummary, { feature: feature, refName: refName }),
-                React__default["default"].createElement(CustomComponentInsideSummary, { session: session, feature: feature }))),
-        React__default["default"].createElement(CustomComponentAfterSummary, { session: session, feature: feature }),
-        React__default["default"].createElement(material.Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('location'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'location');
-            } },
-            React__default["default"].createElement(StyledAccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header" },
-                React__default["default"].createElement(material.Typography, { component: "span", fontWeight: 'bold' }, "Location")),
-            React__default["default"].createElement(material.AccordionDetails, null,
-                React__default["default"].createElement(TranscriptWidgetEditLocation, { feature: feature, refName: refName, session: apolloSession, assembly: currentAssembly._id || '' }),
-                React__default["default"].createElement(CustomComponentInsideLocation, { session: session, feature: feature }))),
-        React__default["default"].createElement(CustomComponentAfterLocation, { session: session, feature: feature }),
-        React__default["default"].createElement(material.Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('attrs'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'attrs');
-            } },
-            React__default["default"].createElement(StyledAccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header" },
-                React__default["default"].createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                    React__default["default"].createElement(material.Typography, { component: "span", fontWeight: 'bold' },
-                        "Attributes",
-                        ' '),
-                    React__default["default"].createElement(material.Tooltip, { title: "Separate multiple values for the attribute with commas" },
-                        React__default["default"].createElement(InfoIcon__default["default"], { style: { color: 'white', fontSize: 15, marginLeft: 10 } })))),
-            React__default["default"].createElement(material.AccordionDetails, null,
-                React__default["default"].createElement(Attributes, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', editable: editable }),
-                React__default["default"].createElement(CustomComponentInsideAttributes, { session: session, feature: feature }))),
-        React__default["default"].createElement(CustomComponentAfterAttributes, { session: session, feature: feature }),
-        React__default["default"].createElement(material.Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'sequence');
-            } },
-            React__default["default"].createElement(StyledAccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel4-content", id: "panel4-header" },
-                React__default["default"].createElement(material.Typography, { component: "span", fontWeight: 'bold' }, "Sequence")),
-            React__default["default"].createElement(material.AccordionDetails, null,
-                panelState.includes('sequence') && (React__default["default"].createElement(TranscriptSequence, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName })),
-                React__default["default"].createElement(CustomComponentInsideSequence, { session: session, feature: feature }))),
-        React__default["default"].createElement(CustomComponentAfterSequence, { feature: feature, session: session })));
+    return (jsxRuntime.jsxs("div", { className: classes.root, children: [jsxRuntime.jsxs(material.Accordion, { expanded: panelState.includes('summary'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'summary');
+                }, children: [jsxRuntime.jsx(StyledAccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Summary" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(TranscriptWidgetSummary, { feature: feature, refName: refName }), jsxRuntime.jsx(CustomComponentInsideSummary, { session: session, feature: feature })] })] }), jsxRuntime.jsx(CustomComponentAfterSummary, { session: session, feature: feature }), jsxRuntime.jsxs(material.Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('location'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'location');
+                }, children: [jsxRuntime.jsx(StyledAccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Location" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(TranscriptWidgetEditLocation, { feature: feature, refName: refName, session: apolloSession, assembly: currentAssembly._id || '' }), jsxRuntime.jsx(CustomComponentInsideLocation, { session: session, feature: feature })] })] }), jsxRuntime.jsx(CustomComponentAfterLocation, { session: session, feature: feature }), jsxRuntime.jsxs(material.Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('attrs'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'attrs');
+                }, children: [jsxRuntime.jsx(StyledAccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header", children: jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs(material.Typography, { component: "span", fontWeight: 'bold', children: ["Attributes", ' '] }), jsxRuntime.jsx(material.Tooltip, { title: "Separate multiple values for the attribute with commas", children: jsxRuntime.jsx(InfoIcon, { style: { color: 'white', fontSize: 15, marginLeft: 10 } }) })] }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(Attributes, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', editable: editable }), jsxRuntime.jsx(CustomComponentInsideAttributes, { session: session, feature: feature })] })] }), jsxRuntime.jsx(CustomComponentAfterAttributes, { session: session, feature: feature }), jsxRuntime.jsxs(material.Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'sequence');
+                }, children: [jsxRuntime.jsx(StyledAccordionSummary, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel4-content", id: "panel4-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Sequence" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [panelState.includes('sequence') && (jsxRuntime.jsx(TranscriptSequence, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName })), jsxRuntime.jsx(CustomComponentInsideSequence, { session: session, feature: feature })] })] }), jsxRuntime.jsx(CustomComponentAfterSequence, { feature: feature, session: session })] }));
 });
 
 const configSchema$2 = configuration.ConfigurationSchema('LinearApolloDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
@@ -7816,7 +7332,7 @@ function handleFeatureEndChange(changeManager, feature, oldEnd, newEnd) {
     return changeManager.submit(change);
 }
 
-const useStyles$6 = mui.makeStyles()({
+const useStyles$6 = tssReact.makeStyles()({
     highlighted: {
         background: 'orange',
     },
@@ -7824,19 +7340,17 @@ const useStyles$6 = mui.makeStyles()({
 const Highlight = ({ highlight, text, }) => {
     const { classes } = useStyles$6();
     if (!highlight) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, text);
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
     }
     const split = text.split(highlight);
     if (split.length === 1) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, text);
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
     }
     const highlighted = [];
     for (let i = 0; i < split.length - 1; i++) {
-        highlighted.push(split[i], React__default["default"].createElement("span", { className: classes.highlighted }, highlight));
+        highlighted.push(split[i], jsxRuntime.jsx("span", { className: classes.highlighted, children: highlight }));
     }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        highlighted,
-        split.at(-1)));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [highlighted, split.at(-1)] }));
 };
 
 const FeatureAttributes = mobxReact.observer(function FeatureAttributes({ feature, filterText, }) {
@@ -7855,11 +7369,10 @@ const FeatureAttributes = mobxReact.observer(function FeatureAttributes({ featur
         .filter(([key]) => key) // Leave empty keys off
         .map(([key, values]) => `${key}=${Array.isArray(values) ? values.join(', ') : values}`)
         .join(', ');
-    return React__default["default"].createElement(Highlight, { text: attrString, highlight: filterText });
+    return jsxRuntime.jsx(Highlight, { text: attrString, highlight: filterText });
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
-const useStyles$5 = mui.makeStyles()((theme) => ({
+const useStyles$5 = tssReact.makeStyles()((theme) => ({
     inputWrapper: {
         position: 'relative',
     },
@@ -7899,23 +7412,21 @@ const NumberCell = mobxReact.observer(function NumberCell({ initialValue, notify
             setValue(newValue);
         }
     }
-    return (React__default["default"].createElement("span", { className: classes.inputWrapper },
-        React__default["default"].createElement("span", { className: classes.hiddenWidthSpan, "aria-hidden": true }, value),
-        React__default["default"].createElement("input", { type: "text", value: value, className: classes.numberTextInput, onChange: onChange, onKeyDown: (event) => {
-                if (event.key === 'Enter') {
-                    inputNode?.blur();
-                }
-                else if (event.key === 'Escape') {
-                    setValue(initialValue);
-                    setBlur(true);
-                }
-            }, onBlur: () => {
-                if (value !== initialValue) {
-                    onChangeCommitted(value).catch(notifyError);
-                }
-            }, ref: (node) => {
-                setInputNode(node);
-            } })));
+    return (jsxRuntime.jsxs("span", { className: classes.inputWrapper, children: [jsxRuntime.jsx("span", { className: classes.hiddenWidthSpan, "aria-hidden": true, children: value }), jsxRuntime.jsx("input", { type: "text", value: value, className: classes.numberTextInput, onChange: onChange, onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        inputNode?.blur();
+                    }
+                    else if (event.key === 'Escape') {
+                        setValue(initialValue);
+                        setBlur(true);
+                    }
+                }, onBlur: () => {
+                    if (value !== initialValue) {
+                        onChangeCommitted(value).catch(notifyError);
+                    }
+                }, ref: (node) => {
+                    setInputNode(node);
+                } })] }));
 });
 
 function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature, setSelectedFeature, session, changeManager, filteredTranscripts, updateFilteredTranscripts) {
@@ -8068,6 +7579,24 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
                     });
                     session.showWidget(apolloTranscriptWidget);
                 },
+            }, {
+                label: 'Duplicate feature',
+                onClick: () => {
+                    session.queueDialog((doneCallback) => [
+                        DuplicateTranscript,
+                        {
+                            session,
+                            handleClose: () => {
+                                doneCallback();
+                            },
+                            changeManager,
+                            sourceFeature: feature,
+                            sourceAssemblyId: currentAssemblyId,
+                            selectedFeature,
+                            setSelectedFeature,
+                        },
+                    ]);
+                },
             }, {
                 label: 'Visible',
                 type: 'checkbox',
@@ -8086,8 +7615,7 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
     return menuItems;
 }
 
-/* eslint-disable unicorn/no-nested-ternary */
-const useStyles$4 = mui.makeStyles()((theme) => ({
+const useStyles$4 = tssReact.makeStyles()((theme) => ({
     typeContent: {
         display: 'inline-block',
         width: '174px',
@@ -8142,70 +7670,55 @@ const Feature = mobxReact.observer(function Feature({ depth, feature, isHovered,
     const notifyError = (e) => {
         session.notify(e.message, 'error');
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("tr", { onMouseEnter: (_e) => {
-                displayState.setHoveredFeature({ feature, bp: min });
-            }, className: classes.feature +
-                (isSelected
-                    ? ` ${selectedFeatureClass}`
-                    : isHovered
-                        ? ` ${classes.hoveredFeature}`
-                        : ''), onClick: (e) => {
-                e.stopPropagation();
-                displayState.setSelectedFeature(feature);
-            }, onDoubleClick: () => {
-                displayState.setSelectedFeature(feature);
-                navigateHere(displayState, feature);
-            }, onContextMenu: (e) => {
-                e.preventDefault();
-                setContextMenu({
-                    position: { left: e.clientX + 2, top: e.clientY - 6 },
-                    items: makeContextMenuItems(displayState, feature),
-                });
-                return false;
-            } },
-            React__default["default"].createElement("td", { style: {
-                    whiteSpace: 'nowrap',
-                    borderLeft: `${depth * 2}em solid transparent`,
-                } },
-                children?.size ? (
-                // TODO: a11y
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-                React__default["default"].createElement("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : '') }, "\u276F")) : null,
-                React__default["default"].createElement("div", { className: classes.typeContent },
-                    React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTypeTerms.bind(null, feature), renderInput: (params) => {
-                            return (React__default["default"].createElement("div", { ref: params.InputProps.ref },
-                                React__default["default"].createElement("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }),
-                                params.error ? (React__default["default"].createElement("div", { className: classes.typeErrorMessage }, params.errorMessage ?? 'unknown error')) : null));
-                        }, onChange: (oldValue, newValue) => {
-                            if (newValue) {
-                                handleFeatureTypeChange(changeManager, feature, oldValue, newValue).catch(notifyError);
-                            }
-                        } }))),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) })),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) })),
-            React__default["default"].createElement("td", null, strand === 1 ? '+' : strand === -1 ? '-' : undefined),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(FeatureAttributes, { filterText: filterText, feature: feature }))),
-        expanded && children
-            ? [...children.entries()]
-                .filter((entry) => {
-                if (!filterText) {
-                    return true;
-                }
-                const [, childFeature] = entry;
-                // search feature and its subfeatures for the text
-                const text = JSON.stringify(childFeature);
-                return text.includes(filterText);
-            })
-                .map(([featureId, childFeature]) => {
-                const childHovered = hoveredFeature?.feature._id === childFeature._id;
-                const childSelected = selectedFeature?._id === childFeature._id;
-                return (React__default["default"].createElement(Feature, { isHovered: childHovered, isSelected: childSelected, selectedFeatureClass: selectedFeatureClass, key: featureId, depth: (depth || 0) + 1, feature: childFeature, model: displayState, setContextMenu: setContextMenu }));
-            })
-            : null));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { onMouseEnter: (_e) => {
+                    displayState.setHoveredFeature({ feature, bp: min });
+                }, className: classes.feature +
+                    (isSelected
+                        ? ` ${selectedFeatureClass}`
+                        : isHovered
+                            ? ` ${classes.hoveredFeature}`
+                            : ''), onClick: (e) => {
+                    e.stopPropagation();
+                    displayState.setSelectedFeature(feature);
+                }, onDoubleClick: () => {
+                    displayState.setSelectedFeature(feature);
+                    navigateHere(displayState, feature);
+                }, onContextMenu: (e) => {
+                    e.preventDefault();
+                    setContextMenu({
+                        position: { left: e.clientX + 2, top: e.clientY - 6 },
+                        items: makeContextMenuItems(displayState, feature),
+                    });
+                    return false;
+                }, children: [jsxRuntime.jsxs("td", { style: {
+                            whiteSpace: 'nowrap',
+                            borderLeft: `${depth * 2}em solid transparent`,
+                        }, children: [children?.size ? (
+                            // TODO: a11y
+                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                            jsxRuntime.jsx("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : ''), children: "\u276F" })) : null, jsxRuntime.jsx("div", { className: classes.typeContent, children: jsxRuntime.jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTypeTerms.bind(null, feature), renderInput: (params) => {
+                                        return (jsxRuntime.jsxs("div", { ref: params.InputProps.ref, children: [jsxRuntime.jsx("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }), params.error ? (jsxRuntime.jsx("div", { className: classes.typeErrorMessage, children: params.errorMessage ?? 'unknown error' })) : null] }));
+                                    }, onChange: (oldValue, newValue) => {
+                                        if (newValue) {
+                                            handleFeatureTypeChange(changeManager, feature, oldValue, newValue).catch(notifyError);
+                                        }
+                                    } }) })] }), jsxRuntime.jsx("td", { children: jsxRuntime.jsx(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) }) }), jsxRuntime.jsx("td", { children: jsxRuntime.jsx(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) }) }), jsxRuntime.jsx("td", { children: strand === 1 ? '+' : strand === -1 ? '-' : undefined }), jsxRuntime.jsx("td", { children: jsxRuntime.jsx(FeatureAttributes, { filterText: filterText, feature: feature }) })] }), expanded && children
+                ? [...children.entries()]
+                    .filter((entry) => {
+                    if (!filterText) {
+                        return true;
+                    }
+                    const [, childFeature] = entry;
+                    // search feature and its subfeatures for the text
+                    const text = JSON.stringify(childFeature);
+                    return text.includes(filterText);
+                })
+                    .map(([featureId, childFeature]) => {
+                    const childHovered = hoveredFeature?.feature._id === childFeature._id;
+                    const childSelected = selectedFeature?._id === childFeature._id;
+                    return (jsxRuntime.jsx(Feature, { isHovered: childHovered, isSelected: childSelected, selectedFeatureClass: selectedFeatureClass, depth: (depth || 0) + 1, feature: childFeature, model: displayState, setContextMenu: setContextMenu }, featureId));
+                })
+                : null] }));
 });
 async function fetchValidTypeTerms(feature, ontologyStore, _signal) {
     const { parent: parentFeature } = feature;
@@ -8223,7 +7736,7 @@ async function fetchValidTypeTerms(feature, ontologyStore, _signal) {
     return;
 }
 
-const useStyles$3 = mui.makeStyles()((theme) => ({
+const useStyles$3 = tssReact.makeStyles()((theme) => ({
     scrollableTable: {
         width: '100%',
         height: '100%',
@@ -8264,49 +7777,38 @@ const HybridGrid = mobxReact.observer(function HybridGrid({ model, }) {
             }
         }
     }, [selectedFeature, seenFeatures, classes.selectedFeature]);
-    return (React__default["default"].createElement("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' } },
-        React__default["default"].createElement("table", { className: classes.scrollableTable },
-            React__default["default"].createElement("thead", null,
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("th", null, "Type"),
-                    React__default["default"].createElement("th", null, "Start"),
-                    React__default["default"].createElement("th", null, "End"),
-                    React__default["default"].createElement("th", null, "Strand"),
-                    React__default["default"].createElement("th", null, "Attributes"))),
-            React__default["default"].createElement("tbody", null, [...seenFeatures.entries()]
-                .filter((entry) => {
-                if (!filterText) {
-                    return true;
-                }
-                const [, feature] = entry;
-                // search feature and its subfeatures for the text
-                const text = JSON.stringify(feature);
-                return text.includes(filterText);
-            })
-                .sort((a, b) => {
-                return a[1].min - b[1].min;
-            })
-                .map(([featureId, feature]) => {
-                const isSelected = selectedFeature?._id === featureId;
-                const isHovered = hoveredFeature?.feature._id === featureId;
-                return (React__default["default"].createElement(Feature, { key: featureId, isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }));
-            }))),
-        React__default["default"].createElement(ui.Menu, { open: Boolean(contextMenu), onMenuItemClick: (_, callback) => {
-                callback();
-                setContextMenu(null);
-            }, onClose: () => {
-                setContextMenu(null);
-            }, slotProps: {
-                transition: {
-                    onExit: () => {
-                        setContextMenu(null);
+    return (jsxRuntime.jsxs("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' }, children: [jsxRuntime.jsxs("table", { className: classes.scrollableTable, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("th", { children: "Type" }), jsxRuntime.jsx("th", { children: "Start" }), jsxRuntime.jsx("th", { children: "End" }), jsxRuntime.jsx("th", { children: "Strand" }), jsxRuntime.jsx("th", { children: "Attributes" })] }) }), jsxRuntime.jsx("tbody", { children: [...seenFeatures.entries()]
+                            .filter((entry) => {
+                            if (!filterText) {
+                                return true;
+                            }
+                            const [, feature] = entry;
+                            // search feature and its subfeatures for the text
+                            const text = JSON.stringify(feature);
+                            return text.includes(filterText);
+                        })
+                            .sort((a, b) => {
+                            return a[1].min - b[1].min;
+                        })
+                            .map(([featureId, feature]) => {
+                            const isSelected = selectedFeature?._id === featureId;
+                            const isHovered = hoveredFeature?.feature._id === featureId;
+                            return (jsxRuntime.jsx(Feature, { isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }, featureId));
+                        }) })] }), jsxRuntime.jsx(ui.Menu, { open: Boolean(contextMenu), onMenuItemClick: (_, callback) => {
+                    callback();
+                    setContextMenu(null);
+                }, onClose: () => {
+                    setContextMenu(null);
+                }, slotProps: {
+                    transition: {
+                        onExit: () => {
+                            setContextMenu(null);
+                        },
                     },
-                },
-            }, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenu?.items ?? [], anchorReference: "anchorPosition", anchorPosition: contextMenu?.position })));
+                }, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenu?.items ?? [], anchorReference: "anchorPosition", anchorPosition: contextMenu?.position })] }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
-const useStyles$2 = mui.makeStyles()({
+const useStyles$2 = tssReact.makeStyles()({
     toolbar: {
         width: '100%',
         display: 'flex',
@@ -8321,21 +7823,15 @@ const useStyles$2 = mui.makeStyles()({
 const ToolBar = mobxReact.observer(function ToolBar({ model: displayState, }) {
     const model = displayState.tabularEditor;
     const { classes } = useStyles$2();
-    return (React__default["default"].createElement("div", { className: classes.toolbar },
-        React__default["default"].createElement(material.Tooltip, { title: "Collapse all" },
-            React__default["default"].createElement(material.IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures },
-                React__default["default"].createElement(UnfoldLessIcon__default["default"], null))),
-        React__default["default"].createElement(material.TextField, { className: classes.filterText, label: "Filter features", value: model.filterText, sx: { marginTop: 0 }, variant: "outlined", onChange: (event) => {
-                model.setFilterText(event.target.value);
-            }, slotProps: {
-                input: {
-                    endAdornment: (React__default["default"].createElement(material.InputAdornment, { position: "end" },
-                        React__default["default"].createElement(material.IconButton, { onClick: () => {
-                                model.clearFilterText();
-                            } },
-                            React__default["default"].createElement(ClearIcon__default["default"], null)))),
-                },
-            } })));
+    return (jsxRuntime.jsxs("div", { className: classes.toolbar, children: [jsxRuntime.jsx(material.Tooltip, { title: "Collapse all", children: jsxRuntime.jsx(material.IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures, children: jsxRuntime.jsx(UnfoldLessIcon, {}) }) }), jsxRuntime.jsx(material.TextField, { className: classes.filterText, label: "Filter features", value: model.filterText, sx: { marginTop: 0 }, variant: "outlined", onChange: (event) => {
+                    model.setFilterText(event.target.value);
+                }, slotProps: {
+                    input: {
+                        endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(material.IconButton, { onClick: () => {
+                                    model.clearFilterText();
+                                }, children: jsxRuntime.jsx(ClearIcon, {}) }) })),
+                    },
+                } })] }));
 });
 
 function stopPropagation(e) {
@@ -8349,9 +7845,7 @@ const TabularEditorPane = mobxReact.observer(function TabularEditorPane({ model:
     return (
     // TODO: a11y
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React__default["default"].createElement("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' } },
-        React__default["default"].createElement(ToolBar, { model: displayState }),
-        React__default["default"].createElement(HybridGrid, { model: displayState })));
+    jsxRuntime.jsxs("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' }, children: [jsxRuntime.jsx(ToolBar, { model: displayState }), jsxRuntime.jsx(HybridGrid, { model: displayState })] }));
 });
 
 const TabularEditorStateModelType = mobxStateTree.types
@@ -8705,10 +8199,7 @@ function drawBackground(ctx, feature, stateModel, displayedRegionIndex, row, col
     const topLevelFeatureTop = row * apolloRowHeight;
     const topLevelFeatureHeight = getRowCount$1(feature, featureTypeOntology) * apolloRowHeight;
     let selectedColor;
-    if (color) {
-        selectedColor = color;
-    }
-    else {
+    {
         selectedColor = configuration.readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', { featureType: feature.type });
         if (!selectedColor) {
             selectedColor = material.alpha(theme.palette.background.paper, 0.6);
@@ -9299,6 +8790,26 @@ function getContextMenuItems$2(display, mousePosition) {
                             },
                         ]);
                     },
+                }, {
+                    label: 'Duplicate feature',
+                    onClick: () => {
+                        session.queueDialog((doneCallback) => [
+                            DuplicateTranscript,
+                            {
+                                session,
+                                handleClose: () => {
+                                    doneCallback();
+                                },
+                                changeManager,
+                                sourceFeature: feature,
+                                sourceAssemblyId: currentAssemblyId,
+                                selectedFeature,
+                                setSelectedFeature: (feature) => {
+                                    display.setSelectedFeature(feature);
+                                },
+                            },
+                        ]);
+                    },
                 });
                 if (util.isSessionModelWithWidgets(session)) {
                     contextMenuItemsForFeature.splice(1, 0, {
@@ -9505,48 +9016,30 @@ const FilterFeatures = mobxReact.observer(function FilterFeatures({ featureTypes
         onUpdate(newTypes);
         setSelectedFeatureTypes(newTypes);
     };
-    return (React__default["default"].createElement(Dialog, { open: true, maxWidth: false, "data-testid": "filter-features-dialog", title: "Filter features by type", handleClose: handleClose },
-        React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, null, "Select the feature types you want to display in the apollo track"),
-            React__default["default"].createElement(material.Grid, { container: true, spacing: 2 },
-                React__default["default"].createElement(material.Grid, { size: 8 },
-                    React__default["default"].createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: '100%' }, value: type, filterTerms: isOntologyClass, renderInput: (params) => (React__default["default"].createElement(material.TextField, { ...params, label: "Feature type", variant: "outlined", fullWidth: true })), onChange: (oldValue, newValue) => {
-                            if (newValue) {
-                                handleChange(newValue);
-                            }
-                        } })),
-                React__default["default"].createElement(material.Grid, { size: 4 },
-                    React__default["default"].createElement(material.Button, { variant: "contained", onClick: handleAddFeatureType, disabled: !type, style: { marginTop: 9 }, size: "medium" }, "Add"))),
-            selectedFeatureTypes.length > 0 && (React__default["default"].createElement("div", null,
-                React__default["default"].createElement("hr", null),
-                React__default["default"].createElement("div", { style: { width: 300 } },
-                    React__default["default"].createElement(material.DialogContentText, null, "Selected feature types:"),
-                    React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, selectedFeatureTypes.map((value) => (React__default["default"].createElement(material.Chip, { key: value, label: value, onDelete: () => {
-                            handleFeatureTypeDelete(value);
-                        } }))))))))));
+    return (jsxRuntime.jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-features-dialog", title: "Filter features by type", handleClose: handleClose, children: jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select the feature types you want to display in the apollo track" }), jsxRuntime.jsxs(material.Grid, { container: true, spacing: 2, children: [jsxRuntime.jsx(material.Grid, { size: 8, children: jsxRuntime.jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: '100%' }, value: type, filterTerms: isOntologyClass, renderInput: (params) => (jsxRuntime.jsx(material.TextField, { ...params, label: "Feature type", variant: "outlined", fullWidth: true })), onChange: (oldValue, newValue) => {
+                                    if (newValue) {
+                                        handleChange(newValue);
+                                    }
+                                } }) }), jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(material.Button, { variant: "contained", onClick: handleAddFeatureType, disabled: !type, style: { marginTop: 9 }, size: "medium", children: "Add" }) })] }), selectedFeatureTypes.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { style: { width: 300 }, children: [jsxRuntime.jsx(material.DialogContentText, { children: "Selected feature types:" }), jsxRuntime.jsx(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selectedFeatureTypes.map((value) => (jsxRuntime.jsx(material.Chip, { label: value, onDelete: () => {
+                                            handleFeatureTypeDelete(value);
+                                        } }, value))) })] })] }))] }) }));
 });
 
 const EditZoomThresholdDialog = mobxReact.observer(function ({ model, handleClose, }) {
     const [zoomThreshold, setZoomThreshold] = React.useState(`${model.zoomThresholdSetting}`);
-    return (React__default["default"].createElement(ui.Dialog, { open: true, onClose: handleClose, title: "Edit zoom threshold setting" },
-        React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.Typography, null, "The zoom level in base pairs (bp) per pixel at which features are rendered in this Annotations track. Increasing the value will allow features to render when zooming out, but might impact performance."),
-            React__default["default"].createElement(material.TextField, { label: "Threshold value (bpPerPx)", value: zoomThreshold, onChange: (event) => {
-                    setZoomThreshold(event.target.value);
-                } }),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { variant: "contained", onClick: () => {
-                        model.setZoomThresholdSetting({
-                            zoomThreshold: +zoomThreshold,
-                        });
-                        handleClose();
-                    } }, "Submit"),
-                React__default["default"].createElement(material.Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
+    return (jsxRuntime.jsx(ui.Dialog, { open: true, onClose: handleClose, title: "Edit zoom threshold setting", children: jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.Typography, { children: "The zoom level in base pairs (bp) per pixel at which features are rendered in this Annotations track. Increasing the value will allow features to render when zooming out, but might impact performance." }), jsxRuntime.jsx(material.TextField, { label: "Threshold value (bpPerPx)", value: zoomThreshold, onChange: (event) => {
+                        setZoomThreshold(event.target.value);
+                    } }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", onClick: () => {
+                                model.setZoomThresholdSetting({
+                                    zoomThreshold: +zoomThreshold,
+                                });
+                                handleClose();
+                            }, children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 
-const useStyles$1 = mui.makeStyles()((theme) => ({
+const useStyles$1 = tssReact.makeStyles()((theme) => ({
     canvasContainer: {
         position: 'relative',
         left: 0,
@@ -9600,7 +9093,7 @@ function clusterResultByMessage(items, width, touchesAsOverlap) {
         (byMsg.get(it.message) ?? byMsg.set(it.message, []).get(it.message)).push(it);
     }
     const clusters = [];
-    const overlaps = (aEnd, bStart) => touchesAsOverlap ? bStart <= aEnd : bStart < aEnd;
+    const overlaps = (aEnd, bStart) => bStart <= aEnd ;
     for (const [message, arr] of byMsg.entries()) {
         if (arr.length === 0) {
             continue;
@@ -10974,7 +10467,6 @@ function stateModelFactory$1(pluginManager, configSchema) {
     return renderingModelFactory$1(pluginManager, configSchema).named('LinearApolloReferenceSequenceDisplay');
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const LinearApolloReferenceSequenceDisplay = mobxReact.observer(function LinearApolloReferenceSequenceDisplay(props) {
     const theme = material.useTheme();
     const { model } = props;
@@ -10985,24 +10477,21 @@ const LinearApolloReferenceSequenceDisplay = mobxReact.observer(function LinearA
     }, [theme, setTheme]);
     const lgv = util.getContainingView(model);
     const message = regionCannotBeRendered();
+    // This type is wrong in @jbrowse/core
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (message) {
-        return (React__default["default"].createElement(material.Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } } },
-            React__default["default"].createElement(material.Tooltip, { title: message },
-                React__default["default"].createElement("div", null, message))));
-    }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, 3 / lgv.bpPerPx >= 1 ? (React__default["default"].createElement("div", { className: classes.canvasContainer, style: {
-            width: lgv.dynamicBlocks.totalWidthPx,
-            height,
-        } },
-        React__default["default"].createElement("canvas", { ref: async (node) => {
-                await Promise.resolve();
-                setSeqTrackCanvas(node);
-            }, width: lgv.dynamicBlocks.totalWidthPx, height: height, className: classes.canvas, "data-testid": "seqTrackCanvas" }),
-        React__default["default"].createElement("canvas", { ref: async (node) => {
-                await Promise.resolve();
-                setSeqTrackOverlayCanvas(node);
-            }, width: lgv.dynamicBlocks.totalWidthPx, height: height, className: classes.canvas, "data-testid": "seqTrackOverlayCanvas" }))) : null));
+        return (jsxRuntime.jsx(material.Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } }, children: jsxRuntime.jsx(material.Tooltip, { title: message, children: jsxRuntime.jsx("div", { children: message }) }) }));
+    }
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: 3 / lgv.bpPerPx >= 1 ? (jsxRuntime.jsxs("div", { className: classes.canvasContainer, style: {
+                width: lgv.dynamicBlocks.totalWidthPx,
+                height,
+            }, children: [jsxRuntime.jsx("canvas", { ref: async (node) => {
+                        await Promise.resolve();
+                        setSeqTrackCanvas(node);
+                    }, width: lgv.dynamicBlocks.totalWidthPx, height: height, className: classes.canvas, "data-testid": "seqTrackCanvas" }), jsxRuntime.jsx("canvas", { ref: async (node) => {
+                        await Promise.resolve();
+                        setSeqTrackOverlayCanvas(node);
+                    }, width: lgv.dynamicBlocks.totalWidthPx, height: height, className: classes.canvas, "data-testid": "seqTrackOverlayCanvas" })] })) : null }));
 });
 
 const configSchema = configuration.ConfigurationSchema('LinearApolloSixFrameDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
@@ -11027,16 +10516,11 @@ const FilterTranscripts = mobxReact.observer(function FilterTranscripts({ source
         onUpdate(newForms);
         setExcludedTranscripts(newForms);
     };
-    return (React__default["default"].createElement(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose },
-        React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, null, "Select the alternate transcripts you want to display in the apollo track"),
-            React__default["default"].createElement(material.Grid, { container: true, spacing: 2 },
-                React__default["default"].createElement(material.Grid, { size: 8 },
-                    React__default["default"].createElement(material.FormGroup, null, allTranscripts.map((item) => (
-                    // eslint-disable-next-line react/jsx-key
-                    React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
-                                handleChange(item);
-                            }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item })))))))));
+    return (jsxRuntime.jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsxRuntime.jsx(material.Grid, { container: true, spacing: 2, children: jsxRuntime.jsx(material.Grid, { size: 8, children: jsxRuntime.jsx(material.FormGroup, { children: allTranscripts.map((item) => (
+                            // eslint-disable-next-line react/jsx-key
+                            jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
+                                        handleChange(item);
+                                    }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item }))) }) }) })] }) }));
 });
 
 let forwardFillLight = null;
@@ -11091,7 +10575,7 @@ if (canvas?.getContext) {
 }
 function deepSetHas(set, item) {
     for (const elem of set) {
-        if (equal__default["default"](elem, item)) {
+        if (equal(elem, item)) {
             return true;
         }
     }
@@ -11263,8 +10747,14 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
                     cdsStartPx = reversed ? minX - cdsWidthPx : minX;
                     ctx.fillStyle = theme.palette.text.primary;
                     const frame = util.getFrame(cds.min, cds.max, child.strand ?? 1, cds.phase);
-                    const frameAdjust = (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer;
-                    cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight;
+                    const frameOffsets = showFeatureLabels
+                        ? [0, 4, 2, 0, 14, 12, 10]
+                        : [0, 2, 1, 0, 7, 6, 5];
+                    const row = frameOffsets.at(frame);
+                    if (row === undefined) {
+                        continue;
+                    }
+                    cdsTop = row * rowHeight;
                     ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight);
                     // Draw lines to connect CDS features with shared mRNA parent
                     if (counter > 1) {
@@ -11397,8 +10887,14 @@ function drawHover(stateModel, ctx) {
             })?.offsetPx ?? 0) - offsetPx;
             const cdsStartPx = reversed ? minX - cdsWidthPx : minX;
             const frame = util.getFrame(cds.min, cds.max, strand ?? 1, cds.phase);
-            const frameAdjust = (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer;
-            const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight;
+            const frameOffsets = showFeatureLabels
+                ? [0, 4, 2, 0, 14, 12, 10]
+                : [0, 2, 1, 0, 7, 6, 5];
+            const row = frameOffsets.at(frame);
+            if (row === undefined) {
+                continue;
+            }
+            const cdsTop = row * rowHeight;
             if (counter > 1) {
                 // Mid-point for intron line "hat"
                 const midPoint = [
@@ -11578,8 +11074,6 @@ function drawTooltip(display, context) {
     const displayedRegion = displayedRegions[layoutIndex];
     const { refName, reversed } = displayedRegion;
     const rowHeight = apolloRowHeight;
-    const cdsHeight = Math.round(0.7 * rowHeight);
-    const featureLabelSpacer = showFeatureLabels ? 2 : 1;
     let location = 'Loc: ';
     let cds = undefined;
     for (const loc of feature.cdsLocations) {
@@ -11601,8 +11095,14 @@ function drawTooltip(display, context) {
         regionNumber: layoutIndex,
     })?.offsetPx ?? 0) - offsetPx;
     const frame = util.getFrame(min, max, strand ?? 1, phase);
-    const frameAdjust = (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer;
-    const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight + (rowHeight - cdsHeight) / 2;
+    const frameOffsets = showFeatureLabels
+        ? [0, 4, 2, 0, 14, 12, 10]
+        : [0, 2, 1, 0, 7, 6, 5];
+    const row = frameOffsets.at(frame);
+    if (row === undefined) {
+        return;
+    }
+    const cdsTop = row * rowHeight;
     const cdsWidthPx = (max - min) / bpPerPx;
     const featureType = `Type: ${cds.type}`;
     const featureName = attributes.get('gff_name')?.find((name) => name !== '');
@@ -12190,8 +11690,14 @@ function layoutsModelFactory(pluginManager, configSchema) {
                                 }
                                 for (const cdsRow of cdsLocations) {
                                     for (const cds of cdsRow) {
-                                        let rowNum = util.getFrame(cds.min, cds.max, strand ?? 1, cds.phase);
-                                        rowNum = self.featureLabelSpacer(rowNum < 0 ? -1 * rowNum + 5 : rowNum);
+                                        const frame = util.getFrame(cds.min, cds.max, strand ?? 1, cds.phase);
+                                        const frameOffsets = self.showFeatureLabels
+                                            ? [0, 5, 3, 1, 15, 13, 11]
+                                            : [0, 2, 1, 0, 8, 7, 6];
+                                        const rowNum = frameOffsets.at(frame);
+                                        if (!rowNum) {
+                                            continue;
+                                        }
                                         if (!featureLayout.get(rowNum)) {
                                             featureLayout.set(rowNum, []);
                                         }
@@ -12462,8 +11968,11 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
                     }
                     for (const loc of feature.cdsLocations) {
                         for (const cds of loc) {
-                            let rowNum = util.getFrame(cds.min, cds.max, feature.strand ?? 1, cds.phase);
-                            rowNum = self.featureLabelSpacer(rowNum < 0 ? -1 * rowNum + 5 : rowNum);
+                            const frame = util.getFrame(cds.min, cds.max, feature.strand ?? 1, cds.phase);
+                            const frameOffsets = self.showFeatureLabels
+                                ? [0, 5, 3, 1, 15, 13, 11]
+                                : [0, 2, 1, 0, 8, 7, 6];
+                            const rowNum = frameOffsets.at(frame);
                             if (row === rowNum && bp >= cds.min && bp <= cds.max) {
                                 return (featureID === undefined ||
                                     !self.filteredTranscripts.includes(featureID));
@@ -12691,7 +12200,6 @@ const ApolloPluginConfigurationSchema = configuration.ConfigurationSchema('Apoll
     },
 });
 
-/* eslint-disable react-hooks/exhaustive-deps */
 const isGeneOrTranscript = (annotationFeature, apolloSessionModel) => {
     const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
     if (!featureTypeOntology) {
@@ -12948,7 +12456,7 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
         }
     };
     const createNewGeneFeatureWithTranscripts = async (childrens) => {
-        const newGeneId = new ObjectID__default["default"]().toHexString();
+        const newGeneId = new ObjectID().toHexString();
         const min = Math.min(...Object.values(childrens).map((child) => child.min));
         const max = Math.max(...Object.values(childrens).map((child) => child.max));
         const change = new shared.AddFeatureChange({
@@ -13011,40 +12519,22 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     const handleCreateNewGeneChange = (e) => {
         setCreateNewGene(e.target.checked);
     };
-    return (React__default["default"].createElement(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm" },
-        React__default["default"].createElement(material.DialogTitle, { fontSize: 15 }, "Select the feature to be copied to apollo track"),
-        React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
-                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${getFeatureNameOrId(annotationFeature)} (${annotationFeature.min + 1}..${annotationFeature.max})` })),
-                annotationFeature.children && (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 } }, Object.values(annotationFeature.children)
-                    .filter((child) => isTranscript(child, apolloSessionModel))
-                    .map((child) => (React__default["default"].createElement(material.FormControlLabel, { key: child._id, control: React__default["default"].createElement(material.Checkbox, { size: "small", checked: checkedChildrens.includes(child._id), onChange: (e) => {
-                            handleChildFeatureCheck(e, child);
-                        } }), label: `${getFeatureNameOrId(child)} (${child.min + 1}..${child.max})` })))))),
-            destinationFeatures.length > 0 &&
-                ((!parentFeatureChecked && checkedChildrens.length > 0) ||
-                    (parentFeatureChecked &&
-                        isTranscript(annotationFeature, apolloSessionModel))) && (React__default["default"].createElement("div", { style: {
-                    border: '1px solid #ccc',
-                    marginTop: 20,
-                    padding: 10,
-                    borderRadius: 5,
-                } },
-                React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
-                    React__default["default"].createElement(material.Typography, { variant: "caption", fontSize: 12 }, "Select the destination feature to copy the selected features"),
-                    React__default["default"].createElement(material.Box, { sx: { mt: 1 } },
-                        React__default["default"].createElement(material.Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange, disabled: createNewGene }, destinationFeatures.map((f) => (React__default["default"].createElement(material.MenuItem, { key: f._id, value: f._id }, `${getFeatureNameOrId(f)} (${f.min + 1}..${f.max})`)))))),
-                React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
-                    React__default["default"].createElement(material.FormGroup, null,
-                        React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { checked: createNewGene, onChange: handleCreateNewGeneChange }), label: "Create new gene" })))))),
-        React__default["default"].createElement(material.DialogActions, null,
-            React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
-                    (!parentFeatureChecked &&
-                        checkedChildrens.length > 0 &&
-                        !selectedDestinationFeature), onClick: handleCreateApolloAnnotation }, "Create"),
-            React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel")),
-        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
-            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxRuntime.jsxs(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm", children: [jsxRuntime.jsx(material.DialogTitle, { fontSize: 15, children: "Select the feature to be copied to apollo track" }), jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsxs(material.Box, { sx: { ml: 3 }, children: [isGeneOrTranscript(annotationFeature, apolloSessionModel) && (jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${getFeatureNameOrId(annotationFeature)} (${annotationFeature.min + 1}..${annotationFeature.max})` })), annotationFeature.children && (jsxRuntime.jsx(material.Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 }, children: Object.values(annotationFeature.children)
+                                    .filter((child) => isTranscript(child, apolloSessionModel))
+                                    .map((child) => (jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { size: "small", checked: checkedChildrens.includes(child._id), onChange: (e) => {
+                                            handleChildFeatureCheck(e, child);
+                                        } }), label: `${getFeatureNameOrId(child)} (${child.min + 1}..${child.max})` }, child._id))) }))] }), destinationFeatures.length > 0 &&
+                        ((!parentFeatureChecked && checkedChildrens.length > 0) ||
+                            (parentFeatureChecked &&
+                                isTranscript(annotationFeature, apolloSessionModel))) && (jsxRuntime.jsxs("div", { style: {
+                            border: '1px solid #ccc',
+                            marginTop: 20,
+                            padding: 10,
+                            borderRadius: 5,
+                        }, children: [jsxRuntime.jsxs(material.Box, { sx: { ml: 3 }, children: [jsxRuntime.jsx(material.Typography, { variant: "caption", fontSize: 12, children: "Select the destination feature to copy the selected features" }), jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: jsxRuntime.jsx(material.Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange, disabled: createNewGene, children: destinationFeatures.map((f) => (jsxRuntime.jsx(material.MenuItem, { value: f._id, children: `${getFeatureNameOrId(f)} (${f.min + 1}..${f.max})` }, f._id))) }) })] }), jsxRuntime.jsx(material.Box, { sx: { ml: 3 }, children: jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: createNewGene, onChange: handleCreateNewGeneChange }), label: "Create new gene" }) }) })] }))] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
+                            (!parentFeatureChecked &&
+                                checkedChildrens.length > 0 &&
+                                !selectedDestinationFeature), onClick: handleCreateApolloAnnotation, children: "Create" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function parseCigar(cigar) {
@@ -13161,7 +12651,7 @@ function annotationFromPileup(pluggableElement) {
                 });
             }
             const newFeature = {
-                _id: ObjectID__default["default"]().toHexString(),
+                _id: ObjectID().toHexString(),
                 refSeq: refSeqId,
                 min: start,
                 max: end,
@@ -13178,7 +12668,7 @@ function annotationFromPileup(pluggableElement) {
             newFeature.children = children;
             for (const exon of exons) {
                 const newExon = {
-                    _id: ObjectID__default["default"]().toHexString(),
+                    _id: ObjectID().toHexString(),
                     refSeq: refSeqId,
                     min: exon.start,
                     max: exon.end,
@@ -13205,7 +12695,7 @@ function annotationFromPileup(pluggableElement) {
                     ...superContextMenuItems(),
                     {
                         label: 'Create Apollo annotation',
-                        icon: AddIcon__default["default"],
+                        icon: AddIcon,
                         onClick: () => {
                             session.queueDialog((doneCallback) => [
                                 CreateApolloAnnotation,
@@ -13231,22 +12721,25 @@ function annotationFromPileup(pluggableElement) {
 }
 
 function simpleFeatureToGFF3Feature(feature, refSeqId) {
-    // eslint-disable-next-line unicorn/prefer-structured-clone
-    const xfeature = JSON.parse(JSON.stringify(feature));
-    const children = xfeature.subfeatures;
+    const children = feature.get('subfeatures');
     const gff3Feature = [
         {
-            start: xfeature.start + 1,
-            end: xfeature.end,
+            start: feature.get('start') + 1,
+            end: feature.get('end'),
             seq_id: refSeqId,
-            source: xfeature.source ?? null,
-            type: xfeature.type ?? null,
-            score: xfeature.score ?? null,
-            strand: xfeature.strand ? (xfeature.strand === 1 ? '+' : '-') : null,
-            phase: xfeature.phase !== null || xfeature.phase !== undefined
-                ? xfeature.phase
+            source: feature.get('source') ?? null,
+            type: feature.get('type') ?? null,
+            score: feature.get('score') ?? null,
+            strand: feature.get('strand')
+                ? // eslint-disable-next-line unicorn/no-nested-ternary
+                    feature.get('strand') === 1
+                        ? '+'
+                        : '-'
                 : null,
-            attributes: convertFeatureAttributes(xfeature),
+            phase: feature.get('phase') !== null || feature.get('phase') !== undefined
+                ? feature.get('phase')
+                : null,
+            attributes: convertFeatureAttributes(feature),
             derived_features: [],
             child_features: children
                 ? children.map((x) => simpleFeatureToGFF3Feature(x, refSeqId))
@@ -13272,7 +12765,7 @@ function convertFeatureAttributes(feature) {
         'source',
         'score',
     ]);
-    for (const [key, value] of Object.entries(feature)) {
+    for (const [key, value] of Object.entries(feature.toJSON())) {
         if (defaultFields.has(key)) {
             continue;
         }
@@ -13321,10 +12814,9 @@ function annotationFromJBrowseFeature(pluggableElement) {
             }
             return refSeqId;
         },
-        getAnnotationFeature(assembly) {
+        getAnnotationFeature(assembly, feature) {
             const refSeqId = self.getRefSeqId(assembly);
-            const sfeature = self.contextMenuFeature.data;
-            return jbrowseFeatureToAnnotationFeature(sfeature, refSeqId);
+            return jbrowseFeatureToAnnotationFeature(feature, refSeqId);
         },
     }))
         .views((self) => {
@@ -13342,7 +12834,7 @@ function annotationFromJBrowseFeature(pluggableElement) {
                     ...superContextMenuItems(),
                     {
                         label: 'Create Apollo annotation',
-                        icon: AddIcon__default["default"],
+                        icon: AddIcon,
                         onClick: () => {
                             session.queueDialog((doneCallback) => [
                                 CreateApolloAnnotation,
@@ -13351,7 +12843,7 @@ function annotationFromJBrowseFeature(pluggableElement) {
                                     handleClose: () => {
                                         doneCallback();
                                     },
-                                    annotationFeature: self.getAnnotationFeature(assembly),
+                                    annotationFeature: self.getAnnotationFeature(assembly, feature),
                                     assembly,
                                     refSeqId: self.getRefSeqId(assembly),
                                     region,
@@ -13385,7 +12877,7 @@ const CheckResultWarnings = mobxReact.observer(function CheckResultWarnings({ di
         ].filter((checkResult) => assembly.isValidRefName(checkResult.refSeq) &&
             assembly.getCanonicalRefName(checkResult.refSeq) === block.refName &&
             util.doesIntersect2(block.start, block.end, checkResult.start, checkResult.end));
-        const checkResults = clusterResultByMessage(filteredCheckResults, widthBp, true);
+        const checkResults = clusterResultByMessage(filteredCheckResults, widthBp);
         return checkResults.map((checkResult) => {
             const left = Math.round(getLeftPx(display, checkResult.range, block));
             const [feature] = checkResult.featureIds;
@@ -13399,22 +12891,17 @@ const CheckResultWarnings = mobxReact.observer(function CheckResultWarnings({ di
             }
             const top = row * apolloRowHeight;
             const height = apolloRowHeight;
-            return (React__default["default"].createElement(material.Tooltip, { key: checkResult._id, title: checkResult.message },
-                React__default["default"].createElement(material.Box, { className: classes.box, style: {
+            return (jsxRuntime.jsx(material.Tooltip, { title: checkResult.message, children: jsxRuntime.jsx(material.Box, { className: classes.box, style: {
                         top,
                         left,
                         height,
                         width: height,
                         pointerEvents: apolloDragging ? 'none' : 'auto',
-                    } },
-                    React__default["default"].createElement(material.Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, invisible: checkResult.count <= 1 },
-                        React__default["default"].createElement(material.Avatar, { className: classes.avatar },
-                            React__default["default"].createElement(ErrorIcon__default["default"], { "data-testid": `ErrorIcon-${checkResult.start}` }))))));
+                    }, children: jsxRuntime.jsx(material.Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, invisible: checkResult.count <= 1, children: jsxRuntime.jsx(material.Avatar, { className: classes.avatar, children: jsxRuntime.jsx(ErrorIcon, { "data-testid": `ErrorIcon-${checkResult.start}` }) }) }) }) }, checkResult._id));
         });
     });
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 // Lock icon when isLocked === true
 const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(props) {
     const theme = material.useTheme();
@@ -13431,8 +12918,7 @@ const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(prop
     if (!isShown) {
         return null;
     }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: classes.canvasContainer, style: {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: classes.canvasContainer, style: {
                 width: lgv.dynamicBlocks.totalWidthPx,
                 height: featuresHeight,
             }, onContextMenu: (event) => {
@@ -13446,63 +12932,50 @@ const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(prop
                     setContextCoord(coord);
                     setContextMenuItems(getContextMenuItems(event));
                 }
-            } },
-            session.isLocked ? (React__default["default"].createElement("div", { className: classes.locked, "data-testid": "lock-icon" },
-                React__default["default"].createElement(LockIcon__default["default"], null))) : null,
-            loading ? (React__default["default"].createElement("div", { className: classes.loading },
-                React__default["default"].createElement(material.CircularProgress, { size: "18px" }))) : null,
-            message ? (React__default["default"].createElement(material.Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } } },
-                React__default["default"].createElement(material.Tooltip, { title: message },
-                    React__default["default"].createElement("div", null, message)))) : (
-            // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
-            // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
-            React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCollaboratorCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }),
-                React__default["default"].createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }),
-                React__default["default"].createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setOverlayCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }),
-                React__default["default"].createElement(CheckResultWarnings, { display: model }),
-                React__default["default"].createElement(ui.Menu, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
-                        callback();
-                        setContextMenuItems([]);
-                    }, onClose: () => {
-                        setContextMenuItems([]);
-                    }, slotProps: {
-                        transition: {
-                            onExit: () => {
+            }, children: [session.isLocked ? (jsxRuntime.jsx("div", { className: classes.locked, "data-testid": "lock-icon", children: jsxRuntime.jsx(LockIcon, {}) })) : null, loading ? (jsxRuntime.jsx("div", { className: classes.loading, children: jsxRuntime.jsx(material.CircularProgress, { size: "18px" }) })) : null, message ? (jsxRuntime.jsx(material.Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } }, children: jsxRuntime.jsx(material.Tooltip, { title: message, children: jsxRuntime.jsx("div", { children: message }) }) })) : (
+                // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
+                // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
+                jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCollaboratorCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }), jsxRuntime.jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }), jsxRuntime.jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setOverlayCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }), jsxRuntime.jsx(CheckResultWarnings, { display: model }), jsxRuntime.jsx(ui.Menu, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
+                                callback();
                                 setContextMenuItems([]);
-                            },
-                        },
-                    }, anchorReference: "anchorPosition", anchorPosition: contextCoord
-                        ? { top: contextCoord[1], left: contextCoord[0] }
-                        : undefined, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenuItems }))))));
+                            }, onClose: () => {
+                                setContextMenuItems([]);
+                            }, slotProps: {
+                                transition: {
+                                    onExit: () => {
+                                        setContextMenuItems([]);
+                                    },
+                                },
+                            }, anchorReference: "anchorPosition", anchorPosition: contextCoord
+                                ? { top: contextCoord[1], left: contextCoord[0] }
+                                : undefined, menuItems: contextMenuItems })] }))] }) }));
 });
 
 const TrackLines = mobxReact.observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx = 0, }) {
     const { apolloRowHeight, highestRow, showFeatureLabels } = model;
     const featureLabelSpacer = showFeatureLabels ? 2 : 1;
-    return (React__default["default"].createElement("div", { style: {
+    return (jsxRuntime.jsx("div", { style: {
             position: 'absolute',
             left: 0,
             top: (apolloRowHeight * featureLabelSpacer * (highestRow + 1)) / 2 +
                 idx * featureLabelSpacer * apolloRowHeight,
             width: '100%',
-        } },
-        React__default["default"].createElement("hr", { style: hrStyle })));
+        }, children: jsxRuntime.jsx("hr", { style: hrStyle }) }));
 });
 
 const LinearApolloSixFrameDisplay = mobxReact.observer(function LinearApolloSixFrameDisplay(props, apolloDragging) {
     const theme = material.useTheme();
     const { model } = props;
-    const { apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, featureLabelSpacer, geneTrackRowNums, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setTheme, showCheckResults, } = model;
+    const { apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, geneTrackRowNums, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setTheme, showCheckResults, showFeatureLabels, } = model;
     const { classes } = useStyles$1();
     const lgv = util.getContainingView(model);
     React.useEffect(() => {
@@ -13515,8 +12988,7 @@ const LinearApolloSixFrameDisplay = mobxReact.observer(function LinearApolloSixF
         return null;
     }
     const { assemblyManager } = session;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: classes.canvasContainer, style: {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: classes.canvasContainer, style: {
                 width: lgv.dynamicBlocks.totalWidthPx,
                 height: featuresHeight,
             }, onContextMenu: (event) => {
@@ -13530,108 +13002,96 @@ const LinearApolloSixFrameDisplay = mobxReact.observer(function LinearApolloSixF
                     setContextCoord(coord);
                     setContextMenuItems(getContextMenuItems(event));
                 }
-            } },
-            session.isLocked ? (React__default["default"].createElement("div", { className: classes.locked, "data-testid": "lock-icon" },
-                React__default["default"].createElement(LockIcon__default["default"], null))) : null,
-            message ? (React__default["default"].createElement(material.Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } } },
-                React__default["default"].createElement(material.Tooltip, { title: message },
-                    React__default["default"].createElement("div", null, message)))) : (
-            // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
-            // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
-            React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(TrackLines, { model: model, idx: 0 }),
-                React__default["default"].createElement(TrackLines, { model: model, hrStyle: { margin: 0, top: 0, color: 'grey', opacity: 0.4 }, idx: 1 }),
-                React__default["default"].createElement(TrackLines, { model: model, idx: 2 }),
-                React__default["default"].createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCollaboratorCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }),
-                React__default["default"].createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }),
-                React__default["default"].createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setOverlayCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }),
-                lgv.displayedRegions.flatMap((region, idx) => {
-                    const widthBp = lgv.bpPerPx * apolloRowHeight;
-                    const assembly = assemblyManager.get(region.assemblyName);
-                    if (showCheckResults) {
-                        const filteredCheckResults = [
-                            ...session.apolloDataStore.checkResults.values(),
-                        ].filter((checkResult) => assembly?.isValidRefName(checkResult.refSeq) &&
-                            assembly.getCanonicalRefName(checkResult.refSeq) ===
-                                region.refName &&
-                            util.doesIntersect2(region.start, region.end, checkResult.start, checkResult.end));
-                        const checkResults = clusterResultByMessage(filteredCheckResults, widthBp, true);
-                        return checkResults.map((checkResult) => {
-                            const left = (lgv.bpToPx({
-                                refName: region.refName,
-                                coord: checkResult.start,
-                                regionNumber: idx,
-                            })?.offsetPx ?? 0) - lgv.offsetPx;
-                            const [feature] = checkResult.featureIds;
-                            if (!feature || !feature.parent?.looksLikeGene) {
-                                return null;
-                            }
-                            let row;
-                            for (const loc of feature.cdsLocations) {
-                                for (const cds of loc) {
-                                    let rowNum = util.getFrame(cds.min, cds.max, feature.strand ?? 1, cds.phase);
-                                    rowNum = featureLabelSpacer(rowNum < 0 ? -1 * rowNum + 5 : rowNum);
-                                    if (checkResult.start >= cds.min &&
-                                        checkResult.start <= cds.max) {
+            }, children: [session.isLocked ? (jsxRuntime.jsx("div", { className: classes.locked, "data-testid": "lock-icon", children: jsxRuntime.jsx(LockIcon, {}) })) : null, message ? (jsxRuntime.jsx(material.Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } }, children: jsxRuntime.jsx(material.Tooltip, { title: message, children: jsxRuntime.jsx("div", { children: message }) }) })) : (
+                // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
+                // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
+                jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TrackLines, { model: model, idx: 0 }), jsxRuntime.jsx(TrackLines, { model: model, hrStyle: { margin: 0, top: 0, color: 'grey', opacity: 0.4 }, idx: 1 }), jsxRuntime.jsx(TrackLines, { model: model, idx: 2 }), jsxRuntime.jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCollaboratorCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }), jsxRuntime.jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }), jsxRuntime.jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setOverlayCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }), lgv.displayedRegions.flatMap((region, idx) => {
+                            const widthBp = lgv.bpPerPx * apolloRowHeight;
+                            const assembly = assemblyManager.get(region.assemblyName);
+                            if (showCheckResults) {
+                                const filteredCheckResults = [
+                                    ...session.apolloDataStore.checkResults.values(),
+                                ].filter((checkResult) => assembly?.isValidRefName(checkResult.refSeq) &&
+                                    assembly.getCanonicalRefName(checkResult.refSeq) ===
+                                        region.refName &&
+                                    util.doesIntersect2(region.start, region.end, checkResult.start, checkResult.end));
+                                const checkResults = clusterResultByMessage(filteredCheckResults, widthBp);
+                                return checkResults.map((checkResult) => {
+                                    const left = (lgv.bpToPx({
+                                        refName: region.refName,
+                                        coord: checkResult.start,
+                                        regionNumber: idx,
+                                    })?.offsetPx ?? 0) - lgv.offsetPx;
+                                    const [feature] = checkResult.featureIds;
+                                    if (!feature || !feature.parent?.looksLikeGene) {
+                                        return null;
+                                    }
+                                    let row;
+                                    for (const loc of feature.cdsLocations) {
+                                        for (const cds of loc) {
+                                            const frame = util.getFrame(cds.min, cds.max, feature.strand ?? 1, cds.phase);
+                                            const frameOffsets = showFeatureLabels
+                                                ? [0, 5, 3, 1, 15, 13, 11]
+                                                : [0, 2, 1, 0, 8, 7, 6];
+                                            const rowNum = frameOffsets.at(frame);
+                                            if (!rowNum) {
+                                                continue;
+                                            }
+                                            if (checkResult.start >= cds.min &&
+                                                checkResult.start <= cds.max) {
+                                                row = rowNum - 1;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    if (row === undefined) {
+                                        const rowNum = feature.strand == 1
+                                            ? geneTrackRowNums[0]
+                                            : geneTrackRowNums[1];
                                         row = rowNum - 1;
-                                        break;
                                     }
-                                }
-                            }
-                            if (row === undefined) {
-                                const rowNum = feature.strand == 1
-                                    ? geneTrackRowNums[0]
-                                    : geneTrackRowNums[1];
-                                row = rowNum - 1;
+                                    const top = row * apolloRowHeight;
+                                    const height = apolloRowHeight;
+                                    return (jsxRuntime.jsx(material.Tooltip, { title: checkResult.message, children: jsxRuntime.jsx(material.Box, { className: classes.box, style: {
+                                                top,
+                                                left,
+                                                height,
+                                                width: height,
+                                                pointerEvents: apolloDragging ? 'none' : 'auto',
+                                            }, children: jsxRuntime.jsx(material.Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: {
+                                                    vertical: 'bottom',
+                                                    horizontal: 'right',
+                                                }, invisible: checkResult.count <= 1, children: jsxRuntime.jsx(material.Avatar, { className: classes.avatar, children: jsxRuntime.jsx(ErrorIcon, { "data-testid": `ErrorIcon-${checkResult.start}` }) }) }) }) }, checkResult._id));
+                                });
                             }
-                            const top = row * apolloRowHeight;
-                            const height = apolloRowHeight;
-                            return (React__default["default"].createElement(material.Tooltip, { key: checkResult._id, title: checkResult.message },
-                                React__default["default"].createElement(material.Box, { className: classes.box, style: {
-                                        top,
-                                        left,
-                                        height,
-                                        width: height,
-                                        pointerEvents: apolloDragging ? 'none' : 'auto',
-                                    } },
-                                    React__default["default"].createElement(material.Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: {
-                                            vertical: 'bottom',
-                                            horizontal: 'right',
-                                        }, invisible: checkResult.count <= 1 },
-                                        React__default["default"].createElement(material.Avatar, { className: classes.avatar },
-                                            React__default["default"].createElement(ErrorIcon__default["default"], { "data-testid": `ErrorIcon-${checkResult.start}` }))))));
-                        });
-                    }
-                    return null;
-                }),
-                React__default["default"].createElement(ui.Menu, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
-                        callback();
-                        setContextMenuItems([]);
-                    }, onClose: () => {
-                        setContextMenuItems([]);
-                    }, slotProps: {
-                        transition: {
-                            onExit: () => {
+                            return null;
+                        }), jsxRuntime.jsx(ui.Menu, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
+                                callback();
                                 setContextMenuItems([]);
-                            },
-                        },
-                    }, anchorReference: "anchorPosition", anchorPosition: contextCoord
-                        ? { top: contextCoord[1], left: contextCoord[0] }
-                        : undefined, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenuItems }))))));
+                            }, onClose: () => {
+                                setContextMenuItems([]);
+                            }, slotProps: {
+                                transition: {
+                                    onExit: () => {
+                                        setContextMenuItems([]);
+                                    },
+                                },
+                            }, anchorReference: "anchorPosition", anchorPosition: contextCoord
+                                ? { top: contextCoord[1], left: contextCoord[0] }
+                                : undefined, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenuItems })] }))] }) }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const accordionControlHeight = 12;
-const useStyles = mui.makeStyles()((theme) => ({
+const useStyles = tssReact.makeStyles()((theme) => ({
     shading: {
         background: material.alpha(theme.palette.primary.main, 0.2),
         overflowX: 'hidden',
@@ -13693,12 +13153,12 @@ const ResizeHandle = ({ onResize, }) => {
     return (
     // TODO: a11y
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React__default["default"].createElement("div", { onMouseDown: (event) => {
+    jsxRuntime.jsx("div", { onMouseDown: (event) => {
             event.stopPropagation();
             const controller = new AbortController();
             const { signal } = controller;
             function abortDrag() {
-                controller.abort('makeDisplayComponent');
+                controller.abort(new DOMException('Canceling drag event listener', 'AbortError'));
             }
             globalThis.addEventListener('mousemove', mouseMove, { signal });
             globalThis.addEventListener('mouseup', abortDrag, { signal });
@@ -13710,11 +13170,7 @@ const ResizeHandle = ({ onResize, }) => {
 };
 const AccordionControl = mobxReact.observer(function AccordionControl({ onClick, onResize, open, title, }) {
     const { classes } = useStyles();
-    return (React__default["default"].createElement("div", { className: classes.accordionRoot },
-        open && onResize ? React__default["default"].createElement(ResizeHandle, { onResize: onResize }) : null,
-        React__default["default"].createElement("div", { className: classes.accordionControl, onClick: onClick },
-            open ? (React__default["default"].createElement(ExpandLessIcon__default["default"], { className: classes.expandIcon })) : (React__default["default"].createElement(ExpandMoreIcon__default["default"], { className: classes.expandIcon })),
-            title ? (React__default["default"].createElement(material.Typography, { className: classes.title, variant: "caption", component: "span" }, title)) : null)));
+    return (jsxRuntime.jsxs("div", { className: classes.accordionRoot, children: [open && onResize ? jsxRuntime.jsx(ResizeHandle, { onResize: onResize }) : null, jsxRuntime.jsxs("div", { className: classes.accordionControl, onClick: onClick, children: [open ? (jsxRuntime.jsx(ExpandLessIcon, { className: classes.expandIcon })) : (jsxRuntime.jsx(ExpandMoreIcon, { className: classes.expandIcon })), title ? (jsxRuntime.jsx(material.Typography, { className: classes.title, variant: "caption", component: "span", children: title })) : null] })] }));
 });
 const LinearApolloDisplayComponent = mobxReact.observer(function DisplayComponent({ model, ...other }) {
     const session = util.getSession(model);
@@ -13731,28 +13187,19 @@ const LinearApolloDisplayComponent = mobxReact.observer(function DisplayComponen
         model.setDetailsHeight(model.detailsHeight - delta);
     };
     if (!ontologyStore) {
-        return (React__default["default"].createElement("div", { className: classes.alertContainer },
-            React__default["default"].createElement(material.Alert, { severity: "error" }, "Could not load feature type ontology.")));
+        return (jsxRuntime.jsx("div", { className: classes.alertContainer, children: jsxRuntime.jsx(material.Alert, { severity: "error", children: "Could not load feature type ontology." }) }));
     }
     if (graphical && table) {
         const tabularHeight = tabularEditor.isShown ? model.detailsHeight : 0;
         const featureAreaHeight = isShown
             ? overallHeight - model.detailsHeight - accordionControlHeight * 2
             : 0;
-        return (React__default["default"].createElement("div", { style: { height: overallHeight } },
-            React__default["default"].createElement(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }),
-            React__default["default"].createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight } },
-                React__default["default"].createElement(LinearApolloDisplay, { model: model, ...other })),
-            React__default["default"].createElement(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }),
-            React__default["default"].createElement("div", { className: classes.details, style: { height: tabularHeight } },
-                React__default["default"].createElement(TabularEditorPane, { model: model }))));
+        return (jsxRuntime.jsxs("div", { style: { height: overallHeight }, children: [jsxRuntime.jsx(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }), jsxRuntime.jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight }, children: jsxRuntime.jsx(LinearApolloDisplay, { model: model, ...other }) }), jsxRuntime.jsx(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }), jsxRuntime.jsx("div", { className: classes.details, style: { height: tabularHeight }, children: jsxRuntime.jsx(TabularEditorPane, { model: model }) })] }));
     }
     if (graphical) {
-        return (React__default["default"].createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight } },
-            React__default["default"].createElement(LinearApolloDisplay, { model: model, ...other })));
+        return (jsxRuntime.jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight }, children: jsxRuntime.jsx(LinearApolloDisplay, { model: model, ...other }) }));
     }
-    return (React__default["default"].createElement("div", { className: classes.details, style: { height: overallHeight } },
-        React__default["default"].createElement(TabularEditorPane, { model: model })));
+    return (jsxRuntime.jsx("div", { className: classes.details, style: { height: overallHeight }, children: jsxRuntime.jsx(TabularEditorPane, { model: model }) }));
 });
 const LinearApolloSixFrameDisplayComponent = mobxReact.observer(function DisplayComponent({ model, ...other }) {
     const session = util.getSession(model);
@@ -13769,34 +13216,25 @@ const LinearApolloSixFrameDisplayComponent = mobxReact.observer(function Display
         model.setDetailsHeight(detailsHeight - delta);
     };
     if (!ontologyStore) {
-        return (React__default["default"].createElement("div", { className: classes.alertContainer },
-            React__default["default"].createElement(material.Alert, { severity: "error" }, "Could not load feature type ontology.")));
+        return (jsxRuntime.jsx("div", { className: classes.alertContainer, children: jsxRuntime.jsx(material.Alert, { severity: "error", children: "Could not load feature type ontology." }) }));
     }
     if (graphical && table) {
         const tabularHeight = tabularEditor.isShown ? detailsHeight : 0;
         const featureAreaHeight = isShown
             ? overallHeight - detailsHeight - accordionControlHeight * 2
             : 0;
-        return (React__default["default"].createElement("div", { style: { height: overallHeight } },
-            React__default["default"].createElement(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }),
-            React__default["default"].createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight } },
-                React__default["default"].createElement(LinearApolloSixFrameDisplay, { model: model, ...other })),
-            React__default["default"].createElement(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }),
-            React__default["default"].createElement("div", { className: classes.details, style: { height: tabularHeight } },
-                React__default["default"].createElement(TabularEditorPane, { model: model }))));
+        return (jsxRuntime.jsxs("div", { style: { height: overallHeight }, children: [jsxRuntime.jsx(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }), jsxRuntime.jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight }, children: jsxRuntime.jsx(LinearApolloSixFrameDisplay, { model: model, ...other }) }), jsxRuntime.jsx(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }), jsxRuntime.jsx("div", { className: classes.details, style: { height: tabularHeight }, children: jsxRuntime.jsx(TabularEditorPane, { model: model }) })] }));
     }
     if (graphical) {
-        return (React__default["default"].createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight } },
-            React__default["default"].createElement(LinearApolloSixFrameDisplay, { model: model, ...other })));
+        return (jsxRuntime.jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight }, children: jsxRuntime.jsx(LinearApolloSixFrameDisplay, { model: model, ...other }) }));
     }
-    return (React__default["default"].createElement("div", { className: classes.details, style: { height: overallHeight } },
-        React__default["default"].createElement(TabularEditorPane, { model: model })));
+    return (jsxRuntime.jsx("div", { className: classes.details, style: { height: overallHeight }, children: jsxRuntime.jsx(TabularEditorPane, { model: model }) }));
 });
 
 function addTopLevelMenus(rootModel) {
     rootModel.insertInMenu('Apollo', {
         label: 'Redo',
-        icon: RedoIcon__default["default"],
+        icon: RedoIcon,
         onClick(session) {
             const { apolloDataStore } = session;
             void apolloDataStore.changeManager.redoLastChange();
@@ -13804,7 +13242,7 @@ function addTopLevelMenus(rootModel) {
     }, 0);
     rootModel.insertInMenu('Apollo', {
         label: 'Undo',
-        icon: UndoIcon__default["default"],
+        icon: UndoIcon,
         onClick(session) {
             const { apolloDataStore } = session;
             void apolloDataStore.changeManager.undoLastChange();
@@ -13812,7 +13250,7 @@ function addTopLevelMenus(rootModel) {
     }, 0);
     rootModel.appendToMenu('Apollo', {
         label: 'Download GFF3',
-        icon: DownloadIcon__default["default"],
+        icon: DownloadIcon,
         onClick: (session) => {
             session.queueDialog((doneCallback) => [
                 DownloadGFF3,
@@ -13827,7 +13265,7 @@ function addTopLevelMenus(rootModel) {
     });
     rootModel.appendToMenu('Apollo', {
         label: 'View Change Log',
-        icon: TrackChangesIcon__default["default"],
+        icon: TrackChangesIcon,
         onClick: (session) => {
             session.queueDialog((doneCallback) => [
                 ViewChangeLog,
@@ -13842,7 +13280,7 @@ function addTopLevelMenus(rootModel) {
     });
     rootModel.appendToMenu('Apollo', {
         label: 'Open local GFF3 file',
-        icon: FileOpenIcon__default["default"],
+        icon: FileOpenIcon,
         onClick: (session) => {
             session.queueDialog((doneCallback) => [
                 OpenLocalFile,
@@ -13858,7 +13296,7 @@ function addTopLevelMenus(rootModel) {
     });
     rootModel.appendToMenu('Apollo', {
         label: 'View check results',
-        icon: FactCheckIcon__default["default"],
+        icon: FactCheckIcon,
         onClick: (session) => {
             session.queueDialog((doneCallback) => [
                 ViewCheckResults,
@@ -13879,7 +13317,7 @@ function addTopLevelMenus(rootModel) {
     });
     rootModel.appendToMenu('Apollo', {
         label: 'Log out',
-        icon: LogoutIcon__default["default"],
+        icon: LogoutIcon,
         onClick: (session) => {
             session.queueDialog((doneCallback) => [
                 LogOut,
@@ -13895,6 +13333,7 @@ function addTopLevelMenus(rootModel) {
 }
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-confusing-void-expression */
 const ApolloJobModel = mobxStateTree.types
     .model('JobsManager', {})
     .views((self) => ({
@@ -14102,7 +13541,7 @@ function clientDataStoreFactory(AnnotationFeatureExtended) {
                             statusMessage: `Loading ontology "${name}", version "${version}", this may take a while`,
                             progressPct: 0,
                             cancelCallback: () => {
-                                controller.abort('ClientDataStore');
+                                controller.abort(new DOMException(`Canceling loading of ontology "${name}"`, 'AbortError'));
                                 jobsManager.abortJob(job.name);
                             },
                         };
@@ -14358,6 +13797,12 @@ function extendSession(pluginManager, sessionModel) {
                 }
             }
         },
+    }))
+        .actions((self) => ({
+        apolloSetEventualSelectedFeature: mobx.flow(function* apolloSetEventualSelectedFeature(featureId) {
+            yield mobx.when(() => Boolean(self.apolloDataStore.getFeature(featureId)));
+            self.apolloSetSelectedFeature(featureId);
+        }),
     }))
         .volatile((self) => ({
         previousSnapshot: mobxStateTree.getSnapshot(self),
@@ -14463,6 +13908,10 @@ function extendSession(pluginManager, sessionModel) {
                         console.error(error);
                         continue;
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                    if (!jbrowseConfig.configuration.ApolloPlugin.hasRole) {
+                        continue;
+                    }
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                     reloadPluginManagerCallback(jbrowseConfig, self.previousSnapshot);
                     reaction.dispose();
@@ -14470,7 +13919,7 @@ function extendSession(pluginManager, sessionModel) {
             }, { name: 'ApolloSessionLoadConfig' }));
         },
         beforeDestroy() {
-            self.abortController.abort('destroying session model');
+            self.abortController.abort(new DOMException('Clean up Apollo session', 'AbortError'));
         },
     }))
         .views((self) => {
@@ -14512,6 +13961,7 @@ function extendSession(pluginManager, sessionModel) {
                                         oldJBrowseConfig: filteredConfig,
                                         newJBrowseConfig: {
                                             ...filteredConfig,
+                                            // @ts-expect-error The track types are in the snapshot
                                             tracks: filteredConfig?.tracks && [
                                                 ...filteredConfig.tracks,
                                                 newTrackConfigSnapshot,
@@ -14530,7 +13980,7 @@ function extendSession(pluginManager, sessionModel) {
                                 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                                 jbrowse.addTrackConf(newTrackConfigSnapshot);
                             },
-                            icon: SaveIcon__default["default"],
+                            icon: SaveIcon,
                         },
                     ]
                     : [
@@ -14570,7 +14020,7 @@ function extendSession(pluginManager, sessionModel) {
                                 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                                 jbrowse.deleteTrackConf(conf);
                             },
-                            icon: SaveIcon__default["default"],
+                            icon: SaveIcon,
                         },
                     ];
             },
@@ -14607,6 +14057,9 @@ 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) {
     return (typeof data === 'object' &&
         data !== null &&
@@ -14623,7 +14076,7 @@ const transcriptCheck = new shared.TranscriptCheck();
 common.checkRegistry.registerCheck(transcriptCheck.name, transcriptCheck);
 shared.validationRegistry.registerValidation(new shared.CoreValidation());
 shared.validationRegistry.registerValidation(new shared.ParentChildValidation());
-class ApolloPlugin extends Plugin__default["default"] {
+class ApolloPlugin extends Plugin {
     name = 'ApolloPlugin';
     version = version;
     configurationSchema = ApolloPluginConfigurationSchema;
@@ -14720,7 +14173,7 @@ class ApolloPlugin extends Plugin__default["default"] {
                                 ...superRubberBandMenuItems(),
                                 {
                                     label: 'Add new feature',
-                                    icon: AddIcon__default["default"],
+                                    icon: AddIcon,
                                     onClick: () => {
                                         const session = util.getSession(self);
                                         const { leftOffset, rightOffset } = self;
@@ -14748,6 +14201,17 @@ class ApolloPlugin extends Plugin__default["default"] {
         });
         pluginManager.addToExtensionPoint('Core-extendPluggableElement', annotationFromPileup);
         pluginManager.addToExtensionPoint('Core-extendPluggableElement', annotationFromJBrowseFeature);
+        pluginManager.addToExtensionPoint('LinearGenomeView-searchResultSelected', (_, props) => {
+            const { session, result } = props;
+            const trackId = result.getTrackId();
+            const matchedFeature = result.matchedObject;
+            if (trackId?.startsWith('apollo_track_') && matchedFeature) {
+                const geneFeature = matchedFeature;
+                void session.apolloSetEventualSelectedFeature(geneFeature._id);
+            }
+            /* eslint-disable-next-line @typescript-eslint/no-unsafe-return */
+            return _;
+        });
         if (!inWebWorker) {
             pluginManager.addToExtensionPoint('Core-extendWorker', (handle) => {
                 if (!('on' in handle && handle.on)) {
@@ -14836,5 +14300,5 @@ class ApolloPlugin extends Plugin__default["default"] {
     }
 }
 
-exports["default"] = ApolloPlugin;
+exports.default = ApolloPlugin;
 //# sourceMappingURL=jbrowse-plugin-apollo.cjs.development.js.map