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

package/dist/index.esm.js

@@ -5,22 +5,23 @@ import { ConfigurationSchema, readConfObject, getConf, ConfigurationReference }
 import { BaseInternetAccountConfig, InternetAccount, TextSearchAdapterType, BaseDisplay, WidgetType, createBaseTrackConfig, TrackType, createBaseTrackModel, InternetAccountType, DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import { isSessionModelWithWidgets, getContainingView, isUriLocation, isLocalPathLocation, getSession, isElectron, isAbstractMenuManager, getEnv, revcom, defaultCodonTable, getFrame, intersection2, doesIntersect2, measureText } from '@jbrowse/core/util';
 import AddIcon from '@mui/icons-material/Add';
-import { DialogTitle, IconButton, DialogContent, LinearProgress, TextField, Accordion, AccordionSummary, Typography, AccordionDetails, FormGroup, FormControlLabel, Checkbox, Box, Tooltip, Table, TableBody, TableRow, TableCell, InputAdornment, DialogActions, Button, DialogContentText, Autocomplete, FormControl, InputLabel, Select, MenuItem, RadioGroup, Radio, TableContainer, Paper, TableHead, useTheme, FormHelperText, Grid, SvgIcon, Divider, Chip, List, ListItem, ListItemText, Menu, ListItemIcon, alpha, createTheme, Alert, Badge, Avatar, CircularProgress } from '@mui/material';
-import { autorun, entries, observable } from 'mobx';
-import { getSnapshot, getParent, getRoot, types, addDisposer, flow, isAlive, cast, resolveIdentifier, getParentOfType, applySnapshot } from 'mobx-state-tree';
+import { DialogTitle, IconButton, DialogContent, LinearProgress, TextField, Accordion, AccordionSummary, Typography, AccordionDetails, FormGroup, FormControlLabel, Box, Tooltip, Checkbox, Table, TableBody, TableRow, TableCell, InputAdornment, FormHelperText, DialogActions, Button, DialogContentText, Autocomplete, FormControl, InputLabel, Select, MenuItem, RadioGroup, Radio, TableContainer, Paper, TableHead, useTheme, Grid, SvgIcon, Divider, Chip, List, ListItem, ListItemText, Menu, ListItemIcon, alpha, createTheme, Alert, Badge, Avatar, CircularProgress } from '@mui/material';
+import { getSnapshot, getParent, getRoot, types, addDisposer, flow, isAlive, cast, resolveIdentifier, getParentOfType, applySnapshot } from '@jbrowse/mobx-state-tree';
+import { autorun, entries, observable, flow as flow$1, when } from 'mobx';
 import { io } from 'socket.io-client';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import DeleteIcon from '@mui/icons-material/Delete';
 import InputIcon from '@mui/icons-material/Input';
 import PersonIcon from '@mui/icons-material/Person';
 import RuleIcon from '@mui/icons-material/Rule';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import InfoIcon from '@mui/icons-material/Info';
 import LinkIcon from '@mui/icons-material/Link';
 import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
 import ObjectID from 'bson-objectid';
 import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
-import { makeStyles } from 'tss-react/mui';
 import { parseStringSync, formatSync } from '@gmod/gff';
 import SkipNextRoundedIcon from '@mui/icons-material/SkipNextRounded';
 import SkipPreviousRoundedIcon from '@mui/icons-material/SkipPreviousRounded';
@@ -35,9 +36,6 @@ import jsonpath from 'jsonpath';
 import { openLocation } from '@jbrowse/core/util/io';
 import equal from 'fast-deep-equal/es6';
 import { saveAs } from 'file-saver';
-import Checkbox$1 from '@mui/material/Checkbox';
-import FormControlLabel$1 from '@mui/material/FormControlLabel';
-import LinearProgress$1 from '@mui/material/LinearProgress';
 import { nanoid } from 'nanoid';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
@@ -49,7 +47,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import EditIcon from '@mui/icons-material/Edit';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import AddBoxIcon from '@mui/icons-material/AddBox';
-import { AnnotationFeatureModel, ApolloAssembly, CheckResult, ApolloRefSeq } from '@apollo-annotation/mst';
+import { AnnotationFeatureModel, CheckResult, ApolloAssembly, ApolloRefSeq } from '@apollo-annotation/mst';
 import styled from '@emotion/styled';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import ContentCutIcon from '@mui/icons-material/ContentCut';
@@ -69,7 +67,7 @@ import TrackChangesIcon from '@mui/icons-material/TrackChanges';
 import UndoIcon from '@mui/icons-material/Undo';
 import SaveIcon from '@mui/icons-material/Save';
 
-var version = "0.3.11";
+var version = "0.3.12";
 
 const ApolloConfigSchema = ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -624,7 +622,6 @@ function getApolloInternetAccount(session) {
     return internetAccounts.find((ia) => ia.type === 'ApolloInternetAccount');
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const useStyles$g = makeStyles()((theme) => ({
     dialogTitle: {
         background: theme.palette.primary.main,
@@ -641,13 +638,9 @@ const useStyles$g = makeStyles()((theme) => ({
 const Dialog = observer(function JBrowseDialog(props) {
     const { classes } = useStyles$g();
     const { handleClose, title, ...other } = props;
-    return (React.createElement(Dialog$1, { ...other, header: React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.dialogTitle }, title),
-            React.createElement(IconButton, { "aria-label": "close", onClick: handleClose, className: classes.closeButton },
-                React.createElement(CloseIcon, null))) }));
+    return (jsx(Dialog$1, { ...other, header: jsxs(Fragment, { children: [jsx(DialogTitle, { className: classes.dialogTitle, children: title }), jsx(IconButton, { "aria-label": "close", onClick: handleClose, className: classes.closeButton, children: jsx(CloseIcon, {}) })] }) }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 var FileType;
 (function (FileType) {
     FileType["GFF3"] = "text/x-gff3";
@@ -713,6 +706,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
     const [importFeatures, setImportFeatures] = useState(true);
     const [sequenceIsEditable, setSequenceIsEditable] = useState(false);
     const [submitted, setSubmitted] = useState(false);
+    const [strict, setStrict] = useState(true);
     const [fastaFile, setFastaFile] = useState(null);
     const [fastaIndexFile, setFastaIndexFile] = useState(null);
     const [fastaGziIndexFile, setFastaGziIndexFile] = useState(null);
@@ -759,36 +753,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();
@@ -822,6 +813,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
                     assembly: new ObjectID().toHexString(),
                     assemblyName,
                     fileIds: { fa: faId },
+                    parseOptions: { strict },
                 });
             }
             else if (fileType === FileType.GFF3) {
@@ -909,151 +901,76 @@ function AddAssembly({ changeManager, handleClose, session, }) {
             setExpanded(panel);
         }
     };
-    return (React.createElement(Dialog, { open: true, handleClose: handleClose, "data-testid": "add-assembly-dialog", title: "Add new assembly", maxWidth: false },
-        React.createElement("form", { onSubmit: onSubmit, "data-testid": "submit-form" },
-            React.createElement(DialogContent, { className: classes.dialog },
-                loading ? React.createElement(LinearProgress, null) : null,
-                React.createElement(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.createElement(Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelFastaInput', onChange: handleAccordionChange('panelFastaInput') },
-                    React.createElement(AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelFastaInput' ? (React.createElement(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (React.createElement(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelFastaInputd-content", id: "panelFastaInputd-header" },
-                        React.createElement(Typography, { component: "span" }, "FASTA input")),
-                    React.createElement(AccordionDetails, { className: classes.accordionDetails },
-                        React.createElement(FormGroup, null,
-                            React.createElement(FormControlLabel, { "data-testid": "files-on-url-checkbox", control: React.createElement(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.createElement(Box, { display: "flex", alignItems: "center" },
-                                    "Use external URLs",
-                                    React.createElement(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.createElement(IconButton, { size: "small" },
-                                            React.createElement(InfoIcon, { sx: { fontSize: 18 } })))) }),
-                            React.createElement(FormControlLabel, { "data-testid": "sequence-is-editable-checkbox", control: React.createElement(Checkbox, { onChange: () => {
-                                        setSequenceIsEditable(!sequenceIsEditable);
-                                    } }), checked: sequenceIsEditable, disabled: fileType === FileType.EXTERNAL, label: React.createElement(Box, { display: "flex", alignItems: "center" },
-                                    "Store sequence in database",
-                                    React.createElement(Tooltip, { title: "Enables users to edit the genomic sequence, but comes with performance impacts. Use with care.", placement: "top-start" },
-                                        React.createElement(IconButton, { size: "small" },
-                                            React.createElement(InfoIcon, { sx: { fontSize: 18 } })))) }),
-                            React.createElement(FormControlLabel, { "data-testid": "fasta-is-gzip-checkbox", control: React.createElement(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.createElement(Table, { size: "small", sx: { mt: 2 } },
-                                React.createElement(TableBody, null,
-                                    React.createElement(TableRow, null,
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.createElement(Box, { display: "flex", alignItems: "center" },
-                                                React.createElement("span", null, "FASTA"),
-                                                React.createElement(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.createElement(IconButton, { size: "small" },
-                                                        React.createElement(InfoIcon, { sx: { fontSize: 18 } }))))),
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.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 (jsxs(Dialog, { open: true, handleClose: handleClose, "data-testid": "add-assembly-dialog", title: "Add new assembly", maxWidth: false, children: [jsxs("form", { onSubmit: onSubmit, "data-testid": "submit-form", children: [jsxs(DialogContent, { className: classes.dialog, children: [loading ? jsx(LinearProgress, {}) : null, jsx(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 }), jsxs(Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelFastaInput', onChange: handleAccordionChange('panelFastaInput'), children: [jsx(AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelFastaInput' ? (jsx(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (jsx(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelFastaInputd-content", id: "panelFastaInputd-header", children: jsx(Typography, { component: "span", children: "FASTA input" }) }), jsx(AccordionDetails, { className: classes.accordionDetails, children: jsxs(FormGroup, { children: [jsx(FormControlLabel, { "data-testid": "files-on-url-checkbox", control: jsx(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: jsxs(Box, { display: "flex", alignItems: "center", children: ["Use external URLs", jsx(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: jsx(IconButton, { size: "small", children: jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsx(FormControlLabel, { "data-testid": "sequence-is-editable-checkbox", control: jsx(Checkbox, { onChange: () => {
+                                                            setSequenceIsEditable(!sequenceIsEditable);
+                                                        } }), checked: sequenceIsEditable, disabled: fileType === FileType.EXTERNAL, label: jsxs(Box, { display: "flex", alignItems: "center", children: ["Store sequence in database", jsx(Tooltip, { title: "Enables users to edit the genomic sequence, but comes with performance impacts. Use with care.", placement: "top-start", children: jsx(IconButton, { size: "small", children: jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsx(FormControlLabel, { "data-testid": "fasta-is-gzip-checkbox", control: jsx(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 ? (jsx(Table, { size: "small", sx: { mt: 2 }, children: jsxs(TableBody, { children: [jsxs(TableRow, { children: [jsx(TableCell, { style: { borderBottomWidth: 0 }, children: jsxs(Box, { display: "flex", alignItems: "center", children: [jsx("span", { children: "FASTA" }), jsx(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: jsx(IconButton, { size: "small", children: jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsx(TableCell, { style: { borderBottomWidth: 0 }, children: 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 }) })] }), jsxs(TableRow, { children: [jsx(TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA index (.fai)" }), jsx(TableCell, { style: { borderBottomWidth: 0 }, children: jsx("input", { "data-testid": "fai-input-file", type: "file", onChange: (e) => {
+                                                                                setFastaIndexFile(e.target.files?.item(0) ?? null);
+                                                                            }, disabled: (submitted && !errorMessage) || sequenceIsEditable }) })] }), jsxs(TableRow, { children: [jsx(TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA binary index (.gzi)" }), jsx(TableCell, { style: { borderBottomWidth: 0 }, children: jsx("input", { "data-testid": "gzi-input-file", type: "file", onChange: (e) => {
+                                                                                setFastaGziIndexFile(e.target.files?.item(0) ?? null);
+                                                                            }, disabled: (submitted && !errorMessage) || sequenceIsEditable }) })] })] }) })) : (jsx(Table, { size: "small", sx: { mt: 2 }, children: jsxs(TableBody, { children: [jsxs(TableRow, { children: [jsx(TableCell, { style: { borderBottomWidth: 0 }, children: jsxs(Box, { display: "flex", alignItems: "center", children: [jsx("span", { children: "FASTA" }), jsx(Tooltip, { title: "Remote FASTA input must be compressed with bgzip and indexed with samtools faidx (or equivalent)", children: jsx(IconButton, { size: "small", children: jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsx(TableCell, { style: { borderBottomWidth: 0 }, children: jsx(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: (jsx(InputAdornment, { position: "start", children: jsx(LinkIcon, {}) })),
+                                                                                },
+                                                                            } }) })] }), jsxs(TableRow, { children: [jsx(TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA index (.fai)" }), jsx(TableCell, { style: { borderBottomWidth: 0 }, children: jsx(TextField, { "data-testid": "fai-input-url", variant: "outlined", value: fastaIndexUrl, error: !validFastaIndexUrl, onChange: (e) => {
+                                                                                setFastaIndexUrl(e.target.value);
+                                                                            }, disabled: submitted && !errorMessage, slotProps: {
+                                                                                input: {
+                                                                                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(LinkIcon, {}) })),
+                                                                                },
+                                                                            } }) })] }), jsxs(TableRow, { children: [jsx(TableCell, { style: { borderBottomWidth: 0 }, children: "FASTA binary index (.gzi)" }), jsx(TableCell, { style: { borderBottomWidth: 0 }, children: jsx(TextField, { "data-testid": "gzi-input-url", variant: "outlined", value: fastaGziIndexUrl, error: !validFastaGziIndexUrl, onChange: (e) => {
+                                                                                setFastaGziIndexUrl(e.target.value);
+                                                                            }, disabled: submitted && !errorMessage, slotProps: {
+                                                                                input: {
+                                                                                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(LinkIcon, {}) })),
+                                                                                },
+                                                                            } }) })] })] }) }))] }) })] }), jsxs(Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelGffInput', onChange: handleAccordionChange('panelGffInput'), children: [jsx(AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelGffInput' ? (jsx(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (jsx(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelGffInputd-content", children: jsxs(Typography, { component: "span", children: ["GFF3 input", jsx(Tooltip, { title: "GFF3 must includes FASTA sequences. File can be gzip compressed.", children: jsx(InfoIcon, { className: classes.radioIcon, sx: { fontSize: 18 } }) })] }) }), jsx(AccordionDetails, { className: classes.accordionDetails, children: jsxs(Box, { style: { marginTop: 20 }, children: [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.createElement(TableRow, null,
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA index (.fai)"),
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.createElement("input", { "data-testid": "fai-input-file", type: "file", onChange: (e) => {
-                                                    setFastaIndexFile(e.target.files?.item(0) ?? null);
-                                                }, disabled: (submitted && !errorMessage) || sequenceIsEditable }))),
-                                    React.createElement(TableRow, null,
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA binary index (.gzi)"),
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.createElement("input", { "data-testid": "gzi-input-file", type: "file", onChange: (e) => {
-                                                    setFastaGziIndexFile(e.target.files?.item(0) ?? null);
-                                                }, disabled: (submitted && !errorMessage) || sequenceIsEditable })))))) : (React.createElement(Table, { size: "small", sx: { mt: 2 } },
-                                React.createElement(TableBody, null,
-                                    React.createElement(TableRow, null,
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.createElement(Box, { display: "flex", alignItems: "center" },
-                                                React.createElement("span", null, "FASTA"),
-                                                React.createElement(Tooltip, { title: "Remote FASTA input must be compressed with bgzip and indexed with samtools faidx (or equivalent)" },
-                                                    React.createElement(IconButton, { size: "small" },
-                                                        React.createElement(InfoIcon, { sx: { fontSize: 18 } }))))),
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.createElement(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.createElement(InputAdornment, { position: "start" },
-                                                            React.createElement(LinkIcon, null))),
-                                                    },
-                                                } }))),
-                                    React.createElement(TableRow, null,
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA index (.fai)"),
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.createElement(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.createElement(InputAdornment, { position: "start" },
-                                                            React.createElement(LinkIcon, null))),
-                                                    },
-                                                } }))),
-                                    React.createElement(TableRow, null,
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA binary index (.gzi)"),
-                                        React.createElement(TableCell, { style: { borderBottomWidth: 0 } },
-                                            React.createElement(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.createElement(InputAdornment, { position: "start" },
-                                                            React.createElement(LinkIcon, null))),
-                                                    },
-                                                } }))))))))),
-                React.createElement(Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelGffInput', onChange: handleAccordionChange('panelGffInput') },
-                    React.createElement(AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelGffInput' ? (React.createElement(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (React.createElement(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelGffInputd-content" },
-                        React.createElement(Typography, { component: "span" },
-                            "GFF3 input",
-                            React.createElement(Tooltip, { title: "GFF3 must includes FASTA sequences. File can be gzip compressed." },
-                                React.createElement(InfoIcon, { className: classes.radioIcon, sx: { fontSize: 18 } })))),
-                    React.createElement(AccordionDetails, { className: classes.accordionDetails },
-                        React.createElement(Box, { style: { marginTop: 20 } },
-                            React.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.createElement(FormGroup, { style: { display: 'grid' } },
-                                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: importFeatures, onChange: () => {
-                                            setImportFeatures(!importFeatures);
-                                        }, disabled: submitted && !errorMessage }), label: "Load features from GFF3 file" }),
-                                React.createElement(FormControlLabel, { "data-testid": "gff3-is-gzip-checkbox", control: React.createElement(Checkbox, { checked: gff3GzipChecked, onChange: () => {
-                                            setGff3GzipChecked(!gff3GzipChecked);
-                                        }, disabled: submitted && !errorMessage }), label: "GFF3 is gzip compressed" })))))),
-            React.createElement(DialogActions, null,
-                React.createElement(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.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+                                                    } }), jsxs(FormGroup, { style: { display: 'grid' }, children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: importFeatures, onChange: () => {
+                                                                    setImportFeatures(!importFeatures);
+                                                                }, disabled: submitted && !errorMessage }), label: "Load features from GFF3 file" }), jsx(FormControlLabel, { label: "Strict parsing", disabled: !importFeatures || (submitted && !errorMessage), control: jsx(Checkbox, { checked: strict, onChange: (e) => {
+                                                                    setStrict(e.target.checked);
+                                                                } }) }), jsx(FormHelperText, { children: "Don't import any features if any lines in the GFF3 are unable to be processed" }), jsx(FormControlLabel, { "data-testid": "gff3-is-gzip-checkbox", control: jsx(Checkbox, { checked: gff3GzipChecked, onChange: () => {
+                                                                    setGff3GzipChecked(!gff3GzipChecked);
+                                                                }, disabled: submitted && !errorMessage }), label: "GFF3 is gzip compressed" })] })] }) })] })] }), jsxs(DialogActions, { children: [jsx(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' }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 const columns$1 = [
@@ -1094,18 +1011,13 @@ function AddAssemblyAliases({ changeManager, handleClose, session, }) {
         handleClose();
         return newRow;
     };
-    return (React.createElement(Dialog, { open: true, title: "Add assembly aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-assembly-alias", fullWidth: true },
-        React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-            React.createElement(Box, { sx: { height: 400, width: '100%' } },
-                React.createElement(DataGrid, { rows: rows, columns: columns$1, initialState: {
-                        pagination: {
-                            paginationModel: {
-                                pageSize: 5,
+    return (jsxs(Dialog, { open: true, title: "Add assembly aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-assembly-alias", fullWidth: true, children: [jsx(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsx(Box, { sx: { height: 400, width: '100%' }, children: jsx(DataGrid, { rows: rows, columns: columns$1, initialState: {
+                            pagination: {
+                                paginationModel: {
+                                    pageSize: 5,
+                                },
                             },
-                        },
-                    }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+                        }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }) }) }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 /** set of words that should be ignored by fulltext indexing */
@@ -1289,6 +1201,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 */
@@ -1296,7 +1210,15 @@ function jsonPathQuery(node, path, prefixes) {
     if (path === PREFIXED_ID_PATH) {
         return [applyPrefixes(node.id, prefixes)];
     }
-    return jsonpath.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
@@ -1637,6 +1559,7 @@ async function isDatabaseCurrent(db) {
 }
 
 /* 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) {
@@ -2132,7 +2055,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] = useState(false);
     const [termChoices, setTermChoices] = useState();
@@ -2163,7 +2085,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
@@ -2182,7 +2104,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             });
         }
         return () => {
-            controller.abort('OntologyTermAutocomplete loader');
+            controller.abort(new DOMException('Canceling getting valid terms from ontology store', 'AbortError'));
         };
     }, [
         needToLoadTermChoices,
@@ -2210,14 +2132,14 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
         extraTextFieldParams.error = true;
         extraTextFieldParams.helperText = currentOntologyTermInvalid;
     }
-    return (React.createElement(Autocomplete, { style: style, autoComplete: true, filterSelectedOptions: true, disableClearable: true, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, freeSolo: true, value: valueString, options: termChoices ?? [], onOpen: () => {
+    return (jsx(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.createElement(TextField, { ...params, ...extraTextFieldParams })), getOptionLabel: (option) => {
+            ((params) => jsx(TextField, { ...params, ...extraTextFieldParams })), getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return option;
             }
@@ -2250,7 +2172,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] = useState(String(sourceFeature.max));
     const [start, setStart] = useState(String(sourceFeature.min + 1));
@@ -2293,25 +2214,15 @@ function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId
         setType(newType);
     }
     const error = Number(end) <= Number(start);
-    return (React.createElement(Dialog, { open: true, title: "Add new child feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
-                        setStart(e.target.value);
-                    } }),
-                React.createElement(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.createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, sourceFeature), renderInput: (params) => (React.createElement(TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
-                        if (newValue) {
-                            handleChangeType(newValue);
-                        }
-                    } })),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", type: "submit", disabled: error || !(start && end && type) }, "Submit"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Add new child feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsx(TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
+                                    setStart(e.target.value);
+                                } }), jsx(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 }), jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, sourceFeature), renderInput: (params) => (jsx(TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
+                                    if (newValue) {
+                                        handleChangeType(newValue);
+                                    }
+                                } })] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: error || !(start && end && type), children: "Submit" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 class BackendDriver {
@@ -2322,6 +2233,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) {
@@ -2351,7 +2264,7 @@ class ChangeManager {
             statusMessage: 'Pre-validating',
             progressPct: 0,
             cancelCallback: () => {
-                controller.abort('ChangeManager');
+                controller.abort(new DOMException(`Cancelling change "${change.typeName}"`, 'AbortError'));
             },
         };
         if (updateJobsManager) {
@@ -2466,6 +2379,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();
@@ -2963,7 +2881,6 @@ class DesktopFileDriver extends BackendDriver {
     }
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 var NewFeature;
 (function (NewFeature) {
     NewFeature["GENE_AND_SUBFEATURES"] = "GENE_AND_SUBFEATURES";
@@ -3122,45 +3039,16 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
         (!strand && type === NewFeature.TRANSCRIPT_AND_SUBFEATURES)) {
         submitDisabled = true;
     }
-    return (React.createElement(Dialog, { open: true, title: "Add new feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog" },
-        React.createElement("form", { onSubmit: onSubmit, "data-testid": "submit-form" },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: Number(start), onChange: (e) => {
-                        setStart(e.target.value);
-                    } }),
-                React.createElement(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.createElement(FormControl, null,
-                    React.createElement(InputLabel, { id: "demo-simple-select-label" }, "Strand"),
-                    React.createElement(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Strand", value: strand?.toString(), onChange: handleChangeStrand },
-                        React.createElement(MenuItem, { value: undefined }),
-                        React.createElement(MenuItem, { value: 1 }, "+"),
-                        React.createElement(MenuItem, { value: -1 }, "-"))),
-                React.createElement(FormControl, { style: { marginTop: 20 } },
-                    React.createElement(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: NewFeature.GENE_AND_SUBFEATURES, name: "radio-buttons-group", value: type, onChange: handleTypeChange },
-                        React.createElement(FormControlLabel, { value: NewFeature.GENE_AND_SUBFEATURES, control: React.createElement(Radio, null), label: React.createElement(Box, { display: "flex", alignItems: "center" },
-                                "Add gene and sub-features",
-                                React.createElement(Tooltip, { title: "This is a shortcut to create a gene with a single mRNA, exon, and CDS" },
-                                    React.createElement(IconButton, { size: "small" },
-                                        React.createElement(InfoIcon, { sx: { fontSize: 18 } })))) }),
-                        React.createElement(FormControlLabel, { value: NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: React.createElement(Radio, null), label: React.createElement(Box, { display: "flex", alignItems: "center" },
-                                "Add transcript and sub-features",
-                                React.createElement(Tooltip, { title: "This is a shortcut to create a single mRNA with exon and CDS, but without a parent gene" },
-                                    React.createElement(IconButton, { size: "small" },
-                                        React.createElement(InfoIcon, { sx: { fontSize: 18 } })))) }),
-                        React.createElement(FormControlLabel, { value: NewFeature.CUSTOM, checked: type !== NewFeature.GENE_AND_SUBFEATURES &&
-                                type !== NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: React.createElement(Radio, null), label: "Add feature with a sequence ontology type" }))),
-                type === NewFeature.CUSTOM ? (React.createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: customType, filterTerms: isOntologyClass, renderInput: (params) => (React.createElement(TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true })), onChange: (_oldValue, newValue) => {
-                        if (newValue) {
-                            handleChangeOntologyType(newValue);
-                        }
-                    } })) : null),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", type: "submit", disabled: submitDisabled }, "Submit"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Add new feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog", children: [jsxs("form", { onSubmit: onSubmit, "data-testid": "submit-form", children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsx(TextField, { margin: "dense", id: "start", label: "Start", type: "number", fullWidth: true, variant: "outlined", value: Number(start), onChange: (e) => {
+                                    setStart(e.target.value);
+                                } }), jsx(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 }), jsxs(FormControl, { children: [jsx(InputLabel, { id: "demo-simple-select-label", children: "Strand" }), jsxs(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Strand", value: strand?.toString(), onChange: handleChangeStrand, children: [jsx(MenuItem, { value: undefined }), jsx(MenuItem, { value: 1, children: "+" }), jsx(MenuItem, { value: -1, children: "-" })] })] }), jsx(FormControl, { style: { marginTop: 20 }, children: jsxs(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: NewFeature.GENE_AND_SUBFEATURES, name: "radio-buttons-group", value: type, onChange: handleTypeChange, children: [jsx(FormControlLabel, { value: NewFeature.GENE_AND_SUBFEATURES, control: jsx(Radio, {}), label: jsxs(Box, { display: "flex", alignItems: "center", children: ["Add gene and sub-features", jsx(Tooltip, { title: "This is a shortcut to create a gene with a single mRNA, exon, and CDS", children: jsx(IconButton, { size: "small", children: jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsx(FormControlLabel, { value: NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: jsx(Radio, {}), label: jsxs(Box, { display: "flex", alignItems: "center", children: ["Add transcript and sub-features", jsx(Tooltip, { title: "This is a shortcut to create a single mRNA with exon and CDS, but without a parent gene", children: jsx(IconButton, { size: "small", children: jsx(InfoIcon, { sx: { fontSize: 18 } }) }) })] }) }), jsx(FormControlLabel, { value: NewFeature.CUSTOM, checked: type !== NewFeature.GENE_AND_SUBFEATURES &&
+                                                type !== NewFeature.TRANSCRIPT_AND_SUBFEATURES, control: jsx(Radio, {}), label: "Add feature with a sequence ontology type" })] }) }), type === NewFeature.CUSTOM ? (jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: customType, filterTerms: isOntologyClass, renderInput: (params) => (jsx(TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true })), onChange: (_oldValue, newValue) => {
+                                    if (newValue) {
+                                        handleChangeOntologyType(newValue);
+                                    }
+                                } })) : null] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: submitDisabled, children: "Submit" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 /**
@@ -3326,27 +3214,13 @@ function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, so
             _id: id,
         };
     }
-    return (React.createElement(Dialog, { open: true, title: "Copy features and annotations", handleClose: handleClose, maxWidth: false, "data-testid": "copy-feature" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(DialogContentText, null, "Target assembly"),
-                React.createElement(Select, { labelId: "label", value: selectedAssemblyId, onChange: handleChangeAssembly }, assemblies
-                    .filter((option) => option.name !== sourceAssemblyId)
-                    .map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, readConfObject(option, 'displayName'))))),
-                React.createElement(DialogContentText, null, "Target reference sequence"),
-                React.createElement(Select, { labelId: "label", value: selectedRefSeqId, onChange: handleChangeRefSeq }, refNames.map((option) => (React.createElement(MenuItem, { key: option._id, value: option._id }, option.name)))),
-                React.createElement(DialogContentText, null, "Start position in target reference sequence"),
-                React.createElement(TextField, { margin: "dense", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
-                        setStart(Number(e.target.value));
-                    } })),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { disabled: !selectedAssemblyId || !selectedRefSeqId || !start, variant: "contained", type: "submit" }, "Submit"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Copy features and annotations", handleClose: handleClose, maxWidth: false, "data-testid": "copy-feature", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsx(DialogContentText, { children: "Target assembly" }), jsx(Select, { labelId: "label", value: selectedAssemblyId, onChange: handleChangeAssembly, children: assemblies
+                                    .filter((option) => option.name !== sourceAssemblyId)
+                                    .map((option) => (jsx(MenuItem, { value: option.name, children: readConfObject(option, 'displayName') }, option.name))) }), jsx(DialogContentText, { children: "Target reference sequence" }), jsx(Select, { labelId: "label", value: selectedRefSeqId, onChange: handleChangeRefSeq, children: refNames.map((option) => (jsx(MenuItem, { value: option._id, children: option.name }, option._id))) }), jsx(DialogContentText, { children: "Start position in target reference sequence" }), jsx(TextField, { margin: "dense", type: "number", fullWidth: true, variant: "outlined", value: start, onChange: (e) => {
+                                    setStart(Number(e.target.value));
+                                } })] }), jsxs(DialogActions, { children: [jsx(Button, { disabled: !selectedAssemblyId || !selectedRefSeqId || !start, variant: "contained", type: "submit", children: "Submit" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function DeleteAssembly({ changeManager, handleClose, session, }) {
     const { internetAccounts } = getRoot(session);
     const [errorMessage, setErrorMessage] = useState('');
@@ -3390,28 +3264,11 @@ function DeleteAssembly({ changeManager, handleClose, session, }) {
         handleClose();
         event.preventDefault();
     }
-    return (React.createElement(Dialog, { open: true, title: "Delete Assembly", handleClose: handleClose, maxWidth: false, "data-testid": "delete-assembly" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                apolloInternetAccounts.length > 1 ? (React.createElement(React.Fragment, null,
-                    React.createElement(DialogContentText, null, "Select account"),
-                    React.createElement(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage }, internetAccounts.map((option) => (React.createElement(MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-                React.createElement(DialogContentText, null, "Select assembly"),
-                React.createElement(Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName)))),
-                React.createElement(DialogContentText, null,
-                    React.createElement("strong", { style: { color: 'red' } }, "NOTE: All assembly data will be deleted and this operation cannot be undone!")),
-                React.createElement(FormGroup, null,
-                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: confirmDelete, onChange: () => {
-                                setconfirmDelete(!confirmDelete);
-                            } }), label: "I understand that all assembly data will be deleted" }))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { disabled: !selectedAssembly || !confirmDelete, variant: "contained", type: "submit" }, "Delete"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Delete Assembly", handleClose: handleClose, maxWidth: false, "data-testid": "delete-assembly", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [apolloInternetAccounts.length > 1 ? (jsxs(Fragment, { children: [jsx(DialogContentText, { children: "Select account" }), jsx(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage, children: internetAccounts.map((option) => (jsx(MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsx(DialogContentText, { children: "Select assembly" }), jsx(Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsx(DialogContentText, { children: jsx("strong", { style: { color: 'red' }, children: "NOTE: All assembly data will be deleted and this operation cannot be undone!" }) }), jsx(FormGroup, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: confirmDelete, onChange: () => {
+                                            setconfirmDelete(!confirmDelete);
+                                        } }), label: "I understand that all assembly data will be deleted" }) })] }), jsxs(DialogActions, { children: [jsx(Button, { disabled: !selectedAssembly || !confirmDelete, variant: "contained", type: "submit", children: "Delete" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function lumpLocationChanges(changes, assembly) {
     if (changes.length === 0) {
         return;
@@ -3719,17 +3576,9 @@ function DeleteFeature({ changeManager, handleClose, selectedFeature, session, s
         handleClose();
         event.preventDefault();
     }
-    return (React.createElement(Dialog, { open: true, title: "Delete feature", handleClose: handleClose, maxWidth: false, "data-testid": "delete-feature" },
-        React.createElement("form", { onSubmit: (event) => {
-                void onSubmit(event);
-            } },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(DialogContentText, null, "Are you sure you want to delete the selected feature?")),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", type: "submit" }, "Yes"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Delete feature", handleClose: handleClose, maxWidth: false, "data-testid": "delete-feature", children: [jsxs("form", { onSubmit: (event) => {
+                    void onSubmit(event);
+                }, children: [jsx(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsx(DialogContentText, { children: "Are you sure you want to delete the selected feature?" }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", children: "Yes" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function DownloadGFF3({ handleClose, session }) {
@@ -3839,24 +3688,11 @@ function DownloadGFF3({ handleClose, session }) {
         const gff3Blob = new Blob([gff3], { type: 'text/plain;charset=utf-8' });
         saveAs(gff3Blob, `${selectedAssembly.displayName ?? selectedAssembly.name}.gff3`);
     }
-    return (React.createElement(Dialog, { open: true, title: "Export GFF3", handleClose: handleClose, maxWidth: false, "data-testid": "download-gff3" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(DialogContentText, null, "Select assembly"),
-                React.createElement(Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName ?? option.name)))),
-                React.createElement(DialogContentText, null, "Select assembly to export to GFF3"),
-                React.createElement(FormGroup, null,
-                    React.createElement(FormControlLabel, { "data-testid": "include-fasta-checkbox", control: React.createElement(Checkbox, { checked: includeFASTA, onChange: () => {
-                                setincludeFASTA(!includeFASTA);
-                            } }), label: "Include fasta sequence in GFF output" }))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { disabled: !selectedAssembly, variant: "contained", type: "submit" }, "Download"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Export GFF3", handleClose: handleClose, maxWidth: false, "data-testid": "download-gff3", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsx(DialogContentText, { children: "Select assembly" }), jsx(Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName ?? option.name }, option.name))) }), jsx(DialogContentText, { children: "Select assembly to export to GFF3" }), jsx(FormGroup, { children: jsx(FormControlLabel, { "data-testid": "include-fasta-checkbox", control: jsx(Checkbox, { checked: includeFASTA, onChange: () => {
+                                            setincludeFASTA(!includeFASTA);
+                                        } }), label: "Include fasta sequence in GFF output" }) })] }), jsxs(DialogActions, { children: [jsx(Button, { disabled: !selectedAssembly, variant: "contained", type: "submit", children: "Download" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 function ImportFeatures({ changeManager, handleClose, session, }) {
     const { apolloDataStore } = session;
     const [file, setFile] = useState();
@@ -3866,6 +3702,7 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
     // default is -1, submit button should be disabled until count is set
     const [featuresCount, setFeaturesCount] = useState();
     const [deleteFeatures, setDeleteFeatures] = useState(false);
+    const [strict, setStrict] = useState(true);
     const [loading, setLoading] = useState(false);
     const { collaborationServerDriver, getInternetAccount } = apolloDataStore;
     const assemblies = collaborationServerDriver.getAssemblies();
@@ -3877,6 +3714,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
     useEffect(() => {
         if (!selectedAssembly) {
@@ -3966,7 +3806,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);
             },
         };
@@ -3993,35 +3833,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.createElement(Dialog, { open: true, title: "Import Features from GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "import-features-dialog" },
-        loading ? React.createElement(LinearProgress$1, null) : null,
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(DialogContentText, null, "Select assembly"),
-                React.createElement(Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: submitted && !errorMessage }, assemblies.map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName ?? option.name))))),
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(DialogContentText, null, "Upload GFF3 to load features"),
-                React.createElement("input", { type: "file", onChange: handleChangeFile, disabled: submitted && !errorMessage })),
-            featuresCount && featuresCount > 0 ? (React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, null,
-                    "This assembly already has ",
-                    featuresCount,
-                    " features, would you like to delete the existing features before importing new ones?"),
-                React.createElement(FormControlLabel$1, { label: "Yes, delete existing features", disabled: submitted && !errorMessage, control: React.createElement(Checkbox$1, { checked: deleteFeatures, onChange: handleDeleteFeatures, slotProps: { input: { 'aria-label': 'controlled' } }, color: "warning" }) }))) : null,
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { disabled: !(selectedAssembly && file && featuresCount !== undefined) ||
-                        submitted, variant: "contained", type: "submit" }, submitted ? 'Submitting...' : 'Submit'),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Import Features from GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "import-features-dialog", children: [loading ? jsx(LinearProgress, {}) : null, jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsx(DialogContentText, { children: "Select assembly" }), jsx(Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: submitted && !errorMessage, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName ?? option.name }, option.name))) }), jsx(DialogContentText, { children: "Upload GFF3 to load features" }), jsx("input", { type: "file", onChange: handleChangeFile, disabled: submitted && !errorMessage }), jsx(FormControlLabel, { label: "Strict parsing", disabled: submitted && !errorMessage, control: jsx(Checkbox, { checked: strict, onChange: handleSetStrict }) }), jsx(FormHelperText, { children: "Don't import any features if any lines in the GFF3 are unable to be processed" }), featuresCount && featuresCount > 0 ? (jsxs(Fragment, { children: [jsx(FormControlLabel, { label: "Delete existing features", disabled: submitted && !errorMessage, control: jsx(Checkbox, { checked: deleteFeatures, onChange: handleDeleteFeatures, slotProps: { input: { 'aria-label': 'controlled' } }, color: "warning" }) }), jsxs(FormHelperText, { children: ["This assembly has ", featuresCount, " features that will be deleted"] })] })) : null] }), jsxs(DialogActions, { children: [jsx(Button, { disabled: !(selectedAssembly && file && featuresCount !== undefined) ||
+                                    submitted, variant: "contained", type: "submit", children: submitted ? 'Submitting...' : 'Submit' }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function LogOut({ handleClose, session }) {
     const { internetAccounts } = getRoot(session);
     const [errorMessage, setErrorMessage] = useState('');
@@ -4043,18 +3864,7 @@ function LogOut({ handleClose, session }) {
         selectedInternetAccount.removeToken();
         globalThis.location.reload();
     }
-    return (React.createElement(Dialog, { open: true, title: "Log out", handleClose: handleClose, maxWidth: false, "data-testid": "log-out" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                apolloInternetAccounts.length > 1 ? (React.createElement(React.Fragment, null,
-                    React.createElement(DialogContentText, null, "Select account"),
-                    React.createElement(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount }, internetAccounts.map((option) => (React.createElement(MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-                React.createElement(DialogContentText, null, "Are you sure you want to log out?")),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { disabled: !selectedInternetAccount, variant: "contained", type: "submit" }, "Log Out"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Log out", handleClose: handleClose, maxWidth: false, "data-testid": "log-out", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [apolloInternetAccounts.length > 1 ? (jsxs(Fragment, { children: [jsx(DialogContentText, { children: "Select account" }), jsx(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, children: internetAccounts.map((option) => (jsx(MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsx(DialogContentText, { children: "Are you sure you want to log out?" })] }), jsxs(DialogActions, { children: [jsx(Button, { disabled: !selectedInternetAccount, variant: "contained", type: "submit", children: "Log Out" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function ManageChecks({ handleClose, session }) {
@@ -4171,37 +3981,18 @@ function ManageChecks({ handleClose, session }) {
         }
         setSelectedInternetAccount(newlySelectedInternetAccount);
     }
-    return (React.createElement(Dialog, { open: true, title: "Manage Checks", handleClose: handleClose, "data-testid": "manage-checks" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, null,
-                apolloInternetAccounts.length > 1 ? (React.createElement(React.Fragment, null,
-                    React.createElement(DialogContentText, null, "Select account"),
-                    React.createElement(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage }, internetAccounts.map((option) => (React.createElement(MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-                React.createElement(DialogContentText, null, "Select assembly"),
-                React.createElement(Select, { style: { width: 300 }, labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName)))),
-                React.createElement("br", null),
-                React.createElement("br", null),
-                React.createElement(TableContainer, { component: Paper },
-                    React.createElement(Table, null,
-                        React.createElement(TableHead, null,
-                            React.createElement(TableRow, null,
-                                React.createElement(TableCell, null, "Check name"),
-                                React.createElement(TableCell, null, "Use check"))),
-                        React.createElement(TableBody, null, checks.map((check) => (React.createElement(TableRow, { key: check._id },
-                            React.createElement(TableCell, null, check.name),
-                            React.createElement(TableCell, null,
-                                React.createElement(Checkbox, { value: check._id, checked: selectedChecks.includes(check._id), onChange: handleCheckboxChange }))))))))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", type: "submit" }, "Submit"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Manage Checks", handleClose: handleClose, "data-testid": "manage-checks", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxs(Fragment, { children: [jsx(DialogContentText, { children: "Select account" }), jsx(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage, children: internetAccounts.map((option) => (jsx(MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsx(DialogContentText, { children: "Select assembly" }), jsx(Select, { style: { width: 300 }, labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsx("br", {}), jsx("br", {}), jsx(TableContainer, { component: Paper, children: jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Check name" }), jsx(TableCell, { children: "Use check" })] }) }), jsx(TableBody, { children: checks.map((check) => (jsxs(TableRow, { children: [jsx(TableCell, { children: check.name }), jsx(TableCell, { children: jsx(Checkbox, { value: check._id, checked: selectedChecks.includes(check._id), onChange: handleCheckboxChange }) })] }, check._id))) })] }) })] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", children: "Submit" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(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 } = 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');
     }
@@ -4216,16 +4007,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));
@@ -4281,11 +4070,11 @@ function ManageUsers({ changeManager, handleClose, session, }) {
             field: 'actions',
             type: 'actions',
             getActions: (params) => [
-                React.createElement(GridActionsCellItem, { key: `delete-${params.id}`, icon: React.createElement(DeleteIcon, null), onClick: async () => {
+                jsx(GridActionsCellItem, { icon: 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}`),
             ],
         },
     ];
@@ -4307,22 +4096,11 @@ function ManageUsers({ changeManager, handleClose, session, }) {
         });
         return newRow;
     }
-    return (React.createElement(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users" },
-        React.createElement(DialogContent, null,
-            apolloInternetAccounts.length > 1 ? (React.createElement(React.Fragment, null,
-                React.createElement(DialogContentText, null, "Select account"),
-                React.createElement(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage }, internetAccounts.map((option) => (React.createElement(MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
-            React.createElement("div", { style: { height: '100%', width: '100%' } },
-                React.createElement(DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: GridToolbar }, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
-                        setErrorMessage(String(error));
-                    } }))),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxs(DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxs(Fragment, { children: [jsx(DialogContentText, { children: "Select account" }), jsx(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsx(MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsx("div", { style: { height: '100%', width: '100%' }, children: jsx(DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: GridToolbar }, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
+                                setErrorMessage(String(error));
+                            } }) })] }), jsx(DialogActions, { children: jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function getNeighboringExons(referenceExon) {
     const neighboringExons = {};
     const tx = referenceExon.parent;
@@ -4406,20 +4184,10 @@ function MergeExons({ changeManager, handleClose, selectedFeature, setSelectedFe
         setSelectedExon(neighboringExons[value]);
     };
     const neighboringExons = getNeighboringExons(sourceFeature);
-    return (React.createElement(Dialog, { open: true, title: "Merge exons", handleClose: handleClose, maxWidth: false, "data-testid": "merge-exons" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                Object.keys(neighboringExons).length === 0
-                    ? 'There are no neighbouring exons to merge with'
-                    : 'Merge with exon on:',
-                React.createElement(FormControl, { style: { marginTop: 5 } },
-                    React.createElement(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedExon, onChange: handleTypeChange }, Object.keys(neighboringExons).map((key) => (React.createElement(FormControlLabel, { value: key, key: key, control: React.createElement(Radio, null), label: React.createElement(Box, { display: "flex", alignItems: "center" }, makeRadioButtonName$1(key, neighboringExons)) })))))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", type: "submit", disabled: Object.keys(neighboringExons).length === 0 ||
-                        selectedExon === undefined }, "Submit"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Merge exons", handleClose: handleClose, maxWidth: false, "data-testid": "merge-exons", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [Object.keys(neighboringExons).length === 0
+                                ? 'There are no neighbouring exons to merge with'
+                                : 'Merge with exon on:', jsx(FormControl, { style: { marginTop: 5 }, children: jsx(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedExon, onChange: handleTypeChange, children: Object.keys(neighboringExons).map((key) => (jsx(FormControlLabel, { value: key, control: jsx(Radio, {}), label: jsx(Box, { display: "flex", alignItems: "center", children: makeRadioButtonName$1(key, neighboringExons) }) }, key))) }) })] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: Object.keys(neighboringExons).length === 0 ||
+                                    selectedExon === undefined, children: "Submit" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function getTranscripts(referenceTranscript, session) {
@@ -4489,23 +4257,12 @@ function MergeTranscripts({ changeManager, handleClose, selectedFeature, session
         const { value } = e.target;
         setSelectedTranscriptId(value);
     };
-    return (React.createElement(Dialog, { open: true, title: "Merge transcripts", handleClose: handleClose, maxWidth: false, "data-testid": "merge-transcripts" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                Object.keys(transcripts).length === 0
-                    ? 'There are no transcripts to merge with'
-                    : 'Merge with transcript:',
-                React.createElement(FormControl, { style: { marginTop: 5 } },
-                    React.createElement(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedTranscriptId, onChange: handleTypeChange }, Object.keys(transcripts).map((key) => (React.createElement(FormControlLabel, { value: key, key: key, control: React.createElement(Radio, null), label: React.createElement(Box, { display: "flex", alignItems: "center" }, makeRadioButtonName(transcripts[key])) })))))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", type: "submit", disabled: Object.keys(transcripts).length === 0 ||
-                        selectedTranscriptId === undefined }, "Submit"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Merge transcripts", handleClose: handleClose, maxWidth: false, "data-testid": "merge-transcripts", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [Object.keys(transcripts).length === 0
+                                ? 'There are no transcripts to merge with'
+                                : 'Merge with transcript:', jsx(FormControl, { style: { marginTop: 5 }, children: jsx(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedTranscriptId, onChange: handleTypeChange, children: Object.keys(transcripts).map((key) => (jsx(FormControlLabel, { value: key, control: jsx(Radio, {}), label: jsx(Box, { display: "flex", alignItems: "center", children: makeRadioButtonName(transcripts[key]) }) }, key))) }) })] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: Object.keys(transcripts).length === 0 ||
+                                    selectedTranscriptId === undefined, children: "Submit" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(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;
@@ -4587,25 +4344,9 @@ function OpenLocalFile({ handleClose, session }) {
     function handleAssemblyNameChange(event) {
         setAssemblyName(event.target.value);
     }
-    return (React.createElement(Dialog, { open: true, title: "Open local GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "open-local-file" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(FormControl, null,
-                    React.createElement("div", { style: { flexDirection: 'row' } },
-                        React.createElement(Button, { variant: "contained", component: "label", style: { marginRight: theme.spacing() } },
-                            "Choose File",
-                            React.createElement("input", { type: "file", required: true, hidden: true, onChange: handleChangeFile })),
-                        file ? file.name : 'No file chosen'),
-                    React.createElement(FormHelperText, null, "Make sure your GFF3 has an embedded FASTA section")),
-                React.createElement(TextField, { required: true, label: "Assembly name", value: assemblyName, onChange: handleAssemblyNameChange })),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { disabled: false, variant: "contained", type: "submit" }, submitted ? 'Submitting...' : 'Submit'),
-                React.createElement(Button, { disabled: submitted, variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Open local GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "open-local-file", children: [jsxs("form", { onSubmit: onSubmit, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxs(FormControl, { children: [jsxs("div", { style: { flexDirection: 'row' }, children: [jsxs(Button, { variant: "contained", component: "label", style: { marginRight: theme.spacing() }, children: ["Choose File", jsx("input", { type: "file", required: true, hidden: true, onChange: handleChangeFile })] }), file ? file.name : 'No file chosen'] }), jsx(FormHelperText, { children: "Make sure your GFF3 has an embedded FASTA section" })] }), jsx(TextField, { required: true, label: "Assembly name", value: assemblyName, onChange: handleAssemblyNameChange })] }), jsxs(DialogActions, { children: [jsx(Button, { disabled: false, variant: "contained", type: "submit", children: submitted ? 'Submitting...' : 'Submit' }), jsx(Button, { disabled: submitted, variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const useStyles$e = makeStyles()((theme) => ({
     changeTextarea: {
         fontFamily: 'monospace',
@@ -4642,7 +4383,7 @@ function ViewChangeLog({ handleClose, session }) {
             field: 'changes',
             headerName: 'Change JSON',
             width: 600,
-            renderCell: ({ value }) => (React.createElement("textarea", { className: classes.changeTextarea, value: JSON.stringify(value), readOnly: true })),
+            renderCell: ({ value }) => (jsx("textarea", { className: classes.changeTextarea, value: JSON.stringify(value), readOnly: true })),
         },
         { field: 'user', headerName: 'User', width: 140 },
         {
@@ -4690,20 +4431,12 @@ function ViewChangeLog({ handleClose, session }) {
         const newAssembly = assemblies.find((asm) => asm.name === e.target.value);
         setSelectedAssembly(newAssembly);
     }
-    return (React.createElement(Dialog, { open: true, fullScreen: true, title: "View change log", handleClose: handleClose, "data-testid": "view-changelog" },
-        React.createElement(Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly }, assemblies.map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName || option.name)))),
-        React.createElement(DialogContent, null,
-            React.createElement(DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: GridToolbar }, initialState: {
-                    sorting: { sortModel: [{ field: 'sequence', sort: 'desc' }] },
-                    columns: { columnVisibilityModel: { sequence: false } },
-                } })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, fullScreen: true, title: "View change log", handleClose: handleClose, "data-testid": "view-changelog", children: [jsx(Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName || option.name }, option.name))) }), jsx(DialogContent, { children: jsx(DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: GridToolbar }, initialState: {
+                        sorting: { sortModel: [{ field: 'sequence', sort: 'desc' }] },
+                        columns: { columnVisibilityModel: { sequence: false } },
+                    } }) }), jsx(DialogActions, { children: jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsx(DialogContent, { children: jsx(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 },
@@ -4847,31 +4580,13 @@ const AddRefSeqAliases = observer(function AddRefSeqAliases({ changeManager, han
         });
         handleClose();
     };
-    return (React.createElement(Dialog, { open: true, title: "Add reference sequence aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-refseq-alias", fullWidth: true },
-        React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-            React.createElement(Grid, { container: true, spacing: 2 },
-                React.createElement(Grid, null,
-                    React.createElement(FormControl, { disabled: enableSubmit && !errorMessage, fullWidth: true },
-                        React.createElement(InputLabel, { id: "demo-simple-select-label" }, "Assembly"),
-                        React.createElement(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Assembly", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, style: { minWidth: 150 } }, assemblies.map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName)))))),
-                React.createElement(Grid, null,
-                    React.createElement(InputLabel, null, "Load RefName alias"),
-                    React.createElement("input", { type: "file", onChange: handleChangeFileHandler, ref: fileRef, disabled: (enableSubmit && !errorMessage) || !selectedAssembly }))),
-            selectedAssembly && refNameAliasMap.size > 0 ? (React.createElement("div", { style: { height: 200, width: '100%', marginTop: 20 } },
-                React.createElement(InputLabel, null, "Refname aliases found for selected assembly."),
-                React.createElement(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.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", type: "submit", disabled: !enableSubmit, onClick: handleSubmit }, "Submit"),
-            React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Add reference sequence aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-refseq-alias", fullWidth: true, children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { children: jsxs(FormControl, { disabled: enableSubmit && !errorMessage, fullWidth: true, children: [jsx(InputLabel, { id: "demo-simple-select-label", children: "Assembly" }), jsx(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", label: "Assembly", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, style: { minWidth: 150 }, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName }, option.name))) })] }) }), jsxs(Grid, { children: [jsx(InputLabel, { children: "Load RefName alias" }), jsx("input", { type: "file", onChange: handleChangeFileHandler, ref: fileRef, disabled: (enableSubmit && !errorMessage) || !selectedAssembly })] })] }), selectedAssembly && refNameAliasMap.size > 0 ? (jsxs("div", { style: { height: 200, width: '100%', marginTop: 20 }, children: [jsx(InputLabel, { children: "Refname aliases found for selected assembly." }), jsx(DataGrid, { rows: getTableRows(), columns: columns, initialState: {
+                                    pagination: {
+                                        paginationModel: { page: 0, pageSize: 5 },
+                                    },
+                                }, pageSizeOptions: [5, 10], onRowSelectionModelChange: rowSelectionChange, processRowUpdate: processRowUpdate, checkboxSelection: true, disableRowSelectionExcludeModel: true })] })) : null] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: !enableSubmit, onClick: handleSubmit, children: "Submit" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function ViewCheckResults({ handleClose, session, }) {
     const { internetAccounts } = getRoot(session);
     const { collaborationServerDriver } = session.apolloDataStore;
@@ -4930,20 +4645,12 @@ function ViewCheckResults({ handleClose, session, }) {
         const newAssembly = assemblies.find((asm) => asm.name === e.target.value);
         setSelectedAssembly(newAssembly);
     }
-    return (React.createElement(Dialog, { open: true, fullScreen: true, title: "View check results", handleClose: handleClose, "data-testid": "view-check-results" },
-        React.createElement(Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React.createElement(MenuItem, { key: option.name, value: option.name }, option.displayName)))),
-        React.createElement(DialogContent, null,
-            React.createElement(DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: GridToolbar }, initialState: {
-                    sorting: { sortModel: [{ field: 'name', sort: 'asc' }] },
-                    columns: { columnVisibilityModel: { name: true } },
-                } })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Close")),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, fullScreen: true, title: "View check results", handleClose: handleClose, "data-testid": "view-check-results", children: [jsx(Select, { style: { width: 200, marginLeft: 40 }, value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsx(MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsx(DialogContent, { children: jsx(DataGrid, { pagination: true, rows: displayGridData, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: GridToolbar }, initialState: {
+                        sorting: { sortModel: [{ field: 'name', sort: 'asc' }] },
+                        columns: { columnVisibilityModel: { name: true } },
+                    } }) }), jsx(DialogActions, { children: jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 function exonIsSplittable(exonToBeSplit) {
     if (exonToBeSplit.max - exonToBeSplit.min < 2) {
         return {
@@ -4990,15 +4697,61 @@ function SplitExon({ changeManager, handleClose, selectedFeature, setSelectedFea
         handleClose();
         event.preventDefault();
     }
-    return (React.createElement(Dialog, { open: true, title: "Split exon", handleClose: handleClose, maxWidth: false, "data-testid": "split-exon" },
-        React.createElement("form", { onSubmit: onSubmit },
-            React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(DialogContentText, null, makeDialogText(exonToBeSplit))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", type: "submit", disabled: !exonIsSplittable(exonToBeSplit).isSplittable }, "Yes"),
-                React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Split exon", handleClose: handleClose, maxWidth: false, "data-testid": "split-exon", children: [jsxs("form", { onSubmit: onSubmit, children: [jsx(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsx(DialogContentText, { children: makeDialogText(exonToBeSplit) }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: !exonIsSplittable(exonToBeSplit).isSplittable, children: "Yes" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
+}
+
+function DuplicateTranscript({ changeManager, handleClose, session, sourceAssemblyId, sourceFeature, setSelectedFeature, }) {
+    const [errorMessage, setErrorMessage] = 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 = 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 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 (jsxs(Dialog, { open: true, title: "Duplicate transcript", handleClose: handleClose, maxWidth: false, "data-testid": "duplicate-transcript", children: [jsxs("form", { onSubmit: (event) => {
+                    void onSubmit(event);
+                }, children: [jsx(DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: jsx(DialogContentText, { children: "Are you sure you want to create a duplicate of this transcript?" }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", children: "Yes" }), jsx(Button, { variant: "outlined", type: "button", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function addTopLevelAdminMenus(rootModel) {
@@ -5123,20 +4876,12 @@ function addTopLevelAdminMenus(rootModel) {
 // Icon source: https://developers.google.com/identity/branding-guidelines
 function Google(props) {
     const { color } = props;
-    return (React.createElement(SvgIcon, { viewBox: "0 0 18 18", style: { fontSize: 18, marginRight: 4 }, ...props }, color === 'disabled' ? (React.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.createElement(React.Fragment, null,
-        React.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.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.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.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 (jsx(SvgIcon, { viewBox: "0 0 18 18", style: { fontSize: 18, marginRight: 4 }, ...props, children: color === 'disabled' ? (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" })) : (jsxs(Fragment, { children: [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" }), 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" }), 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" }), 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.createElement(SvgIcon, { viewBox: "0 0 21 21", style: { fontSize: 21 }, ...props },
-        React.createElement("rect", { x: "1", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#F25022' }),
-        React.createElement("rect", { x: "1", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#00A4EF' }),
-        React.createElement("rect", { x: "11", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#939393' : '#7FBA00' }),
-        React.createElement("rect", { x: "11", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#B9B9B9' : '#FFB900' })));
+    return (jsxs(SvgIcon, { viewBox: "0 0 21 21", style: { fontSize: 21 }, ...props, children: [jsx("rect", { x: "1", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#F25022' }), jsx("rect", { x: "1", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#7B7B7B' : '#00A4EF' }), jsx("rect", { x: "11", y: "1", width: "9", height: "9", fill: color === 'disabled' ? '#939393' : '#7FBA00' }), jsx("rect", { x: "11", y: "11", width: "9", height: "9", fill: color === 'disabled' ? '#B9B9B9' : '#FFB900' })] }));
 }
 
 const useStyles$d = makeStyles()((theme) => ({
@@ -5153,19 +4898,18 @@ const useStyles$d = makeStyles()((theme) => ({
 function GoogleButton(props) {
     const { classes } = useStyles$d();
     const { disabled } = props;
-    return (React.createElement(Button, { className: classes.loginButton, variant: "outlined", startIcon: React.createElement(Google, { color: disabled ? 'disabled' : undefined }), ...props }, "Sign in with Google"));
+    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(Google, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Google" }));
 }
 function MicrosoftButton(props) {
     const { classes } = useStyles$d();
     const { disabled } = props;
-    return (React.createElement(Button, { className: classes.loginButton, variant: "outlined", startIcon: React.createElement(Microsoft, { color: disabled ? 'disabled' : undefined }), ...props }, "Sign in with Microsoft"));
+    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(Microsoft, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Microsoft" }));
 }
 function GuestButton(props) {
     const { classes } = useStyles$d();
-    return (React.createElement(Button, { className: classes.loginButton, variant: "outlined", startIcon: React.createElement(AccountCircleIcon, { fontSize: "small" }), ...props }, "Continue as Guest"));
+    return (jsx(Button, { className: classes.loginButton, variant: "outlined", startIcon: jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: "Continue as Guest" }));
 }
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
 const useStyles$c = makeStyles()((theme) => ({
     divider: {
         marginTop: theme.spacing(4),
@@ -5196,7 +4940,7 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
             }
         });
         return () => {
-            controller.abort('AuthTypeSelector');
+            controller.abort(new DOMException('Error retrieving valid authentication types', 'AbortError'));
         };
     }, [baseURL]);
     function handleClick(authType) {
@@ -5213,28 +4957,24 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
     const allowGoogle = loginTypes.includes('google');
     const allowMicrosoft = loginTypes.includes('microsoft');
     const allowGuest = loginTypes.includes('guest');
-    return (React.createElement(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo" },
-        React.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 } },
-            allowGoogle ? (React.createElement(GoogleButton, { disabled: !allowGoogle, onClick: () => {
-                    handleClick('google');
-                } })) : null,
-            allowMicrosoft ? (React.createElement(MicrosoftButton, { disabled: !allowMicrosoft, onClick: () => {
-                    handleClick('microsoft');
-                } })) : null,
-            allowGuest ? (React.createElement(React.Fragment, null,
-                React.createElement(Divider, { className: classes.divider }),
-                React.createElement(GuestButton, { onClick: () => {
-                        handleClick('guest');
-                    } }))) : null),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "outlined", type: "submit", onClick: () => {
-                    handleClose();
-                } }, "Cancel")),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsxs(DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: [allowGoogle ? (jsx(GoogleButton, { disabled: !allowGoogle, onClick: () => {
+                            handleClick('google');
+                        } })) : null, allowMicrosoft ? (jsx(MicrosoftButton, { disabled: !allowMicrosoft, onClick: () => {
+                            handleClick('microsoft');
+                        } })) : null, allowGuest ? (jsxs(Fragment, { children: [jsx(Divider, { className: classes.divider }), jsx(GuestButton, { onClick: () => {
+                                    handleClick('guest');
+                                } })] })) : null] }), jsx(DialogActions, { children: jsx(Button, { variant: "outlined", type: "submit", onClick: () => {
+                        handleClose();
+                    }, children: "Cancel" }) }), errorMessage ? (jsx(DialogContent, { children: jsx(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 InternetAccount.named('ApolloInternetAccount')
@@ -5287,7 +5027,6 @@ const stateModelFactory$3 = (configSchema) => {
             },
             finishOAuthWindow(event, resolve, reject) {
                 if (event.data.name !== `JBrowseAuthWindow-${self.internetAccountId}`) {
-                    this.deleteMessageChannel();
                     return;
                 }
                 const redirectUriWithInfo = event.data.redirectUri;
@@ -5646,7 +5385,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();
         },
     }));
@@ -5730,6 +5469,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 &&
@@ -5890,6 +5633,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 {
     get baseURL() {
         return readConfObject(this.config, 'baseURL').uri;
@@ -5902,11 +5662,13 @@ class ApolloTextSearchAdapter extends BaseAdapter {
     }
     mapBaseResult(features, assembly, query) {
         return features.map((feature) => {
+            const matchedObject = getMatchedFeature(query, feature) ?? feature;
             const refName = assembly.getCanonicalRefName(feature.refSeq);
             return new BaseResult({
                 label: query,
                 trackId: this.trackId,
-                locString: `${refName}:${feature.min + 1}..${feature.max}`,
+                locString: `${refName}:${matchedObject.min + 1}..${matchedObject.max}`,
+                matchedObject,
             });
         });
     }
@@ -5988,10 +5750,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.createElement("div", { style: { display: 'flex' } },
-        React.createElement(Typography, { className: classes.attributeKey }, displayKey),
-        titleText ? (React.createElement(Tooltip, { title: titleText },
-            React.createElement(Chip, { icon: React.createElement(InfoIcon, null), label: "GFF3", size: "small", variant: "outlined" }))) : null));
+    return (jsxs("div", { style: { display: 'flex' }, children: [jsx(Typography, { className: classes.attributeKey, children: displayKey }), titleText ? (jsx(Tooltip, { title: titleText, children: jsx(Chip, { icon: jsx(InfoIcon, {}), label: "GFF3", size: "small", variant: "outlined" }) })) : null] }));
 }
 
 const customKeyName = 'Custom';
@@ -6022,22 +5781,13 @@ const AttributeKeySelector = observer(function AttributeKeySelector({ setKey, se
     function handleCancel() {
         setKey();
     }
-    return (React.createElement("form", { onSubmit: handleSubmit },
-        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', margin: 8 } },
-            React.createElement(FormControl, { variant: "outlined" },
-                React.createElement(InputLabel, { id: "attribute-key-select-label" }, "Key"),
-                React.createElement(Select, { labelId: "attribute-key-select-label", value: selectedKey, label: "Key", onChange: (event) => {
-                        setSelectedKey(event.target.value);
-                    } }, Object.keys(reservedKeys).map((val) => (React.createElement(MenuItem, { key: val, value: val }, val))))),
-            isCustom ? (React.createElement(TextField, { label: "Attribute key", variant: "outlined", id: "attributeKey", onChange: (event) => {
-                    setCustomKey(event.target.value);
-                } })) : null),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { color: "primary", variant: "contained", type: "submit", disabled: isCustom && !customKey }, "Add"),
-            React.createElement(Button, { variant: "outlined", onClick: handleCancel }, "Cancel"))));
+    return (jsxs("form", { onSubmit: handleSubmit, children: [jsxs("div", { style: { display: 'flex', flexDirection: 'column', margin: 8 }, children: [jsxs(FormControl, { variant: "outlined", children: [jsx(InputLabel, { id: "attribute-key-select-label", children: "Key" }), jsx(Select, { labelId: "attribute-key-select-label", value: selectedKey, label: "Key", onChange: (event) => {
+                                    setSelectedKey(event.target.value);
+                                }, children: Object.keys(reservedKeys).map((val) => (jsx(MenuItem, { value: val, children: val }, val))) })] }), isCustom ? (jsx(TextField, { label: "Attribute key", variant: "outlined", id: "attributeKey", onChange: (event) => {
+                            setCustomKey(event.target.value);
+                        } })) : null] }), jsxs(DialogActions, { children: [jsx(Button, { color: "primary", variant: "contained", type: "submit", disabled: isCustom && !customKey, children: "Add" }), jsx(Button, { variant: "outlined", onClick: handleCancel, children: "Cancel" })] })] }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const StringTextField = observer(function StringTextField({ onChangeCommitted, value: initialValue, ...props }) {
     const [value, setValue] = useState(String(initialValue));
     const [blur, setBlur] = useState(false);
@@ -6054,7 +5804,7 @@ const StringTextField = observer(function StringTextField({ onChangeCommitted, v
     function onChange(event) {
         setValue(event.target.value);
     }
-    return (React.createElement(TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
+    return (jsx(TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
             if (event.key === 'Enter') {
                 inputNode?.blur();
             }
@@ -6094,28 +5844,19 @@ const DefaultAttributeEditor = observer(function DefaultAttributeEditor({ attrib
             return newValues;
         });
     }
-    return (React.createElement(React.Fragment, null,
-        newValues.map((value, idx) => (React.createElement("div", { key: `${idx}-${value}`, style: { display: 'flex' } },
-            React.createElement(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
-                    updateValue(idx, editedValue);
-                }, variant: "outlined", fullWidth: true }),
-            React.createElement(IconButton, { "aria-label": "delete", size: "medium", edge: "end", onClick: () => {
-                    deleteValue(idx);
-                } },
-                React.createElement(DeleteIcon, { fontSize: "inherit" }))))),
-        React.createElement(IconButton, { "aria-label": "add", size: "medium", color: "secondary", edge: "start", onClick: addValue },
-            React.createElement(AddBoxIcon, { fontSize: "inherit" })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { color: "primary", variant: "contained", onClick: () => {
-                    setAttribute(newValues.filter(Boolean));
-                } }, isNew ? 'Add' : 'Update'),
-            React.createElement(Button, { variant: "outlined", type: "submit", onClick: () => {
-                    setAttribute();
-                } }, "Cancel"))));
+    return (jsxs(Fragment, { children: [newValues.map((value, idx) => (jsxs("div", { style: { display: 'flex' }, children: [jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
+                            updateValue(idx, editedValue);
+                        }, variant: "outlined", fullWidth: true }), jsx(IconButton, { "aria-label": "delete", size: "medium", edge: "end", onClick: () => {
+                            deleteValue(idx);
+                        }, children: jsx(DeleteIcon, { fontSize: "inherit" }) })] }, `${idx}-${value}`))), jsx(IconButton, { "aria-label": "add", size: "medium", color: "secondary", edge: "start", onClick: addValue, children: jsx(AddBoxIcon, { fontSize: "inherit" }) }), jsxs(DialogActions, { children: [jsx(Button, { color: "primary", variant: "contained", onClick: () => {
+                            setAttribute(newValues.filter(Boolean));
+                        }, children: isNew ? 'Add' : 'Update' }), jsx(Button, { variant: "outlined", type: "submit", onClick: () => {
+                            setAttribute();
+                        }, children: "Cancel" })] })] }));
 });
 
 function DefaultAttributeViewer({ values }) {
-    return (React.createElement(React.Fragment, null, values?.map((value, idx) => (React.createElement(Typography, { key: `${idx}.${value}`, variant: "body2", color: "textSecondary" }, value)))));
+    return (jsx(Fragment, { children: values?.map((value, idx) => (jsx(Typography, { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
 }
 
 const useStyles$a = makeStyles()((theme) => ({
@@ -6214,49 +5955,30 @@ const Attributes = observer(function Attributes({ assembly, editable, feature, s
         void changeManager.submit(change);
     }
     const NewKeyAttributeEditor = pluginManager.evaluateExtensionPoint('Apollo-AttributeEditorComponent', DefaultAttributeEditor, { key: newKey });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(List, { className: classes.list },
-            entries(attributes).map(([key, values]) => {
-                const AttributeEditor = pluginManager.evaluateExtensionPoint('Apollo-AttributeEditorComponent', DefaultAttributeEditor, { key });
-                const AttributeViewer = pluginManager.evaluateExtensionPoint('Apollo-AttributeViewerComponent', DefaultAttributeViewer, { key });
-                return (React.createElement(ListItem, { key: key, secondaryAction: editable && !editingKey ? (React.createElement(IconButton, { edge: "end", onClick: (event) => {
-                            handleListMenuClick(event, key);
-                        } },
-                        React.createElement(MoreHorizIcon, null))) : null },
-                    React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(AttributeKey, { attributeKey: key }), secondary: editingKey === key ? (React.createElement(AttributeEditor, { session: session, attributeValues: values, setAttribute: (newValues) => {
-                                setEditingKey(null);
-                                if (newValues) {
-                                    modifyFeatureAttribute(key, newValues);
-                                }
-                            } })) : (React.createElement(AttributeViewer, { values: values })) })));
-            }),
-            newKey ? (React.createElement(ListItem, null,
-                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(AttributeKey, { attributeKey: newKey }), secondary: React.createElement(NewKeyAttributeEditor, { session: session, attributeValues: [], setAttribute: (newValues) => {
-                            if (newValues) {
-                                addFeatureAttribute(newKey, newValues);
-                            }
-                            setNewKey(undefined);
-                        }, isNew: true }) }))) : null),
-        editable ? (React.createElement(Button, { color: "primary", variant: "contained", disabled: showAddNewForm || Boolean(newKey), onClick: () => {
-                setShowAddNewForm(true);
-            } }, "Add new")) : null,
-        showAddNewForm ? (React.createElement(Paper, { variant: "outlined", style: { marginTop: 8 } },
-            React.createElement(AttributeKeySelector, { session: session, setKey: (newKey) => {
-                    setNewKey(newKey);
-                    setShowAddNewForm(false);
-                } }))) : null,
-        React.createElement(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose },
-            React.createElement(MenuItem, { onClick: handleDelete },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(DeleteIcon, { fontSize: "small" })),
-                React.createElement(Typography, { variant: "inherit" }, "Delete")),
-            React.createElement(MenuItem, { onClick: handleEdit },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(EditIcon, { fontSize: "small" })),
-                React.createElement(Typography, { variant: "inherit" }, "Edit")))));
+    return (jsxs(Fragment, { children: [jsxs(List, { className: classes.list, children: [entries(attributes).map(([key, values]) => {
+                        const AttributeEditor = pluginManager.evaluateExtensionPoint('Apollo-AttributeEditorComponent', DefaultAttributeEditor, { key });
+                        const AttributeViewer = pluginManager.evaluateExtensionPoint('Apollo-AttributeViewerComponent', DefaultAttributeViewer, { key });
+                        return (jsx(ListItem, { secondaryAction: editable && !editingKey ? (jsx(IconButton, { edge: "end", onClick: (event) => {
+                                    handleListMenuClick(event, key);
+                                }, children: jsx(MoreHorizIcon, {}) })) : null, children: jsx(ListItemText, { disableTypography: true, primary: jsx(AttributeKey, { attributeKey: key }), secondary: editingKey === key ? (jsx(AttributeEditor, { session: session, attributeValues: values, setAttribute: (newValues) => {
+                                        setEditingKey(null);
+                                        if (newValues) {
+                                            modifyFeatureAttribute(key, newValues);
+                                        }
+                                    } })) : (jsx(AttributeViewer, { values: values })) }) }, key));
+                    }), newKey ? (jsx(ListItem, { children: jsx(ListItemText, { disableTypography: true, primary: jsx(AttributeKey, { attributeKey: newKey }), secondary: jsx(NewKeyAttributeEditor, { session: session, attributeValues: [], setAttribute: (newValues) => {
+                                    if (newValues) {
+                                        addFeatureAttribute(newKey, newValues);
+                                    }
+                                    setNewKey(undefined);
+                                }, isNew: true }) }) })) : null] }), editable ? (jsx(Button, { color: "primary", variant: "contained", disabled: showAddNewForm || Boolean(newKey), onClick: () => {
+                    setShowAddNewForm(true);
+                }, children: "Add new" })) : null, showAddNewForm ? (jsx(Paper, { variant: "outlined", style: { marginTop: 8 }, children: jsx(AttributeKeySelector, { session: session, setKey: (newKey) => {
+                        setNewKey(newKey);
+                        setShowAddNewForm(false);
+                    } }) })) : null, jsxs(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, children: [jsxs(MenuItem, { onClick: handleDelete, children: [jsx(ListItemIcon, { children: jsx(DeleteIcon, { fontSize: "small" }) }), jsx(Typography, { variant: "inherit", children: "Delete" })] }), jsxs(MenuItem, { onClick: handleEdit, children: [jsx(ListItemIcon, { children: jsx(EditIcon, { fontSize: "small" }) }), jsx(Typography, { variant: "inherit", children: "Edit" })] })] })] }));
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const NumberTextField = observer(function NumberTextField({ onChangeCommitted, value: initialValue, ...props }) {
     const [value, setValue] = useState(String(initialValue));
     const [blur, setBlur] = useState(false);
@@ -6274,7 +5996,7 @@ const NumberTextField = observer(function NumberTextField({ onChangeCommitted, v
         setValue(event.target.value);
     }
     const error = Number.isNaN(Number(value));
-    return (React.createElement(TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
+    return (jsx(TextField, { ...props, type: "text", onChange: onChange, value: value, onKeyDown: (event) => {
             if (event.key === 'Enter') {
                 inputNode?.blur();
             }
@@ -6367,24 +6089,11 @@ const BasicInformation = observer(function BasicInformation({ assembly, feature,
         }
         return terms;
     }
-    return (React.createElement("div", { "data-testid": "basic_information" },
-        React.createElement(NumberTextField, { margin: "dense", id: "start", label: "Start", fullWidth: true, variant: "outlined", value: min + 1, onChangeCommitted: handleStartChange }),
-        React.createElement(NumberTextField, { margin: "dense", id: "end", label: "End", fullWidth: true, variant: "outlined", value: max, onChangeCommitted: handleEndChange }),
-        React.createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, feature), renderInput: (params) => (React.createElement(TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
-                if (newValue) {
-                    handleTypeChange(newValue).catch(notifyError);
-                }
-            } }),
-        React.createElement("label", null,
-            React.createElement("input", { type: "radio", value: "1", checked: strand === 1, onChange: handleStrandChange }),
-            "Positive Strand (+)"),
-        React.createElement("label", null,
-            React.createElement("input", { type: "radio", value: "-1", checked: strand === -1, onChange: handleStrandChange }),
-            "Negative Strand (-)"),
-        React.createElement("label", null,
-            React.createElement("input", { type: "radio", value: "", checked: strand === undefined, onChange: handleStrandChange }),
-            "No Strand Information"),
-        errorMessage ? (React.createElement(Typography, { color: "error" }, errorMessage)) : null));
+    return (jsxs("div", { "data-testid": "basic_information", children: [jsx(NumberTextField, { margin: "dense", id: "start", label: "Start", fullWidth: true, variant: "outlined", value: min + 1, onChangeCommitted: handleStartChange }), jsx(NumberTextField, { margin: "dense", id: "end", label: "End", fullWidth: true, variant: "outlined", value: max, onChangeCommitted: handleEndChange }), jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, feature), renderInput: (params) => (jsx(TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
+                    if (newValue) {
+                        handleTypeChange(newValue).catch(notifyError);
+                    }
+                } }), jsxs("label", { children: [jsx("input", { type: "radio", value: "1", checked: strand === 1, onChange: handleStrandChange }), "Positive Strand (+)"] }), jsxs("label", { children: [jsx("input", { type: "radio", value: "-1", checked: strand === -1, onChange: handleStrandChange }), "Negative Strand (-)"] }), jsxs("label", { children: [jsx("input", { type: "radio", value: "", checked: strand === undefined, onChange: handleStrandChange }), "No Strand Information"] }), errorMessage ? (jsx(Typography, { color: "error", children: errorMessage })) : null] }));
 });
 
 const FeatureDetailsNavigation = observer(function FeatureDetailsNavigation(props) {
@@ -6399,39 +6108,16 @@ const FeatureDetailsNavigation = observer(function FeatureDetailsNavigation(prop
     if (!(parent ?? childFeatures.length > 0)) {
         return null;
     }
-    return (React.createElement("div", { style: { marginTop: 10 } },
-        parent && (React.createElement("div", null,
-            React.createElement(Typography, { variant: "h6" }, "Parent:"),
-            React.createElement(Button, { variant: "contained", onClick: () => {
-                    model.setFeature(parent);
-                } },
-                parent.type,
-                getFeatureNameOrId$1(parent),
-                " (",
-                parent.min,
-                "..",
-                parent.max,
-                ")"))),
-        childFeatures.length > 0 && (React.createElement("div", null,
-            React.createElement(Typography, { variant: "h6" },
-                childFeatures.length === 1 ? 'Child' : 'Children',
-                ":"),
-            childFeatures.map((child) => (React.createElement("div", { key: child._id, style: { marginBottom: 5 } },
-                React.createElement(Button, { variant: "contained", onClick: () => {
-                        model.setFeature(child);
-                    } },
-                    child.type,
-                    getFeatureNameOrId$1(child),
-                    " (",
-                    child.min,
-                    "..",
-                    child.max,
-                    ")"))))))));
+    return (jsxs("div", { style: { marginTop: 10 }, children: [parent && (jsxs("div", { children: [jsx(Typography, { variant: "h6", children: "Parent:" }), jsxs(Button, { variant: "contained", onClick: () => {
+                            model.setFeature(parent);
+                        }, children: [parent.type, getFeatureNameOrId$1(parent), " (", parent.min, "..", parent.max, ")"] })] })), childFeatures.length > 0 && (jsxs("div", { children: [jsxs(Typography, { variant: "h6", children: [childFeatures.length === 1 ? 'Child' : 'Children', ":"] }), childFeatures.map((child) => (jsx("div", { style: { marginBottom: 5 }, children: jsxs(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 : splitStringIntoChunks(seq, wrap).join('\n');
+    const body = seq ;
     return `${header}${body}`;
 }
 const useStyles$9 = makeStyles()({
@@ -6460,8 +6146,7 @@ const Sequence = observer(function Sequence({ assembly, feature, refName, sessio
             { assemblyName: assembly, refName, start: min, end: max },
         ]);
     }
-    return (React.createElement("div", null,
-        React.createElement("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence })));
+    return (jsx("div", { children: jsx("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence }) }));
 });
 
 const useStyles$8 = makeStyles()((theme) => ({
@@ -6501,31 +6186,17 @@ const ApolloFeatureDetailsWidget = observer(function ApolloFeatureDetailsWidget(
             setPanelState(panelState.filter((p) => p !== panel));
         }
     }
-    return (React.createElement("div", { className: classes.root },
-        React.createElement(BasicInformation, { feature: feature, session: session, assembly: currentAssembly._id }),
-        React.createElement(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('attributes'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'attributes');
-            } },
-            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
-                React.createElement(Typography, { component: "span" }, "Attributes")),
-            React.createElement(AccordionDetails, null,
-                React.createElement(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }))),
-        React.createElement(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'sequence');
-            } },
-            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header" },
-                React.createElement(Typography, { component: "span" }, "Sequence")),
-            React.createElement(AccordionDetails, null, panelState.includes('sequence') && (React.createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName })))),
-        React.createElement(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('related_features'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'related_features');
-            } },
-            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header" },
-                React.createElement(Typography, { component: "span" }, "Related features")),
-            React.createElement(AccordionDetails, null,
-                React.createElement(FeatureDetailsNavigation, { model: model, feature: feature })))));
+    return (jsxs("div", { className: classes.root, children: [jsx(BasicInformation, { feature: feature, session: session, assembly: currentAssembly._id }), jsxs(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('attributes'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'attributes');
+                }, children: [jsx(AccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsx(Typography, { component: "span", children: "Attributes" }) }), jsx(AccordionDetails, { children: jsx(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }) })] }), jsxs(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'sequence');
+                }, children: [jsx(AccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header", children: jsx(Typography, { component: "span", children: "Sequence" }) }), jsx(AccordionDetails, { children: panelState.includes('sequence') && (jsx(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName })) })] }), jsxs(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('related_features'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'related_features');
+                }, children: [jsx(AccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header", children: jsx(Typography, { component: "span", children: "Related features" }) }), jsx(AccordionDetails, { children: jsx(FeatureDetailsNavigation, { model: model, feature: feature }) })] })] }));
 });
 
 /* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 const ApolloFeatureDetailsWidgetModel = types
     .model('ApolloFeatureDetailsWidget', {
     id: ElementId,
@@ -6835,38 +6506,24 @@ const TranscriptSequence = observer(function TranscriptSequence({ assembly, feat
                 segment.sequence.slice(0, sequenceWrapLength - lastLineLength);
             const remainingLines = splitStringIntoChunks(segment.sequence.slice(firstLine.length), sequenceWrapLength);
             const printLines = [firstLine, ...remainingLines];
-            const span = (React.createElement("span", { key: `${segment.type}-${index}`, style: {
+            const span = (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.createElement(React.Fragment, null,
-        React.createElement(Select, { defaultValue: "genomic", value: selectedOption, onChange: handleChangeSeqOption, size: "small", "data-testid": "sequenceOptionSelector" }, sequenceOptions.map((option) => (React.createElement(MenuItem, { key: option, value: option, "data-testid": `sequenceOption-${option}` }, option)))),
-        React.createElement(Button, { variant: "contained", onClick: onCopyClick, style: { marginLeft: 10 }, size: "medium" }, "Copy sequence"),
-        React.createElement(Paper, { style: {
-                fontFamily: 'monospace',
-                padding: theme.spacing(),
-                overflowX: 'auto',
-            }, ref: seqRef },
-            ">",
-            refSeq.name,
-            ":",
-            locationIntervals
-                .map((interval) => feature.strand === 1
-                ? `${interval.min + 1}-${interval.max}`
-                : `${interval.max}-${interval.min + 1}`)
-                .join(';'),
-            "(strand=",
-            feature.strand === 1 ? '+' : '-',
-            ";length=",
-            getSequenceLength(sequenceSegments),
-            ")",
-            React.createElement("br", null),
-            wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH))));
+    return (jsxs(Fragment, { children: [jsx(Select, { defaultValue: "genomic", value: selectedOption, onChange: handleChangeSeqOption, size: "small", "data-testid": "sequenceOptionSelector", children: sequenceOptions.map((option) => (jsx(MenuItem, { value: option, "data-testid": `sequenceOption-${option}`, children: option }, option))) }), jsx(Button, { variant: "contained", onClick: onCopyClick, style: { marginLeft: 10 }, size: "medium", children: "Copy sequence" }), jsxs(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), ")", jsx("br", {}), wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH)] })] }));
 });
 
 const StyledTextField = styled(NumberTextField)(() => ({
@@ -6897,7 +6554,7 @@ const SequenceContainer = styled('div')({
 });
 const Strand = (props) => {
     const { strand } = props;
-    return (React.createElement("div", null, strand === 1 ? (React.createElement(AddIcon, null)) : strand === -1 ? (React.createElement(RemoveIcon, null)) : (React.createElement(Typography, { component: 'span' }, "N/A"))));
+    return (jsx("div", { children: strand === 1 ? (jsx(AddIcon, {})) : strand === -1 ? (jsx(RemoveIcon, {})) : (jsx(Typography, { component: 'span', children: "N/A" })) }));
 };
 const minMaxExonTranscriptLocation = (transcript, featureTypeOntology) => {
     const { transcriptExonParts } = transcript;
@@ -7361,11 +7018,11 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
             const protein = defaultCodonTable[codonSeq] || '&';
             // highlight start codon and stop codons
             if (codonSeq === 'ATG') {
-                elements.push(React.createElement(Typography, { component: 'span', style: {
+                elements.push(jsx(Typography, { component: 'span', style: {
                         backgroundColor: changeInProgress ? 'lightgray' : 'yellow',
                         cursor: 'pointer',
                         border: '1px solid black',
-                    }, key: codonGenomicPos, onClick: () => {
+                    }, onClick: () => {
                         if (changeInProgress) {
                             return;
                         }
@@ -7379,17 +7036,15 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
                         if (startCodonGenomicLocation !== cdsMax && strand === -1) {
                             updateCDSLocation(cdsMax, startCodonGenomicLocation, feature, false);
                         }
-                    } }, protein));
+                    }, children: protein }, codonGenomicPos));
             }
             else if (['TAA', 'TAG', 'TGA'].includes(codonSeq)) {
-                elements.push(React.createElement(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(jsx(Typography, { style: { backgroundColor: 'red', color: 'white' }, component: 'span', children: protein }, codonGenomicPos));
             }
             else {
                 elements.push(
                 // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
-                React.createElement(Typography, { component: 'span', key: codonGenomicPos }, protein));
+                jsx(Typography, { component: 'span', children: protein }, codonGenomicPos));
             }
         }
         return elements;
@@ -7520,69 +7175,33 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
         }
         void copyToClipboard(seqDiv);
     };
-    return (React.createElement("div", null,
-        cdsPresent && (React.createElement("div", null,
-            React.createElement(Accordion, null,
-                React.createElement(StyledAccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
-                    React.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Translation")),
-                React.createElement(AccordionDetails, null,
-                    React.createElement(SequenceContainer, null,
-                        React.createElement(Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' } }, getTranslationSequence())),
-                    React.createElement("div", { style: {
-                            marginTop: 10,
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 10,
-                        } },
-                        React.createElement(Tooltip, { title: "Copy" },
-                            React.createElement("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
-                                React.createElement(ContentCopyIcon, { style: { fontSize: 15 } }))),
-                        React.createElement(Tooltip, { title: "Trim" },
-                            React.createElement("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
-                                React.createElement(ContentCutIcon, { style: { fontSize: 15 } })))))),
-            React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 } },
-                React.createElement(Grid, { size: 1 }),
-                strand === 1 ? (React.createElement(Grid, { size: 4 },
-                    React.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.createElement(Grid, { size: 4 },
-                    React.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.createElement(Grid, { size: 2 },
-                    React.createElement(Typography, { component: 'span' }, "CDS")),
-                strand === 1 ? (React.createElement(Grid, { size: 4 },
-                    React.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.createElement(Grid, { size: 4 },
-                    React.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.createElement(Grid, { size: 1 })))),
-        React.createElement("div", { style: { marginTop: 5 } }, transcriptExonParts.map((loc, index) => {
-            return (React.createElement("div", { key: index }, loc.type === 'exon' && (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' } },
-                React.createElement(Grid, { size: 1 }, index !== 0 &&
-                    getFivePrimeSpliceSite(loc, index).map((site, idx) => (React.createElement(Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite)))),
-                strand === 1 ? (React.createElement(Grid, { size: 4, style: { padding: 0 } },
-                    React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        }, disabled: changeInProgress }))) : (React.createElement(Grid, { size: 4, style: { padding: 0 } },
-                    React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        }, disabled: changeInProgress }))),
-                React.createElement(Grid, { size: 2 },
-                    React.createElement(Strand, { strand: feature.strand })),
-                strand === 1 ? (React.createElement(Grid, { size: 4, style: { padding: 0 } },
-                    React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        }, disabled: changeInProgress }))) : (React.createElement(Grid, { size: 4, style: { padding: 0 } },
-                    React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
-                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        }, disabled: changeInProgress }))),
-                React.createElement(Grid, { size: 1 }, index !== transcriptExonParts.length - 1 &&
-                    getThreePrimeSpliceSite(loc, index).map((site, idx) => (React.createElement(Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite))))))));
-        }))));
+    return (jsxs("div", { children: [cdsPresent && (jsxs("div", { children: [jsxs(Accordion, { children: [jsx(StyledAccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsx(Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxs(AccordionDetails, { children: [jsx(SequenceContainer, { children: jsx(Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: getTranslationSequence() }) }), jsxs("div", { style: {
+                                            marginTop: 10,
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: 10,
+                                        }, children: [jsx(Tooltip, { title: "Copy", children: jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsx(Tooltip, { title: "Trim", children: jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsx(ContentCutIcon, { style: { fontSize: 15 } }) }) })] })] })] }), jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 }, children: [jsx(Grid, { size: 1 }), strand === 1 ? (jsx(Grid, { size: 4, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
+                                        return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
+                                    }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsx(Grid, { size: 4, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
+                                        return updateCDSLocation(cdsMax, newLocation, feature, false);
+                                    }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })), jsx(Grid, { size: 2, children: jsx(Typography, { component: 'span', children: "CDS" }) }), strand === 1 ? (jsx(Grid, { size: 4, children: 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 }) })) : (jsx(Grid, { size: 4, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
+                                        return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
+                                    }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })), jsx(Grid, { size: 1 })] })] })), jsx("div", { style: { marginTop: 5 }, children: transcriptExonParts.map((loc, index) => {
+                    return (jsx("div", { children: loc.type === 'exon' && (jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsx(Grid, { size: 1, children: index !== 0 &&
+                                        getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsx(Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
+                                        }, disabled: changeInProgress }) })) : (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.max, newLocation, feature, false);
+                                        }, disabled: changeInProgress }) })), jsx(Grid, { size: 2, children: jsx(Strand, { strand: feature.strand }) }), strand === 1 ? (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.max, newLocation, feature, false);
+                                        }, disabled: changeInProgress }) })) : (jsx(Grid, { size: 4, style: { padding: 0 }, children: jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                                            return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
+                                        }, disabled: changeInProgress }) })), jsx(Grid, { size: 1, children: index !== transcriptExonParts.length - 1 &&
+                                        getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsx(Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
+                }) })] }));
 });
 
 const HeaderTableCell = styled(TableCell)(() => ({
@@ -7592,28 +7211,7 @@ const TranscriptWidgetSummary = observer(function TranscriptWidgetSummary(props)
     const { feature } = props;
     const name = getFeatureName$1(feature);
     const id = getFeatureId$1(feature);
-    return (React.createElement(Table, { size: "small", sx: { fontSize: '0.75rem', '& .MuiTableCell-root': { padding: '4px' } } },
-        React.createElement(TableBody, null,
-            name !== '' && (React.createElement(TableRow, null,
-                React.createElement(HeaderTableCell, null, "Name"),
-                React.createElement(TableCell, null, getFeatureName$1(feature)))),
-            id !== '' && (React.createElement(TableRow, null,
-                React.createElement(HeaderTableCell, null, "ID"),
-                React.createElement(TableCell, null, getFeatureId$1(feature)))),
-            React.createElement(TableRow, null,
-                React.createElement(HeaderTableCell, null, "Type"),
-                React.createElement(TableCell, null, feature.type)),
-            React.createElement(TableRow, null,
-                React.createElement(HeaderTableCell, null, "Location"),
-                React.createElement(TableCell, null,
-                    props.refName,
-                    ":",
-                    feature.min,
-                    "..",
-                    feature.max)),
-            React.createElement(TableRow, null,
-                React.createElement(HeaderTableCell, null, "Strand"),
-                React.createElement(TableCell, null, getStrand(feature.strand))))));
+    return (jsx(Table, { size: "small", sx: { fontSize: '0.75rem', '& .MuiTableCell-root': { padding: '4px' } }, children: jsxs(TableBody, { children: [name !== '' && (jsxs(TableRow, { children: [jsx(HeaderTableCell, { children: "Name" }), jsx(TableCell, { children: getFeatureName$1(feature) })] })), id !== '' && (jsxs(TableRow, { children: [jsx(HeaderTableCell, { children: "ID" }), jsx(TableCell, { children: getFeatureId$1(feature) })] })), jsxs(TableRow, { children: [jsx(HeaderTableCell, { children: "Type" }), jsx(TableCell, { children: feature.type })] }), jsxs(TableRow, { children: [jsx(HeaderTableCell, { children: "Location" }), jsxs(TableCell, { children: [props.refName, ":", feature.min, "..", feature.max] })] }), jsxs(TableRow, { children: [jsx(HeaderTableCell, { children: "Strand" }), jsx(TableCell, { children: getStrand(feature.strand) })] })] }) }));
 });
 
 const useStyles$7 = makeStyles()((theme) => ({
@@ -7680,48 +7278,15 @@ const ApolloTranscriptDetailsWidget = observer(function ApolloTranscriptDetails(
     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.createElement("div", { className: classes.root },
-        React.createElement(Accordion, { expanded: panelState.includes('summary'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'summary');
-            } },
-            React.createElement(StyledAccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
-                React.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Summary")),
-            React.createElement(AccordionDetails, null,
-                React.createElement(TranscriptWidgetSummary, { feature: feature, refName: refName }),
-                React.createElement(CustomComponentInsideSummary, { session: session, feature: feature }))),
-        React.createElement(CustomComponentAfterSummary, { session: session, feature: feature }),
-        React.createElement(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('location'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'location');
-            } },
-            React.createElement(StyledAccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header" },
-                React.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Location")),
-            React.createElement(AccordionDetails, null,
-                React.createElement(TranscriptWidgetEditLocation, { feature: feature, refName: refName, session: apolloSession, assembly: currentAssembly._id || '' }),
-                React.createElement(CustomComponentInsideLocation, { session: session, feature: feature }))),
-        React.createElement(CustomComponentAfterLocation, { session: session, feature: feature }),
-        React.createElement(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('attrs'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'attrs');
-            } },
-            React.createElement(StyledAccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header" },
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                    React.createElement(Typography, { component: "span", fontWeight: 'bold' },
-                        "Attributes",
-                        ' '),
-                    React.createElement(Tooltip, { title: "Separate multiple values for the attribute with commas" },
-                        React.createElement(InfoIcon, { style: { color: 'white', fontSize: 15, marginLeft: 10 } })))),
-            React.createElement(AccordionDetails, null,
-                React.createElement(Attributes, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', editable: editable }),
-                React.createElement(CustomComponentInsideAttributes, { session: session, feature: feature }))),
-        React.createElement(CustomComponentAfterAttributes, { session: session, feature: feature }),
-        React.createElement(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
-                handlePanelChange(expanded, 'sequence');
-            } },
-            React.createElement(StyledAccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel4-content", id: "panel4-header" },
-                React.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Sequence")),
-            React.createElement(AccordionDetails, null,
-                panelState.includes('sequence') && (React.createElement(TranscriptSequence, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName })),
-                React.createElement(CustomComponentInsideSequence, { session: session, feature: feature }))),
-        React.createElement(CustomComponentAfterSequence, { feature: feature, session: session })));
+    return (jsxs("div", { className: classes.root, children: [jsxs(Accordion, { expanded: panelState.includes('summary'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'summary');
+                }, children: [jsx(StyledAccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsx(Typography, { component: "span", fontWeight: 'bold', children: "Summary" }) }), jsxs(AccordionDetails, { children: [jsx(TranscriptWidgetSummary, { feature: feature, refName: refName }), jsx(CustomComponentInsideSummary, { session: session, feature: feature })] })] }), jsx(CustomComponentAfterSummary, { session: session, feature: feature }), jsxs(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('location'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'location');
+                }, children: [jsx(StyledAccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header", children: jsx(Typography, { component: "span", fontWeight: 'bold', children: "Location" }) }), jsxs(AccordionDetails, { children: [jsx(TranscriptWidgetEditLocation, { feature: feature, refName: refName, session: apolloSession, assembly: currentAssembly._id || '' }), jsx(CustomComponentInsideLocation, { session: session, feature: feature })] })] }), jsx(CustomComponentAfterLocation, { session: session, feature: feature }), jsxs(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('attrs'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'attrs');
+                }, children: [jsx(StyledAccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header", children: jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [jsxs(Typography, { component: "span", fontWeight: 'bold', children: ["Attributes", ' '] }), jsx(Tooltip, { title: "Separate multiple values for the attribute with commas", children: jsx(InfoIcon, { style: { color: 'white', fontSize: 15, marginLeft: 10 } }) })] }) }), jsxs(AccordionDetails, { children: [jsx(Attributes, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', editable: editable }), jsx(CustomComponentInsideAttributes, { session: session, feature: feature })] })] }), jsx(CustomComponentAfterAttributes, { session: session, feature: feature }), jsxs(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
+                    handlePanelChange(expanded, 'sequence');
+                }, children: [jsx(StyledAccordionSummary, { expandIcon: jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel4-content", id: "panel4-header", children: jsx(Typography, { component: "span", fontWeight: 'bold', children: "Sequence" }) }), jsxs(AccordionDetails, { children: [panelState.includes('sequence') && (jsx(TranscriptSequence, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName })), jsx(CustomComponentInsideSequence, { session: session, feature: feature })] })] }), jsx(CustomComponentAfterSequence, { feature: feature, session: session })] }));
 });
 
 const configSchema$2 = ConfigurationSchema('LinearApolloDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
@@ -7771,19 +7336,17 @@ const useStyles$6 = makeStyles()({
 const Highlight = ({ highlight, text, }) => {
     const { classes } = useStyles$6();
     if (!highlight) {
-        return React.createElement(React.Fragment, null, text);
+        return jsx(Fragment, { children: text });
     }
     const split = text.split(highlight);
     if (split.length === 1) {
-        return React.createElement(React.Fragment, null, text);
+        return jsx(Fragment, { children: text });
     }
     const highlighted = [];
     for (let i = 0; i < split.length - 1; i++) {
-        highlighted.push(split[i], React.createElement("span", { className: classes.highlighted }, highlight));
+        highlighted.push(split[i], jsx("span", { className: classes.highlighted, children: highlight }));
     }
-    return (React.createElement(React.Fragment, null,
-        highlighted,
-        split.at(-1)));
+    return (jsxs(Fragment, { children: [highlighted, split.at(-1)] }));
 };
 
 const FeatureAttributes = observer(function FeatureAttributes({ feature, filterText, }) {
@@ -7802,10 +7365,9 @@ const FeatureAttributes = observer(function FeatureAttributes({ feature, filterT
         .filter(([key]) => key) // Leave empty keys off
         .map(([key, values]) => `${key}=${Array.isArray(values) ? values.join(', ') : values}`)
         .join(', ');
-    return React.createElement(Highlight, { text: attrString, highlight: filterText });
+    return jsx(Highlight, { text: attrString, highlight: filterText });
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const useStyles$5 = makeStyles()((theme) => ({
     inputWrapper: {
         position: 'relative',
@@ -7846,23 +7408,21 @@ const NumberCell = observer(function NumberCell({ initialValue, notifyError, onC
             setValue(newValue);
         }
     }
-    return (React.createElement("span", { className: classes.inputWrapper },
-        React.createElement("span", { className: classes.hiddenWidthSpan, "aria-hidden": true }, value),
-        React.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 (jsxs("span", { className: classes.inputWrapper, children: [jsx("span", { className: classes.hiddenWidthSpan, "aria-hidden": true, children: value }), 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) {
@@ -8015,6 +7575,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',
@@ -8033,7 +7611,6 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
     return menuItems;
 }
 
-/* eslint-disable unicorn/no-nested-ternary */
 const useStyles$4 = makeStyles()((theme) => ({
     typeContent: {
         display: 'inline-block',
@@ -8089,70 +7666,55 @@ const Feature = observer(function Feature({ depth, feature, isHovered, isSelecte
     const notifyError = (e) => {
         session.notify(e.message, 'error');
     };
-    return (React.createElement(React.Fragment, null,
-        React.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.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.createElement("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : '') }, "\u276F")) : null,
-                React.createElement("div", { className: classes.typeContent },
-                    React.createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTypeTerms.bind(null, feature), renderInput: (params) => {
-                            return (React.createElement("div", { ref: params.InputProps.ref },
-                                React.createElement("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }),
-                                params.error ? (React.createElement("div", { className: classes.typeErrorMessage }, params.errorMessage ?? 'unknown error')) : null));
-                        }, onChange: (oldValue, newValue) => {
-                            if (newValue) {
-                                handleFeatureTypeChange(changeManager, feature, oldValue, newValue).catch(notifyError);
-                            }
-                        } }))),
-            React.createElement("td", null,
-                React.createElement(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) })),
-            React.createElement("td", null,
-                React.createElement(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) })),
-            React.createElement("td", null, strand === 1 ? '+' : strand === -1 ? '-' : undefined),
-            React.createElement("td", null,
-                React.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.createElement(Feature, { isHovered: childHovered, isSelected: childSelected, selectedFeatureClass: selectedFeatureClass, key: featureId, depth: (depth || 0) + 1, feature: childFeature, model: displayState, setContextMenu: setContextMenu }));
-            })
-            : null));
+    return (jsxs(Fragment, { children: [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: [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
+                            jsx("div", { onClick: toggleExpanded, className: classes.arrow + (expanded ? ` ${classes.arrowExpanded}` : ''), children: "\u276F" })) : null, jsx("div", { className: classes.typeContent, children: jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: 170 }, value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTypeTerms.bind(null, feature), renderInput: (params) => {
+                                        return (jsxs("div", { ref: params.InputProps.ref, children: [jsx("input", { type: "text", ...params.inputProps, className: classes.typeInputElement, style: { width: 170 } }), params.error ? (jsx("div", { className: classes.typeErrorMessage, children: params.errorMessage ?? 'unknown error' })) : null] }));
+                                    }, onChange: (oldValue, newValue) => {
+                                        if (newValue) {
+                                            handleFeatureTypeChange(changeManager, feature, oldValue, newValue).catch(notifyError);
+                                        }
+                                    } }) })] }), jsx("td", { children: jsx(NumberCell, { initialValue: min + 1, notifyError: notifyError, onChangeCommitted: (newStart) => handleFeatureStartChange(changeManager, feature, min, newStart - 1) }) }), jsx("td", { children: jsx(NumberCell, { initialValue: max, notifyError: notifyError, onChangeCommitted: (newEnd) => handleFeatureEndChange(changeManager, feature, max, newEnd) }) }), jsx("td", { children: strand === 1 ? '+' : strand === -1 ? '-' : undefined }), jsx("td", { children: 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 (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;
@@ -8211,48 +7773,37 @@ const HybridGrid = observer(function HybridGrid({ model, }) {
             }
         }
     }, [selectedFeature, seenFeatures, classes.selectedFeature]);
-    return (React.createElement("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' } },
-        React.createElement("table", { className: classes.scrollableTable },
-            React.createElement("thead", null,
-                React.createElement("tr", null,
-                    React.createElement("th", null, "Type"),
-                    React.createElement("th", null, "Start"),
-                    React.createElement("th", null, "End"),
-                    React.createElement("th", null, "Strand"),
-                    React.createElement("th", null, "Attributes"))),
-            React.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.createElement(Feature, { key: featureId, isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }));
-            }))),
-        React.createElement(Menu$1, { open: Boolean(contextMenu), onMenuItemClick: (_, callback) => {
-                callback();
-                setContextMenu(null);
-            }, onClose: () => {
-                setContextMenu(null);
-            }, slotProps: {
-                transition: {
-                    onExit: () => {
-                        setContextMenu(null);
+    return (jsxs("div", { ref: scrollContainerRef, style: { width: '100%', overflowY: 'auto', height: '100%' }, children: [jsxs("table", { className: classes.scrollableTable, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: "Type" }), jsx("th", { children: "Start" }), jsx("th", { children: "End" }), jsx("th", { children: "Strand" }), jsx("th", { children: "Attributes" })] }) }), 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 (jsx(Feature, { isSelected: isSelected, isHovered: isHovered, selectedFeatureClass: classes.selectedFeature, feature: feature, model: model, depth: 0, setContextMenu: setContextMenu }, featureId));
+                        }) })] }), jsx(Menu$1, { 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 = makeStyles()({
     toolbar: {
         width: '100%',
@@ -8268,21 +7819,15 @@ const useStyles$2 = makeStyles()({
 const ToolBar = observer(function ToolBar({ model: displayState, }) {
     const model = displayState.tabularEditor;
     const { classes } = useStyles$2();
-    return (React.createElement("div", { className: classes.toolbar },
-        React.createElement(Tooltip, { title: "Collapse all" },
-            React.createElement(IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures },
-                React.createElement(UnfoldLessIcon, null))),
-        React.createElement(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.createElement(InputAdornment, { position: "end" },
-                        React.createElement(IconButton, { onClick: () => {
-                                model.clearFilterText();
-                            } },
-                            React.createElement(ClearIcon, null)))),
-                },
-            } })));
+    return (jsxs("div", { className: classes.toolbar, children: [jsx(Tooltip, { title: "Collapse all", children: jsx(IconButton, { "aria-label": "collapse", sx: { marginTop: 0 }, onClick: model.collapseAllFeatures, children: jsx(UnfoldLessIcon, {}) }) }), jsx(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: (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { onClick: () => {
+                                    model.clearFilterText();
+                                }, children: jsx(ClearIcon, {}) }) })),
+                    },
+                } })] }));
 });
 
 function stopPropagation(e) {
@@ -8296,9 +7841,7 @@ const TabularEditorPane = observer(function TabularEditorPane({ model: displaySt
     return (
     // TODO: a11y
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React.createElement("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' } },
-        React.createElement(ToolBar, { model: displayState }),
-        React.createElement(HybridGrid, { model: displayState })));
+    jsxs("div", { onMouseDown: stopPropagation, onClick: stopPropagation, style: { width: '100%', height: '100%', position: 'relative' }, children: [jsx(ToolBar, { model: displayState }), jsx(HybridGrid, { model: displayState })] }));
 });
 
 const TabularEditorStateModelType = types
@@ -8652,10 +8195,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 = readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', { featureType: feature.type });
         if (!selectedColor) {
             selectedColor = alpha(theme.palette.background.paper, 0.6);
@@ -9246,6 +8786,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 (isSessionModelWithWidgets(session)) {
                     contextMenuItemsForFeature.splice(1, 0, {
@@ -9452,45 +9012,27 @@ const FilterFeatures = observer(function FilterFeatures({ featureTypes, handleCl
         onUpdate(newTypes);
         setSelectedFeatureTypes(newTypes);
     };
-    return (React.createElement(Dialog, { open: true, maxWidth: false, "data-testid": "filter-features-dialog", title: "Filter features by type", handleClose: handleClose },
-        React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, null, "Select the feature types you want to display in the apollo track"),
-            React.createElement(Grid, { container: true, spacing: 2 },
-                React.createElement(Grid, { size: 8 },
-                    React.createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: '100%' }, value: type, filterTerms: isOntologyClass, renderInput: (params) => (React.createElement(TextField, { ...params, label: "Feature type", variant: "outlined", fullWidth: true })), onChange: (oldValue, newValue) => {
-                            if (newValue) {
-                                handleChange(newValue);
-                            }
-                        } })),
-                React.createElement(Grid, { size: 4 },
-                    React.createElement(Button, { variant: "contained", onClick: handleAddFeatureType, disabled: !type, style: { marginTop: 9 }, size: "medium" }, "Add"))),
-            selectedFeatureTypes.length > 0 && (React.createElement("div", null,
-                React.createElement("hr", null),
-                React.createElement("div", { style: { width: 300 } },
-                    React.createElement(DialogContentText, null, "Selected feature types:"),
-                    React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, selectedFeatureTypes.map((value) => (React.createElement(Chip, { key: value, label: value, onDelete: () => {
-                            handleFeatureTypeDelete(value);
-                        } }))))))))));
+    return (jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-features-dialog", title: "Filter features by type", handleClose: handleClose, children: jsxs(DialogContent, { children: [jsx(DialogContentText, { children: "Select the feature types you want to display in the apollo track" }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 8, children: jsx(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", style: { width: '100%' }, value: type, filterTerms: isOntologyClass, renderInput: (params) => (jsx(TextField, { ...params, label: "Feature type", variant: "outlined", fullWidth: true })), onChange: (oldValue, newValue) => {
+                                    if (newValue) {
+                                        handleChange(newValue);
+                                    }
+                                } }) }), jsx(Grid, { size: 4, children: jsx(Button, { variant: "contained", onClick: handleAddFeatureType, disabled: !type, style: { marginTop: 9 }, size: "medium", children: "Add" }) })] }), selectedFeatureTypes.length > 0 && (jsxs("div", { children: [jsx("hr", {}), jsxs("div", { style: { width: 300 }, children: [jsx(DialogContentText, { children: "Selected feature types:" }), jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selectedFeatureTypes.map((value) => (jsx(Chip, { label: value, onDelete: () => {
+                                            handleFeatureTypeDelete(value);
+                                        } }, value))) })] })] }))] }) }));
 });
 
 const EditZoomThresholdDialog = observer(function ({ model, handleClose, }) {
     const [zoomThreshold, setZoomThreshold] = useState(`${model.zoomThresholdSetting}`);
-    return (React.createElement(Dialog$1, { open: true, onClose: handleClose, title: "Edit zoom threshold setting" },
-        React.createElement(DialogContent, null,
-            React.createElement(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.createElement(TextField, { label: "Threshold value (bpPerPx)", value: zoomThreshold, onChange: (event) => {
-                    setZoomThreshold(event.target.value);
-                } }),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", onClick: () => {
-                        model.setZoomThresholdSetting({
-                            zoomThreshold: +zoomThreshold,
-                        });
-                        handleClose();
-                    } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
+    return (jsx(Dialog$1, { open: true, onClose: handleClose, title: "Edit zoom threshold setting", children: jsxs(DialogContent, { children: [jsx(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." }), jsx(TextField, { label: "Threshold value (bpPerPx)", value: zoomThreshold, onChange: (event) => {
+                        setZoomThreshold(event.target.value);
+                    } }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", onClick: () => {
+                                model.setZoomThresholdSetting({
+                                    zoomThreshold: +zoomThreshold,
+                                });
+                                handleClose();
+                            }, children: "Submit" }), jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 
 const useStyles$1 = makeStyles()((theme) => ({
@@ -9547,7 +9089,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;
@@ -10921,7 +10463,6 @@ function stateModelFactory$1(pluginManager, configSchema) {
     return renderingModelFactory$1(pluginManager, configSchema).named('LinearApolloReferenceSequenceDisplay');
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
 const LinearApolloReferenceSequenceDisplay = observer(function LinearApolloReferenceSequenceDisplay(props) {
     const theme = useTheme();
     const { model } = props;
@@ -10932,24 +10473,21 @@ const LinearApolloReferenceSequenceDisplay = observer(function LinearApolloRefer
     }, [theme, setTheme]);
     const lgv = 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.createElement(Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } } },
-            React.createElement(Tooltip, { title: message },
-                React.createElement("div", null, message))));
-    }
-    return (React.createElement(React.Fragment, null, 3 / lgv.bpPerPx >= 1 ? (React.createElement("div", { className: classes.canvasContainer, style: {
-            width: lgv.dynamicBlocks.totalWidthPx,
-            height,
-        } },
-        React.createElement("canvas", { ref: async (node) => {
-                await Promise.resolve();
-                setSeqTrackCanvas(node);
-            }, width: lgv.dynamicBlocks.totalWidthPx, height: height, className: classes.canvas, "data-testid": "seqTrackCanvas" }),
-        React.createElement("canvas", { ref: async (node) => {
-                await Promise.resolve();
-                setSeqTrackOverlayCanvas(node);
-            }, width: lgv.dynamicBlocks.totalWidthPx, height: height, className: classes.canvas, "data-testid": "seqTrackOverlayCanvas" }))) : null));
+        return (jsx(Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } }, children: jsx(Tooltip, { title: message, children: jsx("div", { children: message }) }) }));
+    }
+    return (jsx(Fragment, { children: 3 / lgv.bpPerPx >= 1 ? (jsxs("div", { className: classes.canvasContainer, style: {
+                width: lgv.dynamicBlocks.totalWidthPx,
+                height,
+            }, children: [jsx("canvas", { ref: async (node) => {
+                        await Promise.resolve();
+                        setSeqTrackCanvas(node);
+                    }, width: lgv.dynamicBlocks.totalWidthPx, height: height, className: classes.canvas, "data-testid": "seqTrackCanvas" }), 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 = ConfigurationSchema('LinearApolloSixFrameDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
@@ -10974,16 +10512,11 @@ const FilterTranscripts = observer(function FilterTranscripts({ sourceFeature, f
         onUpdate(newForms);
         setExcludedTranscripts(newForms);
     };
-    return (React.createElement(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose },
-        React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, null, "Select the alternate transcripts you want to display in the apollo track"),
-            React.createElement(Grid, { container: true, spacing: 2 },
-                React.createElement(Grid, { size: 8 },
-                    React.createElement(FormGroup, null, allTranscripts.map((item) => (
-                    // eslint-disable-next-line react/jsx-key
-                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
-                                handleChange(item);
-                            }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item })))))))));
+    return (jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxs(DialogContent, { children: [jsx(DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 8, children: jsx(FormGroup, { children: allTranscripts.map((item) => (
+                            // eslint-disable-next-line react/jsx-key
+                            jsx(FormControlLabel, { control: jsx(Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
+                                        handleChange(item);
+                                    }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item }))) }) }) })] }) }));
 });
 
 let forwardFillLight = null;
@@ -11210,8 +10743,14 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
                     cdsStartPx = reversed ? minX - cdsWidthPx : minX;
                     ctx.fillStyle = theme.palette.text.primary;
                     const frame = 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) {
@@ -11344,8 +10883,14 @@ function drawHover(stateModel, ctx) {
             })?.offsetPx ?? 0) - offsetPx;
             const cdsStartPx = reversed ? minX - cdsWidthPx : minX;
             const frame = 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 = [
@@ -11525,8 +11070,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) {
@@ -11548,8 +11091,14 @@ function drawTooltip(display, context) {
         regionNumber: layoutIndex,
     })?.offsetPx ?? 0) - offsetPx;
     const frame = 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 !== '');
@@ -12137,8 +11686,14 @@ function layoutsModelFactory(pluginManager, configSchema) {
                                 }
                                 for (const cdsRow of cdsLocations) {
                                     for (const cds of cdsRow) {
-                                        let rowNum = getFrame(cds.min, cds.max, strand ?? 1, cds.phase);
-                                        rowNum = self.featureLabelSpacer(rowNum < 0 ? -1 * rowNum + 5 : rowNum);
+                                        const frame = 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, []);
                                         }
@@ -12409,8 +11964,11 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
                     }
                     for (const loc of feature.cdsLocations) {
                         for (const cds of loc) {
-                            let rowNum = getFrame(cds.min, cds.max, feature.strand ?? 1, cds.phase);
-                            rowNum = self.featureLabelSpacer(rowNum < 0 ? -1 * rowNum + 5 : rowNum);
+                            const frame = 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));
@@ -12638,7 +12196,6 @@ const ApolloPluginConfigurationSchema = ConfigurationSchema('ApolloPlugin', {
     },
 });
 
-/* eslint-disable react-hooks/exhaustive-deps */
 const isGeneOrTranscript = (annotationFeature, apolloSessionModel) => {
     const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
     if (!featureTypeOntology) {
@@ -12958,40 +12515,22 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     const handleCreateNewGeneChange = (e) => {
         setCreateNewGene(e.target.checked);
     };
-    return (React.createElement(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm" },
-        React.createElement(DialogTitle, { fontSize: 15 }, "Select the feature to be copied to apollo track"),
-        React.createElement(DialogContent, null,
-            React.createElement(Box, { sx: { ml: 3 } },
-                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${getFeatureNameOrId(annotationFeature)} (${annotationFeature.min + 1}..${annotationFeature.max})` })),
-                annotationFeature.children && (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 } }, Object.values(annotationFeature.children)
-                    .filter((child) => isTranscript(child, apolloSessionModel))
-                    .map((child) => (React.createElement(FormControlLabel, { key: child._id, control: React.createElement(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.createElement("div", { style: {
-                    border: '1px solid #ccc',
-                    marginTop: 20,
-                    padding: 10,
-                    borderRadius: 5,
-                } },
-                React.createElement(Box, { sx: { ml: 3 } },
-                    React.createElement(Typography, { variant: "caption", fontSize: 12 }, "Select the destination feature to copy the selected features"),
-                    React.createElement(Box, { sx: { mt: 1 } },
-                        React.createElement(Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange, disabled: createNewGene }, destinationFeatures.map((f) => (React.createElement(MenuItem, { key: f._id, value: f._id }, `${getFeatureNameOrId(f)} (${f.min + 1}..${f.max})`)))))),
-                React.createElement(Box, { sx: { ml: 3 } },
-                    React.createElement(FormGroup, null,
-                        React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: createNewGene, onChange: handleCreateNewGeneChange }), label: "Create new gene" })))))),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
-                    (!parentFeatureChecked &&
-                        checkedChildrens.length > 0 &&
-                        !selectedDestinationFeature), onClick: handleCreateApolloAnnotation }, "Create"),
-            React.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel")),
-        errorMessage ? (React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
+    return (jsxs(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm", children: [jsx(DialogTitle, { fontSize: 15, children: "Select the feature to be copied to apollo track" }), jsxs(DialogContent, { children: [jsxs(Box, { sx: { ml: 3 }, children: [isGeneOrTranscript(annotationFeature, apolloSessionModel) && (jsx(FormControlLabel, { control: jsx(Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${getFeatureNameOrId(annotationFeature)} (${annotationFeature.min + 1}..${annotationFeature.max})` })), annotationFeature.children && (jsx(Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 }, children: Object.values(annotationFeature.children)
+                                    .filter((child) => isTranscript(child, apolloSessionModel))
+                                    .map((child) => (jsx(FormControlLabel, { control: jsx(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))) && (jsxs("div", { style: {
+                            border: '1px solid #ccc',
+                            marginTop: 20,
+                            padding: 10,
+                            borderRadius: 5,
+                        }, children: [jsxs(Box, { sx: { ml: 3 }, children: [jsx(Typography, { variant: "caption", fontSize: 12, children: "Select the destination feature to copy the selected features" }), jsx(Box, { sx: { mt: 1 }, children: jsx(Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange, disabled: createNewGene, children: destinationFeatures.map((f) => (jsx(MenuItem, { value: f._id, children: `${getFeatureNameOrId(f)} (${f.min + 1}..${f.max})` }, f._id))) }) })] }), jsx(Box, { sx: { ml: 3 }, children: jsx(FormGroup, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: createNewGene, onChange: handleCreateNewGeneChange }), label: "Create new gene" }) }) })] }))] }), jsxs(DialogActions, { children: [jsx(Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
+                            (!parentFeatureChecked &&
+                                checkedChildrens.length > 0 &&
+                                !selectedDestinationFeature), onClick: handleCreateApolloAnnotation, children: "Create" }), jsx(Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] }), errorMessage ? (jsx(DialogContent, { children: jsx(DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
 }
 
 function parseCigar(cigar) {
@@ -13178,22 +12717,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))
@@ -13219,7 +12761,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;
         }
@@ -13268,10 +12810,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) => {
@@ -13298,7 +12839,7 @@ function annotationFromJBrowseFeature(pluggableElement) {
                                     handleClose: () => {
                                         doneCallback();
                                     },
-                                    annotationFeature: self.getAnnotationFeature(assembly),
+                                    annotationFeature: self.getAnnotationFeature(assembly, feature),
                                     assembly,
                                     refSeqId: self.getRefSeqId(assembly),
                                     region,
@@ -13332,7 +12873,7 @@ const CheckResultWarnings = observer(function CheckResultWarnings({ display, })
         ].filter((checkResult) => assembly.isValidRefName(checkResult.refSeq) &&
             assembly.getCanonicalRefName(checkResult.refSeq) === block.refName &&
             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;
@@ -13346,22 +12887,17 @@ const CheckResultWarnings = observer(function CheckResultWarnings({ display, })
             }
             const top = row * apolloRowHeight;
             const height = apolloRowHeight;
-            return (React.createElement(Tooltip, { key: checkResult._id, title: checkResult.message },
-                React.createElement(Box, { className: classes.box, style: {
+            return (jsx(Tooltip, { title: checkResult.message, children: jsx(Box, { className: classes.box, style: {
                         top,
                         left,
                         height,
                         width: height,
                         pointerEvents: apolloDragging ? 'none' : 'auto',
-                    } },
-                    React.createElement(Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, invisible: checkResult.count <= 1 },
-                        React.createElement(Avatar, { className: classes.avatar },
-                            React.createElement(ErrorIcon, { "data-testid": `ErrorIcon-${checkResult.start}` }))))));
+                    }, children: jsx(Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, invisible: checkResult.count <= 1, children: jsx(Avatar, { className: classes.avatar, children: jsx(ErrorIcon, { "data-testid": `ErrorIcon-${checkResult.start}` }) }) }) }) }, checkResult._id));
         });
     });
 });
 
-/* eslint-disable @typescript-eslint/unbound-method */
 // Lock icon when isLocked === true
 const LinearApolloDisplay = observer(function LinearApolloDisplay(props) {
     const theme = useTheme();
@@ -13378,8 +12914,7 @@ const LinearApolloDisplay = observer(function LinearApolloDisplay(props) {
     if (!isShown) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: classes.canvasContainer, style: {
+    return (jsx(Fragment, { children: jsxs("div", { className: classes.canvasContainer, style: {
                 width: lgv.dynamicBlocks.totalWidthPx,
                 height: featuresHeight,
             }, onContextMenu: (event) => {
@@ -13393,63 +12928,50 @@ const LinearApolloDisplay = observer(function LinearApolloDisplay(props) {
                     setContextCoord(coord);
                     setContextMenuItems(getContextMenuItems(event));
                 }
-            } },
-            session.isLocked ? (React.createElement("div", { className: classes.locked, "data-testid": "lock-icon" },
-                React.createElement(LockIcon, null))) : null,
-            loading ? (React.createElement("div", { className: classes.loading },
-                React.createElement(CircularProgress, { size: "18px" }))) : null,
-            message ? (React.createElement(Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } } },
-                React.createElement(Tooltip, { title: message },
-                    React.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.createElement(React.Fragment, null,
-                React.createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCollaboratorCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }),
-                React.createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }),
-                React.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.createElement(CheckResultWarnings, { display: model }),
-                React.createElement(Menu$1, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
-                        callback();
-                        setContextMenuItems([]);
-                    }, onClose: () => {
-                        setContextMenuItems([]);
-                    }, slotProps: {
-                        transition: {
-                            onExit: () => {
+            }, children: [session.isLocked ? (jsx("div", { className: classes.locked, "data-testid": "lock-icon", children: jsx(LockIcon, {}) })) : null, loading ? (jsx("div", { className: classes.loading, children: jsx(CircularProgress, { size: "18px" }) })) : null, message ? (jsx(Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } }, children: jsx(Tooltip, { title: message, children: 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
+                jsxs(Fragment, { children: [jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCollaboratorCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }), jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }), 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" }), jsx(CheckResultWarnings, { display: model }), jsx(Menu$1, { 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 = 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.createElement("div", { style: {
+    return (jsx("div", { style: {
             position: 'absolute',
             left: 0,
             top: (apolloRowHeight * featureLabelSpacer * (highestRow + 1)) / 2 +
                 idx * featureLabelSpacer * apolloRowHeight,
             width: '100%',
-        } },
-        React.createElement("hr", { style: hrStyle })));
+        }, children: jsx("hr", { style: hrStyle }) }));
 });
 
 const LinearApolloSixFrameDisplay = observer(function LinearApolloSixFrameDisplay(props, apolloDragging) {
     const theme = 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 = getContainingView(model);
     useEffect(() => {
@@ -13462,8 +12984,7 @@ const LinearApolloSixFrameDisplay = observer(function LinearApolloSixFrameDispla
         return null;
     }
     const { assemblyManager } = session;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: classes.canvasContainer, style: {
+    return (jsx(Fragment, { children: jsxs("div", { className: classes.canvasContainer, style: {
                 width: lgv.dynamicBlocks.totalWidthPx,
                 height: featuresHeight,
             }, onContextMenu: (event) => {
@@ -13477,106 +12998,94 @@ const LinearApolloSixFrameDisplay = observer(function LinearApolloSixFrameDispla
                     setContextCoord(coord);
                     setContextMenuItems(getContextMenuItems(event));
                 }
-            } },
-            session.isLocked ? (React.createElement("div", { className: classes.locked, "data-testid": "lock-icon" },
-                React.createElement(LockIcon, null))) : null,
-            message ? (React.createElement(Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } } },
-                React.createElement(Tooltip, { title: message },
-                    React.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.createElement(React.Fragment, null,
-                React.createElement(TrackLines, { model: model, idx: 0 }),
-                React.createElement(TrackLines, { model: model, hrStyle: { margin: 0, top: 0, color: 'grey', opacity: 0.4 }, idx: 1 }),
-                React.createElement(TrackLines, { model: model, idx: 2 }),
-                React.createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCollaboratorCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }),
-                React.createElement("canvas", { ref: async (node) => {
-                        await Promise.resolve();
-                        setCanvas(node);
-                    }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }),
-                React.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 &&
-                            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 = 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 ? (jsx("div", { className: classes.locked, "data-testid": "lock-icon", children: jsx(LockIcon, {}) })) : null, message ? (jsx(Alert, { severity: "warning", classes: { message: classes.ellipses }, slotProps: { root: { className: classes.center } }, children: jsx(Tooltip, { title: message, children: 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
+                jsxs(Fragment, { children: [jsx(TrackLines, { model: model, idx: 0 }), jsx(TrackLines, { model: model, hrStyle: { margin: 0, top: 0, color: 'grey', opacity: 0.4 }, idx: 1 }), jsx(TrackLines, { model: model, idx: 2 }), jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCollaboratorCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "collaboratorCanvas" }), jsx("canvas", { ref: async (node) => {
+                                await Promise.resolve();
+                                setCanvas(node);
+                            }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, className: classes.canvas, "data-testid": "canvas" }), 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 &&
+                                    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 = 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 (jsx(Tooltip, { title: checkResult.message, children: jsx(Box, { className: classes.box, style: {
+                                                top,
+                                                left,
+                                                height,
+                                                width: height,
+                                                pointerEvents: apolloDragging ? 'none' : 'auto',
+                                            }, children: jsx(Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: {
+                                                    vertical: 'bottom',
+                                                    horizontal: 'right',
+                                                }, invisible: checkResult.count <= 1, children: jsx(Avatar, { className: classes.avatar, children: jsx(ErrorIcon, { "data-testid": `ErrorIcon-${checkResult.start}` }) }) }) }) }, checkResult._id));
+                                });
                             }
-                            const top = row * apolloRowHeight;
-                            const height = apolloRowHeight;
-                            return (React.createElement(Tooltip, { key: checkResult._id, title: checkResult.message },
-                                React.createElement(Box, { className: classes.box, style: {
-                                        top,
-                                        left,
-                                        height,
-                                        width: height,
-                                        pointerEvents: apolloDragging ? 'none' : 'auto',
-                                    } },
-                                    React.createElement(Badge, { className: classes.badge, badgeContent: checkResult.count, color: "primary", overlap: "circular", anchorOrigin: {
-                                            vertical: 'bottom',
-                                            horizontal: 'right',
-                                        }, invisible: checkResult.count <= 1 },
-                                        React.createElement(Avatar, { className: classes.avatar },
-                                            React.createElement(ErrorIcon, { "data-testid": `ErrorIcon-${checkResult.start}` }))))));
-                        });
-                    }
-                    return null;
-                }),
-                React.createElement(Menu$1, { open: contextMenuItems.length > 0, onMenuItemClick: (_, callback) => {
-                        callback();
-                        setContextMenuItems([]);
-                    }, onClose: () => {
-                        setContextMenuItems([]);
-                    }, slotProps: {
-                        transition: {
-                            onExit: () => {
+                            return null;
+                        }), jsx(Menu$1, { 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 = makeStyles()((theme) => ({
     shading: {
@@ -13640,12 +13149,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.createElement("div", { onMouseDown: (event) => {
+    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 });
@@ -13657,11 +13166,7 @@ const ResizeHandle = ({ onResize, }) => {
 };
 const AccordionControl = observer(function AccordionControl({ onClick, onResize, open, title, }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.accordionRoot },
-        open && onResize ? React.createElement(ResizeHandle, { onResize: onResize }) : null,
-        React.createElement("div", { className: classes.accordionControl, onClick: onClick },
-            open ? (React.createElement(ExpandLessIcon, { className: classes.expandIcon })) : (React.createElement(ExpandMoreIcon, { className: classes.expandIcon })),
-            title ? (React.createElement(Typography, { className: classes.title, variant: "caption", component: "span" }, title)) : null)));
+    return (jsxs("div", { className: classes.accordionRoot, children: [open && onResize ? jsx(ResizeHandle, { onResize: onResize }) : null, jsxs("div", { className: classes.accordionControl, onClick: onClick, children: [open ? (jsx(ExpandLessIcon, { className: classes.expandIcon })) : (jsx(ExpandMoreIcon, { className: classes.expandIcon })), title ? (jsx(Typography, { className: classes.title, variant: "caption", component: "span", children: title })) : null] })] }));
 });
 const LinearApolloDisplayComponent = observer(function DisplayComponent({ model, ...other }) {
     const session = getSession(model);
@@ -13678,28 +13183,19 @@ const LinearApolloDisplayComponent = observer(function DisplayComponent({ model,
         model.setDetailsHeight(model.detailsHeight - delta);
     };
     if (!ontologyStore) {
-        return (React.createElement("div", { className: classes.alertContainer },
-            React.createElement(Alert, { severity: "error" }, "Could not load feature type ontology.")));
+        return (jsx("div", { className: classes.alertContainer, children: jsx(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.createElement("div", { style: { height: overallHeight } },
-            React.createElement(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }),
-            React.createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight } },
-                React.createElement(LinearApolloDisplay, { model: model, ...other })),
-            React.createElement(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }),
-            React.createElement("div", { className: classes.details, style: { height: tabularHeight } },
-                React.createElement(TabularEditorPane, { model: model }))));
+        return (jsxs("div", { style: { height: overallHeight }, children: [jsx(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }), jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight }, children: jsx(LinearApolloDisplay, { model: model, ...other }) }), jsx(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }), jsx("div", { className: classes.details, style: { height: tabularHeight }, children: jsx(TabularEditorPane, { model: model }) })] }));
     }
     if (graphical) {
-        return (React.createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight } },
-            React.createElement(LinearApolloDisplay, { model: model, ...other })));
+        return (jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight }, children: jsx(LinearApolloDisplay, { model: model, ...other }) }));
     }
-    return (React.createElement("div", { className: classes.details, style: { height: overallHeight } },
-        React.createElement(TabularEditorPane, { model: model })));
+    return (jsx("div", { className: classes.details, style: { height: overallHeight }, children: jsx(TabularEditorPane, { model: model }) }));
 });
 const LinearApolloSixFrameDisplayComponent = observer(function DisplayComponent({ model, ...other }) {
     const session = getSession(model);
@@ -13716,28 +13212,19 @@ const LinearApolloSixFrameDisplayComponent = observer(function DisplayComponent(
         model.setDetailsHeight(detailsHeight - delta);
     };
     if (!ontologyStore) {
-        return (React.createElement("div", { className: classes.alertContainer },
-            React.createElement(Alert, { severity: "error" }, "Could not load feature type ontology.")));
+        return (jsx("div", { className: classes.alertContainer, children: jsx(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.createElement("div", { style: { height: overallHeight } },
-            React.createElement(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }),
-            React.createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight } },
-                React.createElement(LinearApolloSixFrameDisplay, { model: model, ...other })),
-            React.createElement(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }),
-            React.createElement("div", { className: classes.details, style: { height: tabularHeight } },
-                React.createElement(TabularEditorPane, { model: model }))));
+        return (jsxs("div", { style: { height: overallHeight }, children: [jsx(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }), jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight }, children: jsx(LinearApolloSixFrameDisplay, { model: model, ...other }) }), jsx(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }), jsx("div", { className: classes.details, style: { height: tabularHeight }, children: jsx(TabularEditorPane, { model: model }) })] }));
     }
     if (graphical) {
-        return (React.createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight } },
-            React.createElement(LinearApolloSixFrameDisplay, { model: model, ...other })));
+        return (jsx("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight }, children: jsx(LinearApolloSixFrameDisplay, { model: model, ...other }) }));
     }
-    return (React.createElement("div", { className: classes.details, style: { height: overallHeight } },
-        React.createElement(TabularEditorPane, { model: model })));
+    return (jsx("div", { className: classes.details, style: { height: overallHeight }, children: jsx(TabularEditorPane, { model: model }) }));
 });
 
 function addTopLevelMenus(rootModel) {
@@ -13842,6 +13329,7 @@ function addTopLevelMenus(rootModel) {
 }
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-confusing-void-expression */
 const ApolloJobModel = types
     .model('JobsManager', {})
     .views((self) => ({
@@ -14049,7 +13537,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);
                             },
                         };
@@ -14305,6 +13793,12 @@ function extendSession(pluginManager, sessionModel) {
                 }
             }
         },
+    }))
+        .actions((self) => ({
+        apolloSetEventualSelectedFeature: flow$1(function* apolloSetEventualSelectedFeature(featureId) {
+            yield when(() => Boolean(self.apolloDataStore.getFeature(featureId)));
+            self.apolloSetSelectedFeature(featureId);
+        }),
     }))
         .volatile((self) => ({
         previousSnapshot: getSnapshot(self),
@@ -14410,6 +13904,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();
@@ -14417,7 +13915,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) => {
@@ -14459,6 +13957,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,
@@ -14554,6 +14053,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 &&
@@ -14695,6 +14197,17 @@ class ApolloPlugin extends Plugin {
         });
         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)) {