@apollo-annotation/jbrowse-plugin-apollo 0.3.4 → 0.3.5

package/dist/index.esm.js

@@ -1,25 +1,26 @@
 import { checkRegistry, changeRegistry, Change, isAssemblySpecificChange } from '@apollo-annotation/common';
-import { gff3ToAnnotationFeature, AddAssemblyFromExternalChange, AddAssemblyAndFeaturesFromFileChange, AddAssemblyFromFileChange, AddFeatureChange, DeleteAssemblyChange, DeleteFeatureChange, annotationFeatureToGFF3, AddFeaturesFromFileChange, UserChange, DeleteUserChange, FeatureAttributeChange, AddRefSeqAliasesChange, getDecodedToken, makeUserSessionId, LocationEndChange, LocationStartChange, TypeChange, StrandChange, splitStringIntoChunks, validationRegistry, ValidationResultSet, filterJBrowseConfig, ImportJBrowseConfigChange, changes, CDSCheck, CoreValidation, ParentChildValidation } from '@apollo-annotation/shared';
+import { gff3ToAnnotationFeature, AddAssemblyFromExternalChange, AddAssemblyAndFeaturesFromFileChange, AddAssemblyFromFileChange, AddFeatureChange, DeleteAssemblyChange, DeleteFeatureChange, annotationFeatureToGFF3, AddFeaturesFromFileChange, UserChange, DeleteUserChange, AddRefSeqAliasesChange, getDecodedToken, makeUserSessionId, LocationEndChange, LocationStartChange, FeatureAttributeChange, TypeChange, StrandChange, splitStringIntoChunks, validationRegistry, ValidationResultSet, filterJBrowseConfig, ImportJBrowseConfigChange, changes, CDSCheck, CoreValidation, ParentChildValidation } from '@apollo-annotation/shared';
 import { ConfigurationSchema, readConfObject, getConf, ConfigurationReference } from '@jbrowse/core/configuration';
 import { BaseInternetAccountConfig, InternetAccount, RendererType, TextSearchAdapterType, BaseDisplay, WidgetType, createBaseTrackConfig, TrackType, createBaseTrackModel, InternetAccountType, DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import Plugin from '@jbrowse/core/Plugin';
-import { isUriLocation, isLocalPathLocation, isElectron, isAbstractMenuManager, getSession, getContainingView, getFrame, revcom, defaultCodonTable, isSessionModelWithWidgets, intersection2, doesIntersect2, reverse, defaultStarts, defaultStops } from '@jbrowse/core/util';
+import { isUriLocation, isLocalPathLocation, isElectron, isAbstractMenuManager, getSession, getContainingView, revcom, defaultCodonTable, isSessionModelWithWidgets, getFrame, intersection2, doesIntersect2, reverse, defaultStarts, defaultStops } from '@jbrowse/core/util';
 import AddIcon from '@mui/icons-material/Add';
 import { autorun, toJS, observable } from 'mobx';
 import { getSnapshot, getParent, getRoot, types, addDisposer, flow, cast, isAlive, resolveIdentifier, getParentOfType, applySnapshot } from 'mobx-state-tree';
 import { io } from 'socket.io-client';
 import gff from '@gmod/gff';
-import LinkIcon from '@mui/icons-material/Link';
-import { DialogTitle, IconButton, DialogContent, DialogContentText, Select, MenuItem, TextField, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Box, Typography, FormGroup, Checkbox, DialogActions, Button, Autocomplete, InputLabel, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Grid2, Tooltip, Chip, useTheme, FormHelperText, SvgIcon, Divider, Menu, InputAdornment as InputAdornment$1, alpha, CircularProgress, Alert, Avatar } from '@mui/material';
-import InputAdornment from '@mui/material/InputAdornment';
-import LinearProgress from '@mui/material/LinearProgress';
+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, TableContainer, Paper, TableHead, useTheme, FormHelperText, Grid2, SvgIcon, Divider, Menu, Chip, FormLabel, RadioGroup, Radio, alpha, CircularProgress, Alert, Avatar } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 import ObjectID from 'bson-objectid';
 import * as React from 'react';
-import React__default, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import React__default, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { Dialog as Dialog$1, Menu as Menu$1 } from '@jbrowse/core/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import InfoIcon from '@mui/icons-material/Info';
+import LinkIcon from '@mui/icons-material/Link';
 import { LocalPathLocation, UriLocation, BlobLocation, ElementId } from '@jbrowse/core/util/types/mst';
 import { openDB, deleteDB } from 'idb/with-async-ittr';
 import { checkAbortSignal, isAbortException } from '@jbrowse/core/util/aborting';
@@ -29,11 +30,9 @@ 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 DeleteIcon from '@mui/icons-material/Delete';
 import { DataGrid, GridToolbar, GridActionsCellItem } from '@mui/x-data-grid';
-import { debounce } from '@mui/material/utils';
-import highlightMatch from 'autosuggest-highlight/match';
-import highlightParse from 'autosuggest-highlight/parse';
 import { nanoid } from 'nanoid';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
@@ -41,16 +40,23 @@ import { BaseSequenceAdapter, BaseAdapter } from '@jbrowse/core/data_adapters/Ba
 import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import SimpleFeature from '@jbrowse/core/util/simpleFeature';
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { debounce } from '@mui/material/utils';
+import highlightMatch from 'autosuggest-highlight/match';
+import highlightParse from 'autosuggest-highlight/parse';
 import { AnnotationFeatureModel, ApolloAssembly, CheckResult, ApolloRefSeq } from '@apollo-annotation/mst';
+import styled from '@emotion/styled';
+import RemoveIcon from '@mui/icons-material/Remove';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ContentCutIcon from '@mui/icons-material/ContentCut';
 import ClearIcon from '@mui/icons-material/Clear';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ErrorIcon from '@mui/icons-material/Error';
 import SaveIcon from '@mui/icons-material/Save';
 
-var version = "0.3.4";
+var version = "0.3.5";
 
 const ApolloConfigSchema = ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -130,6 +136,55 @@ async function checkFeatures(assembly) {
     return checkResults;
 }
 
+function getFeatureName(feature) {
+    const { attributes } = feature;
+    const name = attributes.get('gff_name');
+    if (name) {
+        return name[0];
+    }
+    return '';
+}
+function getFeatureId$1(feature) {
+    const { attributes } = feature;
+    const id = attributes.get('gff_id');
+    const transcript_id = attributes.get('transcript_id');
+    const exon_id = attributes.get('exon_id');
+    const protein_id = attributes.get('protein_id');
+    if (id) {
+        return id[0];
+    }
+    if (transcript_id) {
+        return transcript_id[0];
+    }
+    if (exon_id) {
+        return exon_id[0];
+    }
+    if (protein_id) {
+        return protein_id[0];
+    }
+    return '';
+}
+function getFeatureNameOrId$1(feature) {
+    const name = getFeatureName(feature);
+    const id = getFeatureId$1(feature);
+    if (name) {
+        return `: ${name}`;
+    }
+    if (id) {
+        return `: ${id}`;
+    }
+    return '';
+}
+function getStrand(strand) {
+    if (strand === 1) {
+        return 'Forward';
+    }
+    if (strand === -1) {
+        return 'Reverse';
+    }
+    return '';
+}
+
 async function createFetchErrorMessage(response, additionalText) {
     let errorMessage;
     try {
@@ -170,14 +225,59 @@ const Dialog = observer(function JBrowseDialog(props) {
                 React__default.createElement(CloseIcon, null))) }));
 });
 
-/* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
+/* eslint-disable @typescript-eslint/unbound-method */
 var FileType;
 (function (FileType) {
     FileType["GFF3"] = "text/x-gff3";
     FileType["FASTA"] = "text/x-fasta";
+    FileType["BGZIP_FASTA"] = "application/x-bgzip-fasta";
+    FileType["FAI"] = "text/x-fai";
+    FileType["GZI"] = "application/x-gzi";
     FileType["EXTERNAL"] = "text/x-external";
 })(FileType || (FileType = {}));
+const useStyles$e = makeStyles()((theme) => ({
+    accordion: {
+        border: `1px solid ${theme.palette.divider}`,
+        '&:not(:last-child)': {
+            borderBottom: 0,
+        },
+    },
+    accordionSummary: {
+        flexDirection: 'row-reverse',
+    },
+    accordionDetails: {
+        padding: theme.spacing(2),
+        borderTop: '1px solid rgba(0, 0, 0, .125)',
+    },
+    radioIcon: {
+        color: theme?.palette?.tertiary?.contrastText,
+    },
+    dialog: {
+        // minHeight: 500,
+        minWidth: 550,
+        maxWidth: 800,
+    },
+}));
+function checkSumbission(validAsm, sequenceIsEditable, fileType, fastaFile, fastaIndexFile, fastaGziIndexFile, validFastaUrl, validFastaIndexUrl, validFastaGziIndexUrl) {
+    if (!validAsm) {
+        return false;
+    }
+    if (sequenceIsEditable && fastaFile) {
+        return true;
+    }
+    if (fileType === FileType.GFF3 && fastaFile) {
+        return true;
+    }
+    if (fastaFile && fastaIndexFile && fastaGziIndexFile) {
+        return true;
+    }
+    if (validFastaUrl && validFastaIndexUrl && validFastaGziIndexUrl) {
+        return true;
+    }
+    return false;
+}
 function AddAssembly({ changeManager, handleClose, session, }) {
+    const { classes } = useStyles$e();
     const { internetAccounts } = getRoot(session);
     const { notify } = session;
     const apolloInternetAccounts = internetAccounts.filter((ia) => ia.type === 'ApolloInternetAccount');
@@ -187,50 +287,32 @@ function AddAssembly({ changeManager, handleClose, session, }) {
     const [assemblyName, setAssemblyName] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [validAsm, setValidAsm] = useState(false);
-    const [file, setFile] = useState(null);
-    const [fileType, setFileType] = useState(FileType.GFF3);
+    const [fileType, setFileType] = useState(FileType.BGZIP_FASTA);
     const [importFeatures, setImportFeatures] = useState(true);
+    const [sequenceIsEditable, setSequenceIsEditable] = useState(false);
     const [submitted, setSubmitted] = useState(false);
-    const [selectedInternetAccount, setSelectedInternetAccount] = useState(apolloInternetAccounts[0]);
-    const [fastaFile, setFastaFile] = useState('');
-    const [fastaIndexFile, setFastaIndexFile] = useState('');
-    const [fastaGziIndexFile, setFastaGziIndexFile] = useState('');
+    const [fastaFile, setFastaFile] = useState(null);
+    const [fastaIndexFile, setFastaIndexFile] = useState(null);
+    const [fastaGziIndexFile, setFastaGziIndexFile] = useState(null);
+    const [fastaUrl, setFastaUrl] = useState('');
+    const [fastaIndexUrl, setFastaIndexUrl] = useState('');
+    const [fastaGziIndexUrl, setFastaGziIndexUrl] = useState('');
     const [loading, setLoading] = useState(false);
-    function handleChangeInternetAccount(e) {
-        setSubmitted(false);
-        const newlySelectedInternetAccount = apolloInternetAccounts.find((ia) => ia.internetAccountId === e.target.value);
-        if (!newlySelectedInternetAccount) {
-            throw new Error(`Could not find internetAccount with ID "${e.target.value}"`);
-        }
-        setSelectedInternetAccount(newlySelectedInternetAccount);
-    }
-    function handleChangeFile(e) {
-        if (!e.target.files) {
-            return;
-        }
-        const selectedFile = e.target.files.item(0);
-        setFile(selectedFile);
-        if (!selectedFile) {
-            return;
-        }
-        const fileNameLower = selectedFile.name.toLowerCase();
-        if (fileNameLower.endsWith('.fasta') ||
-            fileNameLower.endsWith('.fna') ||
-            fileNameLower.endsWith('.fa')) {
-            setFileType(FileType.FASTA);
+    const [isGzip, setIsGzip] = useState(false);
+    useEffect(() => {
+        setFastaIndexUrl(fastaUrl ? `${fastaUrl}.fai` : '');
+    }, [fastaUrl]);
+    useEffect(() => {
+        setFastaGziIndexUrl(fastaUrl ? `${fastaUrl}.gzi` : '');
+    }, [fastaUrl]);
+    useEffect(() => {
+        if (sequenceIsEditable || fileType === FileType.GFF3) {
+            setIsGzip(fastaFile?.name.toLocaleLowerCase().endsWith('.gz') ? true : false);
         }
-        else if (fileNameLower.endsWith('.gff3') ||
-            fileNameLower.endsWith('.gff')) {
-            setFileType(FileType.GFF3);
+        else {
+            setIsGzip(true);
         }
-    }
-    function handleChangeFileType(e) {
-        setFileType(e.target.value);
-        setImportFeatures(e.target.value === FileType.GFF3);
-        setFastaFile('');
-        setFastaIndexFile('');
-        setFile(null);
-    }
+    }, [fastaFile, sequenceIsEditable, fileType]);
     function checkAssemblyName(assembly) {
         const { assemblies } = session;
         const checkAsm = assemblies.find((asm) => readConfObject(asm, 'displayName') === assembly);
@@ -243,6 +325,61 @@ function AddAssembly({ changeManager, handleClose, session, }) {
             setErrorMessage('');
         }
     }
+    async function uploadFile(file, fileType) {
+        const { jobsManager } = session;
+        const controller = new AbortController();
+        const [{ baseURL, getFetcher }] = apolloInternetAccounts;
+        const url = new URL('files', baseURL);
+        url.searchParams.set('type', fileType);
+        const uri = url.href;
+        const formData = new FormData();
+        let filename = file.name;
+        if (fileType === FileType.FAI || fileType === FileType.GZI) {
+            filename = `${filename}.txt`;
+        }
+        else if (isGzip && !file.name.toLocaleLowerCase().endsWith('.gz')) {
+            filename = `${filename}.gz`;
+        }
+        else if (!isGzip && file.name.toLocaleLowerCase().endsWith('.gz')) {
+            filename = `${filename}.txt`;
+        }
+        formData.append('file', file, filename);
+        formData.append('type', fileType);
+        const apolloFetchFile = getFetcher({
+            locationType: 'UriLocation',
+            uri,
+        });
+        if (apolloFetchFile) {
+            const job = {
+                name: `UploadAssemblyFile for ${assemblyName}`,
+                statusMessage: 'Pre-validating',
+                progressPct: 0,
+                cancelCallback: () => {
+                    controller.abort();
+                    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;
+        }
+        throw new Error('Failed to fetch');
+    }
     async function onSubmit(event) {
         event.preventDefault();
         setErrorMessage('');
@@ -251,51 +388,6 @@ function AddAssembly({ changeManager, handleClose, session, }) {
         notify(`Assembly "${assemblyName}" is being added`, 'info');
         handleClose();
         event.preventDefault();
-        const { jobsManager } = session;
-        const controller = new AbortController();
-        const job = {
-            name: `UploadAssemblyFile for ${assemblyName}`,
-            statusMessage: 'Pre-validating',
-            progressPct: 0,
-            cancelCallback: () => {
-                controller.abort();
-                jobsManager.abortJob(job.name);
-            },
-        };
-        jobsManager.runJob(job);
-        let fileId = '';
-        const { baseURL, getFetcher, internetAccountId } = selectedInternetAccount;
-        if (fileType !== FileType.EXTERNAL && file) {
-            // First upload file
-            const url = new URL('files', baseURL);
-            url.searchParams.set('type', fileType);
-            const uri = url.href;
-            const formData = new FormData();
-            formData.append('file', file);
-            formData.append('fileName', file.name);
-            formData.append('type', fileType);
-            const apolloFetchFile = getFetcher({
-                locationType: 'UriLocation',
-                uri,
-            });
-            if (apolloFetchFile) {
-                jobsManager.update(job.name, 'Uploading file, 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();
-                fileId = result._id;
-            }
-        }
         let change;
         if (fileType === FileType.EXTERNAL) {
             change = new AddAssemblyFromExternalChange({
@@ -303,30 +395,67 @@ function AddAssembly({ changeManager, handleClose, session, }) {
                 assembly: new ObjectID().toHexString(),
                 assemblyName,
                 externalLocation: {
-                    fa: fastaFile,
-                    fai: fastaIndexFile,
-                    ...(fastaGziIndexFile ? { gzi: fastaGziIndexFile } : {}),
+                    fa: fastaUrl,
+                    fai: fastaIndexUrl,
+                    gzi: fastaGziIndexUrl,
                 },
             });
         }
         else {
-            const fileUploadChangeBase = {
-                assembly: new ObjectID().toHexString(),
-                assemblyName,
-                fileIds: { fa: fileId },
-            };
-            change =
-                fileType === FileType.GFF3 && importFeatures
-                    ? new AddAssemblyAndFeaturesFromFileChange({
-                        typeName: 'AddAssemblyAndFeaturesFromFileChange',
-                        ...fileUploadChangeBase,
-                    })
-                    : new AddAssemblyFromFileChange({
-                        typeName: 'AddAssemblyFromFileChange',
-                        ...fileUploadChangeBase,
-                    });
+            if (!fastaFile) {
+                throw new Error('Missing fasta file');
+            }
+            if (fileType === FileType.GFF3 && importFeatures) {
+                const faId = await uploadFile(fastaFile, FileType.GFF3);
+                change = new AddAssemblyAndFeaturesFromFileChange({
+                    typeName: 'AddAssemblyAndFeaturesFromFileChange',
+                    assembly: new ObjectID().toHexString(),
+                    assemblyName,
+                    fileIds: { fa: faId },
+                });
+            }
+            else if (fileType === FileType.GFF3) {
+                const faId = await uploadFile(fastaFile, FileType.GFF3);
+                change = new AddAssemblyFromFileChange({
+                    typeName: 'AddAssemblyFromFileChange',
+                    assembly: new ObjectID().toHexString(),
+                    assemblyName,
+                    fileIds: {
+                        fa: faId,
+                    },
+                });
+            }
+            else if (sequenceIsEditable) {
+                const faId = await uploadFile(fastaFile, FileType.FASTA);
+                change = new AddAssemblyFromFileChange({
+                    typeName: 'AddAssemblyFromFileChange',
+                    assembly: new ObjectID().toHexString(),
+                    assemblyName,
+                    fileIds: {
+                        fa: faId,
+                    },
+                });
+            }
+            else {
+                if (!fastaIndexFile || !fastaGziIndexFile) {
+                    throw new Error('Missing fasta index files');
+                }
+                const faId = await uploadFile(fastaFile, FileType.BGZIP_FASTA);
+                const faiId = await uploadFile(fastaIndexFile, FileType.FAI);
+                const gziId = await uploadFile(fastaGziIndexFile, FileType.GZI);
+                change = new AddAssemblyFromFileChange({
+                    typeName: 'AddAssemblyFromFileChange',
+                    assembly: new ObjectID().toHexString(),
+                    assemblyName,
+                    fileIds: {
+                        fa: faId,
+                        fai: faiId,
+                        gzi: gziId,
+                    },
+                });
+            }
         }
-        jobsManager.done(job);
+        const [{ internetAccountId }] = apolloInternetAccounts;
         await changeManager.submit(change, {
             internetAccountId,
             updateJobsManager: true,
@@ -334,89 +463,175 @@ function AddAssembly({ changeManager, handleClose, session, }) {
         setSubmitted(false);
         setLoading(false);
     }
-    let validFastaFile = false;
+    let validFastaUrl = false;
     try {
-        const url = new URL(fastaFile);
+        const url = new URL(fastaUrl);
         if (url.protocol === 'http:' || url.protocol === 'https:') {
-            validFastaFile = true;
+            validFastaUrl = true;
         }
     }
     catch {
         // pass
     }
-    let validFastaIndexFile = false;
+    let validFastaIndexUrl = false;
     try {
-        const url = new URL(fastaIndexFile);
+        const url = new URL(fastaIndexUrl);
         if (url.protocol === 'http:' || url.protocol === 'https:') {
-            validFastaIndexFile = true;
+            validFastaIndexUrl = true;
         }
     }
     catch {
         // pass
     }
-    let validFastaGziIndexFile = false;
+    let validFastaGziIndexUrl = false;
     try {
-        const url = new URL(fastaGziIndexFile);
+        const url = new URL(fastaGziIndexUrl);
         if (url.protocol === 'http:' || url.protocol === 'https:') {
-            validFastaGziIndexFile = true;
+            validFastaGziIndexUrl = true;
         }
     }
     catch {
         // pass
     }
-    return (React__default.createElement(Dialog, { open: true, maxWidth: false, "data-testid": "add-assembly-dialog", title: "Add new assembly", handleClose: handleClose },
-        loading ? React__default.createElement(LinearProgress, null) : null,
-        React__default.createElement("form", { onSubmit: onSubmit },
-            React__default.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
-                apolloInternetAccounts.length > 1 ? (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DialogContentText, null, "Select account"),
-                    React__default.createElement(Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage }, internetAccounts.map((option) => (React__default.createElement(MenuItem, { key: option.id, value: option.internetAccountId }, option.name)))))) : null,
+    const [expanded, setExpanded] = React__default.useState('panelFastaInput');
+    const handleAccordionChange = (panel) => (event, newExpanded) => {
+        if (newExpanded) {
+            setExpanded(panel);
+        }
+        if (panel === 'panelGffInput') {
+            setIsGzip(false);
+        }
+        else {
+            setIsGzip(true);
+        }
+    };
+    return (React__default.createElement(Dialog, { open: true, handleClose: handleClose, "data-testid": "add-assembly-dialog", title: "Add new assembly", maxWidth: false },
+        React__default.createElement("form", { onSubmit: onSubmit, "data-testid": "submit-form" },
+            React__default.createElement(DialogContent, { className: classes.dialog },
+                loading ? React__default.createElement(LinearProgress, null) : null,
                 React__default.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__default.createElement(FormControl, { style: { marginTop: 20 } },
-                    React__default.createElement(FormLabel, null, "Select GFF3, FASTA or EXTERNAL option"),
-                    React__default.createElement(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: FileType.GFF3, name: "radio-buttons-group", onChange: handleChangeFileType, value: fileType },
-                        React__default.createElement(FormControlLabel, { value: FileType.GFF3, control: React__default.createElement(Radio, null), label: "GFF3", disabled: submitted && !errorMessage }),
-                        React__default.createElement(FormControlLabel, { value: FileType.FASTA, control: React__default.createElement(Radio, null), label: "FASTA", disabled: submitted && !errorMessage }),
-                        React__default.createElement(FormControlLabel, { value: FileType.EXTERNAL, control: React__default.createElement(Radio, null), label: "External", disabled: submitted && !errorMessage }))),
-                fileType === FileType.EXTERNAL ? (React__default.createElement(Box, { style: { marginTop: 20 } },
-                    React__default.createElement(Typography, { variant: "caption" }, "Enter FASTA and FASTA index(es) URL"),
-                    React__default.createElement(TextField, { margin: "dense", helperText: "Can be bgz-compressed", id: "fasta", label: "FASTA", type: "TextField", fullWidth: true, variant: "outlined", error: !validFastaFile, onChange: (e) => {
-                            setFastaFile(e.target.value);
-                        }, disabled: submitted && !errorMessage, InputProps: {
-                            startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
-                                React__default.createElement(LinkIcon, null))),
-                        } }),
-                    React__default.createElement(TextField, { margin: "dense", id: "fasta-index", label: "FASTA Index", helperText: ".fai or .gz.fai", type: "TextField", fullWidth: true, variant: "outlined", error: !validFastaIndexFile, onChange: (e) => {
-                            setFastaIndexFile(e.target.value);
-                        }, disabled: submitted && !errorMessage, InputProps: {
-                            startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
-                                React__default.createElement(LinkIcon, null))),
-                        } }),
-                    React__default.createElement(TextField, { margin: "dense", id: "fasta-gzi-index", label: "FASTA GZI Index", helperText: "Only for bgz-compressed FASTA, .gz.gzi", type: "TextField", fullWidth: true, variant: "outlined", error: Boolean(fastaGziIndexFile) && !validFastaGziIndexFile, onChange: (e) => {
-                            setFastaGziIndexFile(e.target.value);
-                        }, disabled: submitted && !errorMessage, InputProps: {
-                            startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
-                                React__default.createElement(LinkIcon, null))),
-                        } }))) : (React__default.createElement(Box, { style: { marginTop: 20 } },
-                    React__default.createElement("input", { type: "file", onChange: handleChangeFile, disabled: submitted && !errorMessage }),
-                    React__default.createElement(FormGroup, null,
-                        React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: fileType === FileType.GFF3 && importFeatures, onChange: () => {
-                                    setImportFeatures(!importFeatures);
-                                }, disabled: fileType !== FileType.GFF3 ||
-                                    (submitted && !errorMessage) }), label: "Also load features from GFF3 file" }))))),
+                React__default.createElement(Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelFastaInput', onChange: handleAccordionChange('panelFastaInput') },
+                    React__default.createElement(AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelFastaInput' ? (React__default.createElement(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (React__default.createElement(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelFastaInputd-content", id: "panelFastaInputd-header" },
+                        React__default.createElement(Typography, { component: "span" }, "FASTA input")),
+                    React__default.createElement(AccordionDetails, { className: classes.accordionDetails },
+                        React__default.createElement(FormGroup, null,
+                            React__default.createElement(FormControlLabel, { "data-testid": "files-on-url-checkbox", control: React__default.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__default.createElement(Box, { display: "flex", alignItems: "center" },
+                                    "Use external URLs",
+                                    React__default.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__default.createElement(IconButton, { size: "small" },
+                                            React__default.createElement(InfoIcon, { sx: { fontSize: 18 } })))) }),
+                            React__default.createElement(FormControlLabel, { "data-testid": "sequence-is-editable-checkbox", control: React__default.createElement(Checkbox, { onChange: () => {
+                                        setSequenceIsEditable(!sequenceIsEditable);
+                                    } }), checked: sequenceIsEditable, disabled: fileType === FileType.EXTERNAL, label: React__default.createElement(Box, { display: "flex", alignItems: "center" },
+                                    "Store sequence in database",
+                                    React__default.createElement(Tooltip, { title: "Enables users to edit the genomic sequence, but comes with performance impacts. Use with care.", placement: "top-start" },
+                                        React__default.createElement(IconButton, { size: "small" },
+                                            React__default.createElement(InfoIcon, { sx: { fontSize: 18 } })))) }),
+                            React__default.createElement(FormControlLabel, { "data-testid": "fasta-is-gzip-checkbox", control: React__default.createElement(Checkbox, { checked: isGzip, onChange: () => {
+                                        if (sequenceIsEditable) {
+                                            setIsGzip(!isGzip);
+                                        }
+                                        else {
+                                            setIsGzip(true);
+                                        }
+                                    }, disabled: !sequenceIsEditable }), label: "FASTA is gzip compressed" }),
+                            fileType === FileType.BGZIP_FASTA ||
+                                fileType === FileType.GFF3 ? (React__default.createElement(Table, { size: "small", sx: { mt: 2 } },
+                                React__default.createElement(TableBody, null,
+                                    React__default.createElement(TableRow, null),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.createElement(Box, { display: "flex", alignItems: "center" },
+                                            React__default.createElement("span", null, "FASTA"),
+                                            React__default.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__default.createElement(IconButton, { size: "small" },
+                                                    React__default.createElement(InfoIcon, { sx: { fontSize: 18 } }))))),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.createElement("input", { "data-testid": "fasta-input-file", type: "file", onChange: (e) => {
+                                                setFastaFile(e.target.files?.item(0) ?? null);
+                                            }, disabled: submitted && !errorMessage })),
+                                    React__default.createElement(TableRow, null),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA index (.fai)"),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.createElement("input", { "data-testid": "fai-input-file", type: "file", onChange: (e) => {
+                                                setFastaIndexFile(e.target.files?.item(0) ?? null);
+                                            }, disabled: (submitted && !errorMessage) || sequenceIsEditable })),
+                                    React__default.createElement(TableRow, null),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA binary index (.gzi)"),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.createElement("input", { "data-testid": "gzi-input-file", type: "file", onChange: (e) => {
+                                                setFastaGziIndexFile(e.target.files?.item(0) ?? null);
+                                            }, disabled: (submitted && !errorMessage) || sequenceIsEditable }))))) : (React__default.createElement(Table, { size: "small", sx: { mt: 2 } },
+                                React__default.createElement(TableBody, null,
+                                    React__default.createElement(TableRow, null),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.createElement(Box, { display: "flex", alignItems: "center" },
+                                            React__default.createElement("span", null, "FASTA"),
+                                            React__default.createElement(Tooltip, { title: "Remote FASTA input must be compressed with bgzip and indexed with samtools faidx (or equivalent)" },
+                                                React__default.createElement(IconButton, { size: "small" },
+                                                    React__default.createElement(InfoIcon, { sx: { fontSize: 18 } }))))),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.createElement(TextField, { "data-testid": "fasta-input-url", variant: "outlined", value: fastaUrl, error: !validFastaUrl, onChange: (e) => {
+                                                setFastaUrl(e.target.value);
+                                            }, disabled: submitted && !errorMessage, slotProps: {
+                                                input: {
+                                                    startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                                                        React__default.createElement(LinkIcon, null))),
+                                                },
+                                            } })),
+                                    React__default.createElement(TableRow, null),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA index (.fai)"),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.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__default.createElement(InputAdornment, { position: "start" },
+                                                        React__default.createElement(LinkIcon, null))),
+                                                },
+                                            } })),
+                                    React__default.createElement(TableRow, null),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } }, "FASTA binary index (.gzi)"),
+                                    React__default.createElement(TableCell, { style: { borderBottomWidth: 0 } },
+                                        React__default.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__default.createElement(InputAdornment, { position: "start" },
+                                                        React__default.createElement(LinkIcon, null))),
+                                                },
+                                            } })))))))),
+                React__default.createElement(Accordion, { disableGutters: true, elevation: 0, square: true, className: classes.accordion, expanded: expanded === 'panelGffInput', onChange: handleAccordionChange('panelGffInput') },
+                    React__default.createElement(AccordionSummary, { className: classes.accordionSummary, expandIcon: expanded === 'panelGffInput' ? (React__default.createElement(RadioButtonCheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', ml: 5 } })) : (React__default.createElement(RadioButtonUncheckedIcon, { className: classes.radioIcon, sx: { fontSize: '1.2rem', mr: 5 } })), "aria-controls": "panelGffInputd-content" },
+                        React__default.createElement(Typography, { component: "span" },
+                            "GFF3 input",
+                            React__default.createElement(Tooltip, { title: "GFF3 must includes FASTA sequences. File can be gzip compressed." },
+                                React__default.createElement(InfoIcon, { className: classes.radioIcon, sx: { fontSize: 18 } })))),
+                    React__default.createElement(AccordionDetails, { className: classes.accordionDetails },
+                        React__default.createElement(Box, { style: { marginTop: 20 } },
+                            React__default.createElement("input", { "data-testid": "gff3-input-file", type: "file", disabled: submitted && !errorMessage, onChange: (e) => {
+                                    setFastaFile(e.target.files?.item(0) ?? null);
+                                    setFileType(FileType.GFF3);
+                                } }),
+                            React__default.createElement(FormGroup, { style: { display: 'grid' } },
+                                React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: importFeatures, onChange: () => {
+                                            setImportFeatures(!importFeatures);
+                                        }, disabled: submitted && !errorMessage }), label: "Load features from GFF3 file" }),
+                                React__default.createElement(FormControlLabel, { "data-testid": "gff3-is-gzip-checkbox", control: React__default.createElement(Checkbox, { checked: isGzip, onChange: () => {
+                                            setIsGzip(!isGzip);
+                                        }, disabled: submitted && !errorMessage }), label: "GFF3 is gzip compressed" })))))),
             React__default.createElement(DialogActions, null,
-                React__default.createElement(Button, { disabled: !validAsm ||
-                        !((assemblyName && file) ??
-                            (assemblyName &&
-                                fastaFile &&
-                                fastaIndexFile &&
-                                validFastaFile &&
-                                validFastaIndexFile)) ||
-                        submitted, variant: "contained", type: "submit" }, submitted ? 'Submitting...' : 'Submit'),
+                React__default.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__default.createElement(Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
         errorMessage ? (React__default.createElement(DialogContent, null,
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
@@ -551,7 +766,16 @@ const genericEnglishStopwords = new Set([
     'don',
     'should',
     'now',
-    ...'1234567890',
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
 ]);
 /**
  * The set of stopwords we use for fulltext indexing. Currently
@@ -1288,7 +1512,9 @@ const OntologyRecordType = types
                 return;
             }
             void self.loadEquivalentTypes('gene');
+            void self.loadEquivalentTypes('pseudogene');
             void self.loadEquivalentTypes('transcript');
+            void self.loadEquivalentTypes('pseudogenic_transcript');
             void self.loadEquivalentTypes('CDS');
             void self.loadEquivalentTypes('mRNA');
             reaction.dispose();
@@ -2258,7 +2484,7 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
         await changeManager.submit(change, { updateJobsManager: true });
     }
     return (React__default.createElement(Dialog, { open: true, title: "Import Features from GFF3 file", handleClose: handleClose, maxWidth: false, "data-testid": "import-features-dialog" },
-        loading ? React__default.createElement(LinearProgress, null) : null,
+        loading ? React__default.createElement(LinearProgress$1, null) : null,
         React__default.createElement("form", { onSubmit: onSubmit },
             React__default.createElement(DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
                 React__default.createElement(DialogContentText, null, "Select assembly"),
@@ -2586,462 +2812,50 @@ function ManageUsers({ changeManager, handleClose, session, }) {
             React__default.createElement(DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
-/* eslint-disable @typescript-eslint/unbound-method */
-// interface TermAutocompleteResult extends TermValue {
-//   label: string[]
-//   match: string
-//   category: string[]
-//   taxon: string
-//   taxon_label: string
-//   highlight: string
-//   has_highlight: boolean
-// }
-// interface TermAutocompleteResponse {
-//   docs: TermAutocompleteResult[]
-// }
-// const hiliteRegex = /(?<=<em class="hilite">)(.*?)(?=<\/em>)/g
-function TermTagWithTooltip({ getTagProps, index, ontology, termId, }) {
-    const manager = getParent(ontology, 2);
-    const [description, setDescription] = React.useState('');
-    const [errorMessage, setErrorMessage] = React.useState('');
-    React.useEffect(() => {
-        const controller = new AbortController();
-        const { signal } = controller;
-        async function fetchDescription() {
-            const termUrl = manager.expandPrefixes(termId);
-            const db = await ontology.dataStore?.db;
-            if (!db || signal.aborted) {
-                return;
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+function OpenLocalFile({ handleClose, session }) {
+    const { apolloDataStore } = session;
+    const { addAssembly, addSessionAssembly, assemblyManager, notify } = session;
+    const [file, setFile] = useState(null);
+    const [assemblyName, setAssemblyName] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    const [submitted, setSubmitted] = useState(false);
+    const theme = useTheme();
+    function handleChangeFile(e) {
+        const selectedFile = e.target.files?.item(0);
+        if (!selectedFile) {
+            return;
+        }
+        setErrorMessage('');
+        setFile(selectedFile);
+        if (!assemblyName) {
+            const fileName = selectedFile.name;
+            const lastDotIndex = fileName.lastIndexOf('.');
+            if (lastDotIndex === -1) {
+                setAssemblyName(fileName);
             }
-            const term = await db
-                .transaction('nodes')
-                .objectStore('nodes')
-                .get(termUrl);
-            if (term && term.lbl && !signal.aborted) {
-                setDescription(term.lbl || 'no label');
+            else {
+                setAssemblyName(fileName.slice(0, lastDotIndex));
             }
         }
-        fetchDescription().catch((error) => {
-            if (!signal.aborted) {
-                setErrorMessage(String(error));
-            }
-        });
-        return () => {
-            controller.abort();
-        };
-    }, [termId, ontology, manager]);
-    return (React.createElement(Tooltip, { title: description },
-        React.createElement("div", null,
-            React.createElement(Chip, { label: errorMessage || manager.applyPrefixes(termId), color: errorMessage ? 'error' : 'default', size: "small", ...getTagProps({ index }) }))));
-}
-function OntologyTermMultiSelect({ includeDeprecated, onChange, ontologyName, ontologyVersion, session, value: initialValue, }) {
-    const { ontologyManager } = session.apolloDataStore;
-    const ontology = ontologyManager.findOntology(ontologyName, ontologyVersion);
-    const [value, setValue] = React.useState(initialValue.map((id) => ({ term: { id, type: 'CLASS' } })));
-    const [inputValue, setInputValue] = React.useState('');
-    const [options, setOptions] = React.useState([]);
-    const [loading, setLoading] = React.useState(false);
-    const [errorMessage, setErrorMessage] = React.useState('');
-    const getOntologyTerms = React.useMemo(() => debounce(async (request, callback) => {
-        if (!ontology) {
-            return;
+    }
+    async function onSubmit(event) {
+        event.preventDefault();
+        setErrorMessage('');
+        setSubmitted(true);
+        if (!file) {
+            throw new Error('No file selected');
         }
-        const { dataStore } = ontology;
-        if (!dataStore) {
-            return;
-        }
-        const { input, signal } = request;
-        try {
-            const matches = await dataStore.getTermsByFulltext(input, undefined, signal);
-            // aggregate the matches by term
-            const byTerm = new Map();
-            const options = [];
-            for (const match of matches) {
-                if (!isOntologyClass(match.term) ||
-                    (!includeDeprecated && isDeprecated(match.term))) {
-                    continue;
-                }
-                let slot = byTerm.get(match.term.id);
-                if (!slot) {
-                    slot = { term: match.term, matches: [] };
-                    byTerm.set(match.term.id, slot);
-                    options.push(slot);
-                }
-                slot.matches.push(match);
-            }
-            callback(options);
-        }
-        catch (error) {
-            if (!isAbortException(error)) {
-                setErrorMessage(String(error));
-            }
-        }
-    }, 400), [includeDeprecated, ontology]);
-    React.useEffect(() => {
-        const aborter = new AbortController();
-        const { signal } = aborter;
-        if (inputValue === '') {
-            setOptions([]);
-            return;
-        }
-        setLoading(true);
-        void getOntologyTerms({ input: inputValue, signal }, (results) => {
-            let newOptions = [];
-            if (value.length > 0) {
-                newOptions = value;
-            }
-            if (results) {
-                newOptions = [...newOptions, ...results];
-            }
-            setOptions(newOptions);
-            setLoading(false);
-        });
-        return () => {
-            aborter.abort();
-        };
-    }, [getOntologyTerms, ontology, includeDeprecated, inputValue, value]);
-    if (!ontology) {
-        return null;
-    }
-    const extraTextFieldParams = {};
-    if (errorMessage) {
-        extraTextFieldParams.error = true;
-        extraTextFieldParams.helperText = errorMessage;
-    }
-    return (React.createElement(Autocomplete, { getOptionLabel: (option) => ontologyManager.applyPrefixes(option.term.id), filterOptions: (terms) => terms.filter((t) => isOntologyClass(t.term)), options: options, autoComplete: true, includeInputInList: true, filterSelectedOptions: true, value: value, loading: loading, isOptionEqualToValue: (option, v) => ontologyManager.applyPrefixes(option.term.id) ===
-            ontologyManager.applyPrefixes(v.term.id), noOptionsText: inputValue ? 'No matches' : 'Start typing to search', onChange: (_, newValue) => {
-            setOptions(newValue ? [...newValue, ...options] : options);
-            onChange(newValue.map((v) => ontologyManager.applyPrefixes(v.term.id)));
-            setValue(newValue);
-        }, onInputChange: (event, newInputValue) => {
-            if (newInputValue) {
-                setLoading(true);
-            }
-            setOptions([]);
-            setInputValue(newInputValue);
-        }, multiple: true, renderInput: (params) => (React.createElement(TextField, { ...params, ...extraTextFieldParams, variant: "outlined", fullWidth: true })), renderOption: (props, option) => (React.createElement(Option, { ...props, ontologyManager: ontologyManager, option: option, inputValue: inputValue })), renderTags: (v, getTagProps) => v.map((option, index) => (React.createElement(TermTagWithTooltip, { termId: option.term.id, index: index, ontology: ontology, getTagProps: getTagProps, key: option.term.id }))) }));
-}
-function HighlightedText(props) {
-    const { search, str } = props;
-    const highlights = highlightMatch(str, search, {
-        insideWords: true,
-        findAllOccurrences: true,
-    });
-    const parts = highlightParse(str, highlights);
-    return (React.createElement(React.Fragment, null, parts.map((part, index) => (React.createElement(Typography, { key: index, component: "span", sx: { fontWeight: part.highlight ? 'bold' : 'regular' }, variant: "body2", color: "text.secondary" }, part.text)))));
-}
-function Option(props) {
-    const { inputValue, ontologyManager, option, ...other } = props;
-    const matches = option.matches ?? [];
-    const fields = matches
-        .filter((match) => match.field.jsonPath !== '$.lbl')
-        .map((match) => {
-        return (React.createElement(React.Fragment, { key: `option-${match.term.id}-${match.str}` },
-            React.createElement(Typography, { component: "dt", variant: "body2", color: "text.secondary" }, match.field.displayName),
-            React.createElement("dd", null,
-                React.createElement(HighlightedText, { str: match.str, search: inputValue }))));
-    });
-    // const lblScore = matches
-    //   .filter((match) => match.field.jsonPath === '$.lbl')
-    //   .map((m) => m.score)
-    //   .join(', ')
-    return (React.createElement("li", { ...other },
-        React.createElement(Grid2, { container: true },
-            React.createElement(Grid2, null,
-                React.createElement(Typography, { component: "span" }, ontologyManager.applyPrefixes(option.term.id)),
-                ' ',
-                React.createElement(HighlightedText, { str: option.term.lbl ?? '(no label)', search: inputValue }),
-                ' ',
-                React.createElement("dl", null, fields)))));
-}
-
-const reservedKeys$1 = new Map([
-    [
-        'Gene Ontology',
-        (props) => {
-            return React__default.createElement(OntologyTermMultiSelect, { ...props, ontologyName: "Gene Ontology" });
-        },
-    ],
-    [
-        'Sequence Ontology',
-        (props) => {
-            return (React__default.createElement(OntologyTermMultiSelect, { ...props, ontologyName: "Sequence Ontology" }));
-        },
-    ],
-]);
-const useStyles$e = makeStyles()((theme) => ({
-    attributeInput: {
-        maxWidth: 600,
-    },
-    newAttributePaper: {
-        padding: theme.spacing(2),
-    },
-    attributeName: {
-        background: theme.palette.secondary.main,
-        color: theme.palette.secondary.contrastText,
-        padding: theme.spacing(1),
-    },
-}));
-const reservedTerms$1 = [
-    'ID',
-    'Name',
-    'Alias',
-    'Target',
-    'Gap',
-    'Derives_from',
-    'Note',
-    'Dbxref',
-    'Ontology',
-    'Is_Circular',
-];
-function CustomAttributeValueEditor$1(props) {
-    const { onChange, value } = props;
-    return (React__default.createElement(TextField, { type: "text", value: value, onChange: (event) => {
-            onChange(event.target.value.split(','));
-        }, variant: "outlined", fullWidth: true, helperText: "Separate multiple values for the attribute with commas" }));
-}
-function ModifyFeatureAttribute({ changeManager, handleClose, session, sourceAssemblyId, sourceFeature, }) {
-    const { notify } = session;
-    const { internetAccounts } = getRoot(session);
-    const internetAccount = useMemo(() => {
-        return internetAccounts.find((ia) => ia.type === 'ApolloInternetAccount');
-    }, [internetAccounts]);
-    const role = internetAccount ? internetAccount.role : 'admin';
-    const editable = ['admin', 'user'].includes(role ?? '');
-    const [errorMessage, setErrorMessage] = useState('');
-    const [attributes, setAttributes] = useState(Object.fromEntries([...sourceFeature.attributes.entries()].map(([key, value]) => {
-        if (key.startsWith('gff_')) {
-            const newKey = key.slice(4);
-            const capitalizedKey = newKey.charAt(0).toUpperCase() + newKey.slice(1);
-            return [capitalizedKey, getSnapshot(value)];
-        }
-        if (key === '_id') {
-            return ['ID', getSnapshot(value)];
-        }
-        return [key, getSnapshot(value)];
-    })));
-    const [showAddNewForm, setShowAddNewForm] = useState(false);
-    const [newAttributeKey, setNewAttributeKey] = useState('');
-    const { classes } = useStyles$e();
-    async function onSubmit(event) {
-        event.preventDefault();
-        setErrorMessage('');
-        const attrs = {};
-        if (attributes) {
-            for (const [key, val] of Object.entries(attributes)) {
-                if (!val) {
-                    continue;
-                }
-                const newKey = key.toLowerCase();
-                if (newKey === 'parent') {
-                    continue;
-                }
-                if ([...reservedKeys$1.keys()].includes(key)) {
-                    attrs[key] = val;
-                    continue;
-                }
-                switch (key) {
-                    case 'ID': {
-                        attrs._id = val;
-                        break;
-                    }
-                    case 'Name': {
-                        attrs.gff_name = val;
-                        break;
-                    }
-                    case 'Alias': {
-                        attrs.gff_alias = val;
-                        break;
-                    }
-                    case 'Target': {
-                        attrs.gff_target = val;
-                        break;
-                    }
-                    case 'Gap': {
-                        attrs.gff_gap = val;
-                        break;
-                    }
-                    case 'Derives_from': {
-                        attrs.gff_derives_from = val;
-                        break;
-                    }
-                    case 'Note': {
-                        attrs.gff_note = val;
-                        break;
-                    }
-                    case 'Dbxref': {
-                        attrs.gff_dbxref = val;
-                        break;
-                    }
-                    case 'Ontology_term': {
-                        attrs.gff_ontology_term = val;
-                        break;
-                    }
-                    case 'Is_circular': {
-                        attrs.gff_is_circular = val;
-                        break;
-                    }
-                    default: {
-                        attrs[key.toLowerCase()] = val;
-                    }
-                }
-            }
-        }
-        const change = new FeatureAttributeChange({
-            changedIds: [sourceFeature._id],
-            typeName: 'FeatureAttributeChange',
-            assembly: sourceAssemblyId,
-            featureId: sourceFeature._id,
-            attributes: attrs,
-        });
-        await changeManager.submit(change);
-        notify('Feature attributes modified successfully', 'success');
-        handleClose();
-        event.preventDefault();
-    }
-    function handleAddNewAttributeChange() {
-        setErrorMessage('');
-        if (newAttributeKey.trim().length === 0) {
-            setErrorMessage('Attribute key is mandatory');
-            return;
-        }
-        if (newAttributeKey === 'Parent') {
-            setErrorMessage('"Parent" -key is handled internally and it cannot be modified manually');
-            return;
-        }
-        if (newAttributeKey in attributes) {
-            setErrorMessage(`Attribute "${newAttributeKey}" already exists`);
-            return;
-        }
-        if (/^[A-Z]/.test(newAttributeKey) &&
-            !reservedTerms$1.includes(newAttributeKey) &&
-            ![...reservedKeys$1.keys()].includes(newAttributeKey)) {
-            setErrorMessage(`Key cannot starts with uppercase letter unless key is one of these: ${reservedTerms$1.join(', ')}`);
-            return;
-        }
-        setAttributes({ ...attributes, [newAttributeKey]: [] });
-        setShowAddNewForm(false);
-        setNewAttributeKey('');
-    }
-    function deleteAttribute(key) {
-        setErrorMessage('');
-        const { [key]: remove, ...rest } = attributes;
-        setAttributes(rest);
-    }
-    function makeOnChange(id) {
-        return (newValue) => {
-            setAttributes({ ...attributes, [id]: newValue });
-        };
-    }
-    function handleRadioButtonChange(event, value) {
-        if (value === 'custom') {
-            setNewAttributeKey('');
-        }
-        else if (reservedKeys$1.has(value)) {
-            setNewAttributeKey(value);
-        }
-        else {
-            setErrorMessage('Unknown attribute type');
-        }
-    }
-    const hasEmptyAttributes = Object.values(attributes).some((value) => value.length === 0 || value.includes(''));
-    return (React__default.createElement(Dialog, { open: true, title: "Feature attributes", handleClose: handleClose, maxWidth: false, "data-testid": "modify-feature-attribute" },
-        React__default.createElement("form", { onSubmit: onSubmit },
-            React__default.createElement(DialogContent, null,
-                React__default.createElement(Grid2, { container: true, direction: "column", spacing: 1 },
-                    Object.entries(attributes).map(([key, value]) => {
-                        const EditorComponent = reservedKeys$1.get(key) ?? CustomAttributeValueEditor$1;
-                        return (React__default.createElement(Grid2, { container: true, spacing: 3, alignItems: "center", key: key },
-                            React__default.createElement(Grid2, null,
-                                React__default.createElement(Paper, { variant: "outlined", className: classes.attributeName },
-                                    React__default.createElement(Typography, null, key))),
-                            React__default.createElement(Grid2, { flexGrow: 1 },
-                                React__default.createElement(EditorComponent, { session: session, value: value, onChange: makeOnChange(key) })),
-                            React__default.createElement(Grid2, null,
-                                React__default.createElement(IconButton, { "aria-label": "delete", size: "medium", disabled: !editable, onClick: () => {
-                                        deleteAttribute(key);
-                                    } },
-                                    React__default.createElement(DeleteIcon, { fontSize: "medium", key: key })))));
-                    }),
-                    React__default.createElement(Grid2, null,
-                        React__default.createElement(Button, { color: "primary", variant: "contained", disabled: showAddNewForm || !editable, onClick: () => {
-                                setShowAddNewForm(true);
-                            } }, "Add new")),
-                    showAddNewForm ? (React__default.createElement(Grid2, null,
-                        React__default.createElement(Paper, { elevation: 8, className: classes.newAttributePaper },
-                            React__default.createElement(Grid2, { container: true, direction: "column" },
-                                React__default.createElement(Grid2, null,
-                                    React__default.createElement(FormControl, null,
-                                        React__default.createElement(FormLabel, { id: "attribute-radio-button-group" }, "Select attribute type"),
-                                        React__default.createElement(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", defaultValue: "custom", name: "radio-buttons-group", onChange: handleRadioButtonChange },
-                                            React__default.createElement(FormControlLabel, { value: "custom", control: React__default.createElement(Radio, null), disableTypography: true, label: React__default.createElement(Grid2, { container: true, spacing: 1, alignItems: "center" },
-                                                    React__default.createElement(Grid2, null,
-                                                        React__default.createElement(Typography, null, "Custom")),
-                                                    React__default.createElement(Grid2, null,
-                                                        React__default.createElement(TextField, { label: "Custom attribute key", variant: "outlined", value: reservedKeys$1.has(newAttributeKey)
-                                                                ? ''
-                                                                : newAttributeKey, disabled: reservedKeys$1.has(newAttributeKey), onChange: (event) => {
-                                                                setNewAttributeKey(event.target.value);
-                                                            } }))) }),
-                                            [...reservedKeys$1.keys()].map((key) => (React__default.createElement(FormControlLabel, { key: key, value: key, control: React__default.createElement(Radio, null), label: key })))))),
-                                React__default.createElement(Grid2, null,
-                                    React__default.createElement(DialogActions, null,
-                                        React__default.createElement(Button, { key: "addButton", color: "primary", variant: "contained", style: { margin: 2 }, onClick: handleAddNewAttributeChange, disabled: !newAttributeKey }, "Add"),
-                                        React__default.createElement(Button, { key: "cancelAddButton", variant: "outlined", type: "submit", onClick: () => {
-                                                setShowAddNewForm(false);
-                                                setNewAttributeKey('');
-                                                setErrorMessage('');
-                                            } }, "Cancel"))))))) : null),
-                errorMessage ? (React__default.createElement(DialogContentText, { color: "error" }, errorMessage)) : null),
-            React__default.createElement(DialogActions, null,
-                React__default.createElement(Button, { variant: "contained", type: "submit", disabled: showAddNewForm || hasEmptyAttributes || !editable }, "Submit changes"),
-                React__default.createElement(Button, { variant: "outlined", type: "submit", disabled: showAddNewForm, onClick: handleClose }, "Cancel")))));
-}
-
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-function OpenLocalFile({ handleClose, session }) {
-    const { apolloDataStore } = session;
-    const { addAssembly, addSessionAssembly, assemblyManager, notify } = session;
-    const [file, setFile] = useState(null);
-    const [assemblyName, setAssemblyName] = useState('');
-    const [errorMessage, setErrorMessage] = useState('');
-    const [submitted, setSubmitted] = useState(false);
-    const theme = useTheme();
-    function handleChangeFile(e) {
-        const selectedFile = e.target.files?.item(0);
-        if (!selectedFile) {
-            return;
-        }
-        setErrorMessage('');
-        setFile(selectedFile);
-        if (!assemblyName) {
-            const fileName = selectedFile.name;
-            const lastDotIndex = fileName.lastIndexOf('.');
-            if (lastDotIndex === -1) {
-                setAssemblyName(fileName);
-            }
-            else {
-                setAssemblyName(fileName.slice(0, lastDotIndex));
-            }
-        }
-    }
-    async function onSubmit(event) {
-        event.preventDefault();
-        setErrorMessage('');
-        setSubmitted(true);
-        if (!file) {
-            throw new Error('No file selected');
-        }
-        // Right now we are not using stream because there was a problem with 'pipe' in ReadStream
-        const fileData = await new Response(file).text();
-        const assemblyId = `${assemblyName}-${file.name}-${nanoid(8)}`;
-        try {
-            await loadAssemblyIntoClient(assemblyId, fileData, apolloDataStore);
-        }
-        catch (error) {
-            console.error(error);
-            notify(`Error loading GFF3 ${file.name}, ${String(error)}`, 'error');
-            handleClose();
+        // Right now we are not using stream because there was a problem with 'pipe' in ReadStream
+        const fileData = await new Response(file).text();
+        const assemblyId = `${assemblyName}-${file.name}-${nanoid(8)}`;
+        try {
+            await loadAssemblyIntoClient(assemblyId, fileData, apolloDataStore);
+        }
+        catch (error) {
+            console.error(error);
+            notify(`Error loading GFF3 ${file.name}, ${String(error)}`, 'error');
+            handleClose();
             return;
         }
         const assemblyConfig = {
@@ -4100,6 +3914,15 @@ class ApolloSequenceAdapter extends BaseSequenceAdapter {
                     return;
                 }
                 const backendDriver = dataStore.getBackendDriver(assemblyId);
+                const regions = await backendDriver.getRegions(regionWithAssemblyName.assemblyName);
+                const region = regions.find((region) => region.refName === regionWithAssemblyName.refName);
+                if (!region) {
+                    observer.error('Cannot get region');
+                    return;
+                }
+                if (regionWithAssemblyName.end > region.end) {
+                    regionWithAssemblyName.end = region.end;
+                }
                 const { seq } = await backendDriver.getSequence(regionWithAssemblyName);
                 observer.next(new SimpleFeature({
                     id: `${refName} ${start}-${end}`,
@@ -4968,16 +4791,52 @@ const isGeneOrTranscript = (annotationFeature, apolloSessionModel) => {
         throw new Error('featureTypeOntology is undefined');
     }
     return (featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
-        featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
-        featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript'));
+        featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogene') ||
+        featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogenic_transcript'));
+};
+const isGene = (annotationFeature, apolloSessionModel) => {
+    const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    return (featureTypeOntology.isTypeOf(annotationFeature.type, 'gene') ||
+        featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogene'));
 };
 const isTranscript = (annotationFeature, apolloSessionModel) => {
     const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
     if (!featureTypeOntology) {
         throw new Error('featureTypeOntology is undefined');
     }
-    return (featureTypeOntology.isTypeOf(annotationFeature.type, 'mRNA') ||
-        featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript'));
+    return (featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogenic_transcript'));
+};
+const getFeatureId = (feature) => {
+    const { attributes } = feature;
+    const id = attributes?.id;
+    if (id) {
+        return id[0];
+    }
+    return feature.type;
+};
+const getFeatureNameOrId = (feature, apolloSessionModel) => {
+    const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        return getFeatureId(feature);
+    }
+    let attrName = '';
+    if (featureTypeOntology.isTypeOf(feature.type, 'gene')) {
+        attrName = 'gene_name';
+    }
+    if (featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
+        attrName = 'transcript_name';
+    }
+    const { attributes } = feature;
+    const name = attributes?.[attrName];
+    if (name) {
+        return name[0];
+    }
+    return getFeatureId(feature);
 };
 function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refSeqId, session, }) {
     const apolloSessionModel = session;
@@ -5002,6 +4861,9 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     const getFeatures = (min, max) => {
         const filteredFeatures = [];
         for (const [, f] of features) {
+            if (f.type === 'chromosome') {
+                continue;
+            }
             const featureSnapshot = getSnapshot(f);
             if (min >= featureSnapshot.min && max <= featureSnapshot.max) {
                 filteredFeatures.push(featureSnapshot);
@@ -5011,27 +4873,27 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     };
     useEffect(() => {
         setErrorMessage('');
-        if (checkedChildrens.length === 0) {
-            setParentFeatureChecked(false);
-            return;
-        }
+        let mins = [];
+        let maxes = [];
         if (annotationFeature.children) {
             const checkedAnnotationFeatureChildren = Object.values(annotationFeature.children)
                 .filter((child) => isTranscript(child, apolloSessionModel))
                 .filter((child) => checkedChildrens.includes(child._id));
-            const mins = checkedAnnotationFeatureChildren.map((f) => f.min);
-            const maxes = checkedAnnotationFeatureChildren.map((f) => f.max);
-            const min = Math.min(...mins);
-            const max = Math.max(...maxes);
-            const filteredFeatures = getFeatures(min, max);
-            setDestinationFeatures(filteredFeatures);
-            if (filteredFeatures.length === 0 &&
-                checkedChildrens.length > 0 &&
-                !parentFeatureChecked) {
-                setErrorMessage('No destination features found');
-            }
-        }
-    }, [checkedChildrens]);
+            mins = checkedAnnotationFeatureChildren.map((f) => f.min);
+            maxes = checkedAnnotationFeatureChildren.map((f) => f.max);
+        }
+        const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
+        if (featureTypeOntology &&
+            featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript')) {
+            mins = [annotationFeature.min, ...mins];
+            maxes = [annotationFeature.max, ...maxes];
+        }
+        const min = Math.min(...mins);
+        const max = Math.max(...maxes);
+        const filteredFeatures = getFeatures(min, max);
+        setDestinationFeatures(filteredFeatures);
+        setSelectedDestinationFeature(filteredFeatures[0]);
+    }, [checkedChildrens, parentFeatureChecked]);
     const handleParentFeatureCheck = (event) => {
         const isChecked = event.target.checked;
         setParentFeatureChecked(isChecked);
@@ -5048,12 +4910,52 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     };
     const handleCreateApolloAnnotation = async () => {
         if (parentFeatureChecked) {
-            const change = new AddFeatureChange({
-                changedIds: [annotationFeature._id],
-                typeName: 'AddFeatureChange',
-                assembly: assembly.name,
-                addedFeature: annotationFeature,
-            });
+            let change;
+            if (isGene(annotationFeature, apolloSessionModel)) {
+                if (annotationFeature.children &&
+                    checkedChildrens.length !==
+                        Object.values(annotationFeature.children).length) {
+                    const childrens = {};
+                    for (const childId of checkedChildrens) {
+                        childrens[childId] = annotationFeature.children[childId];
+                    }
+                    change = new AddFeatureChange({
+                        changedIds: [annotationFeature._id],
+                        typeName: 'AddFeatureChange',
+                        assembly: assembly.name,
+                        addedFeature: {
+                            ...annotationFeature,
+                            children: childrens,
+                        },
+                    });
+                }
+                else {
+                    change = new AddFeatureChange({
+                        changedIds: [annotationFeature._id],
+                        typeName: 'AddFeatureChange',
+                        assembly: assembly.name,
+                        addedFeature: annotationFeature,
+                    });
+                }
+            }
+            if (isTranscript(annotationFeature, apolloSessionModel)) {
+                if (selectedDestinationFeature) {
+                    change = new AddFeatureChange({
+                        parentFeatureId: selectedDestinationFeature._id,
+                        changedIds: [selectedDestinationFeature._id],
+                        typeName: 'AddFeatureChange',
+                        assembly: assembly.name,
+                        addedFeature: annotationFeature,
+                    });
+                }
+                else {
+                    setErrorMessage('There is no destination gene for this transcript');
+                    return;
+                }
+            }
+            if (!change) {
+                return;
+            }
             await apolloSessionModel.apolloDataStore.changeManager.submit(change);
             session.notify('Annotation added successfully', 'success');
             handleClose();
@@ -5075,27 +4977,28 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
                     addedFeature: child,
                 });
                 await apolloSessionModel.apolloDataStore.changeManager.submit(change);
-                session.notify('Annotation added successfully', 'success');
-                handleClose();
             }
+            session.notify('Annotation added successfully', 'success');
+            handleClose();
         }
     };
     return (React__default.createElement(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm" },
         React__default.createElement(DialogTitle, { fontSize: 15 }, "Select the feature to be copied to apollo track"),
         React__default.createElement(DialogContent, null,
             React__default.createElement(Box, { sx: { ml: 3 } },
-                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${annotationFeature.type}:${annotationFeature.min}..${annotationFeature.max}` })),
+                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${getFeatureNameOrId(annotationFeature, apolloSessionModel)} (${annotationFeature.min + 1}..${annotationFeature.max})` })),
                 annotationFeature.children && (React__default.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 } }, Object.values(annotationFeature.children)
                     .filter((child) => isTranscript(child, apolloSessionModel))
                     .map((child) => (React__default.createElement(FormControlLabel, { key: child._id, control: React__default.createElement(Checkbox, { size: "small", checked: checkedChildrens.includes(child._id), onChange: (e) => {
                             handleChildFeatureCheck(e, child);
-                        } }), label: `${child.type}:${child.min}..${child.max}` })))))),
-            !parentFeatureChecked &&
-                checkedChildrens.length > 0 &&
-                destinationFeatures.length > 0 && (React__default.createElement(Box, { sx: { ml: 3 } },
+                        } }), label: `${getFeatureNameOrId(child, apolloSessionModel)} (${child.min + 1}..${child.max})` })))))),
+            destinationFeatures.length > 0 &&
+                ((!parentFeatureChecked && checkedChildrens.length > 0) ||
+                    (parentFeatureChecked &&
+                        isTranscript(annotationFeature, apolloSessionModel))) && (React__default.createElement(Box, { sx: { ml: 3 } },
                 React__default.createElement(Typography, { variant: "caption", fontSize: 12 }, "Select the destination feature to copy the selected features"),
                 React__default.createElement(Box, { sx: { mt: 1 } },
-                    React__default.createElement(Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange }, destinationFeatures.map((f) => (React__default.createElement(MenuItem, { key: f._id, value: f._id }, `${f.type}:${f.min}..${f.max}`)))))))),
+                    React__default.createElement(Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange }, destinationFeatures.map((f) => (React__default.createElement(MenuItem, { key: f._id, value: f._id }, `${getFeatureNameOrId(f, apolloSessionModel)} (${f.min}..${f.max})`)))))))),
         React__default.createElement(DialogActions, null,
             React__default.createElement(Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
                     (!parentFeatureChecked &&
@@ -5107,6 +5010,7 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
 }
 
 function simpleFeatureToGFF3Feature(feature, refSeqId) {
+    // eslint-disable-next-line unicorn/prefer-structured-clone
     const xfeature = JSON.parse(JSON.stringify(feature));
     const children = xfeature.subfeatures;
     const gff3Feature = [
@@ -5151,93 +5055,262 @@ function convertFeatureAttributes(feature) {
         if (defaultFields.has(key)) {
             continue;
         }
-        attributes[key] = Array.isArray(value) ? value.map(String) : [String(value)];
-    }
-    return attributes;
-}
-function annotationFromJBrowseFeature(pluggableElement) {
-    if (pluggableElement.name !== 'LinearBasicDisplay') {
-        return pluggableElement;
-    }
-    const { stateModel } = pluggableElement;
-    const newStateModel = stateModel
-        .views((self) => ({
-        getFirstRegion() {
-            const lgv = getContainingView(self);
-            return lgv.dynamicBlocks.contentBlocks[0];
-        },
-        getAssembly() {
-            const firstRegion = self.getFirstRegion();
-            const session = getSession(self);
-            const { assemblyManager } = session;
-            const { assemblyName } = firstRegion;
-            const assembly = assemblyManager.get(assemblyName);
-            if (!assembly) {
-                throw new Error(`Could not find assembly named ${assemblyName}`);
+        attributes[key] = Array.isArray(value) ? value.map(String) : [String(value)];
+    }
+    return attributes;
+}
+function annotationFromJBrowseFeature(pluggableElement) {
+    if (pluggableElement.name !== 'LinearBasicDisplay') {
+        return pluggableElement;
+    }
+    const { stateModel } = pluggableElement;
+    const newStateModel = stateModel
+        .views((self) => ({
+        getFirstRegion() {
+            const lgv = getContainingView(self);
+            return lgv.dynamicBlocks.contentBlocks[0];
+        },
+        getAssembly() {
+            const firstRegion = self.getFirstRegion();
+            const session = getSession(self);
+            const { assemblyManager } = session;
+            const { assemblyName } = firstRegion;
+            const assembly = assemblyManager.get(assemblyName);
+            if (!assembly) {
+                throw new Error(`Could not find assembly named ${assemblyName}`);
+            }
+            return assembly;
+        },
+        getRefSeqId(assembly) {
+            const firstRegion = self.getFirstRegion();
+            const { refName } = firstRegion;
+            const { refNameAliases } = assembly;
+            if (!refNameAliases) {
+                throw new Error(`Could not find aliases for ${assembly.name}`);
+            }
+            const newRefNames = [...Object.entries(refNameAliases)]
+                .filter(([id, refName]) => id !== refName)
+                .map(([id, refName]) => ({
+                _id: id,
+                name: refName,
+            }));
+            const refSeqId = newRefNames.find((item) => item.name === refName)?._id;
+            if (!refSeqId) {
+                throw new Error(`Could not find refSeqId named ${refName}`);
+            }
+            return refSeqId;
+        },
+        getAnnotationFeature(assembly) {
+            const refSeqId = self.getRefSeqId(assembly);
+            const sfeature = self.contextMenuFeature.data;
+            return jbrowseFeatureToAnnotationFeature(sfeature, refSeqId);
+        },
+    }))
+        .views((self) => {
+        const superContextMenuItems = self.contextMenuItems;
+        return {
+            contextMenuItems() {
+                const session = getSession(self);
+                const assembly = self.getAssembly();
+                const feature = self.contextMenuFeature;
+                if (!feature) {
+                    return superContextMenuItems();
+                }
+                return [
+                    ...superContextMenuItems(),
+                    {
+                        label: 'Create Apollo annotation',
+                        icon: AddIcon,
+                        onClick: () => {
+                            session.queueDialog((doneCallback) => [
+                                CreateApolloAnnotation,
+                                {
+                                    session,
+                                    handleClose: () => {
+                                        doneCallback();
+                                    },
+                                    annotationFeature: self.getAnnotationFeature(assembly),
+                                    assembly,
+                                    refSeqId: self.getRefSeqId(assembly),
+                                },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    });
+    pluggableElement.stateModel = newStateModel;
+    return pluggableElement;
+}
+
+/* eslint-disable @typescript-eslint/unbound-method */
+// interface TermAutocompleteResult extends TermValue {
+//   label: string[]
+//   match: string
+//   category: string[]
+//   taxon: string
+//   taxon_label: string
+//   highlight: string
+//   has_highlight: boolean
+// }
+// interface TermAutocompleteResponse {
+//   docs: TermAutocompleteResult[]
+// }
+// const hiliteRegex = /(?<=<em class="hilite">)(.*?)(?=<\/em>)/g
+function TermTagWithTooltip({ getTagProps, index, ontology, termId, }) {
+    const manager = getParent(ontology, 2);
+    const [description, setDescription] = React.useState('');
+    const [errorMessage, setErrorMessage] = React.useState('');
+    React.useEffect(() => {
+        const controller = new AbortController();
+        const { signal } = controller;
+        async function fetchDescription() {
+            const termUrl = manager.expandPrefixes(termId);
+            const db = await ontology.dataStore?.db;
+            if (!db || signal.aborted) {
+                return;
+            }
+            const term = await db
+                .transaction('nodes')
+                .objectStore('nodes')
+                .get(termUrl);
+            if (term && term.lbl && !signal.aborted) {
+                setDescription(term.lbl || 'no label');
+            }
+        }
+        fetchDescription().catch((error) => {
+            if (!signal.aborted) {
+                setErrorMessage(String(error));
+            }
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [termId, ontology, manager]);
+    return (React.createElement(Tooltip, { title: description },
+        React.createElement("div", null,
+            React.createElement(Chip, { label: errorMessage || manager.applyPrefixes(termId), color: errorMessage ? 'error' : 'default', size: "small", ...getTagProps({ index }) }))));
+}
+function OntologyTermMultiSelect({ includeDeprecated, onChange, ontologyName, ontologyVersion, session, value: initialValue, label, }) {
+    const { ontologyManager } = session.apolloDataStore;
+    const ontology = ontologyManager.findOntology(ontologyName, ontologyVersion);
+    const [value, setValue] = React.useState(initialValue.map((id) => ({ term: { id, type: 'CLASS' } })));
+    const [inputValue, setInputValue] = React.useState('');
+    const [options, setOptions] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const getOntologyTerms = React.useMemo(() => debounce(async (request, callback) => {
+        if (!ontology) {
+            return;
+        }
+        const { dataStore } = ontology;
+        if (!dataStore) {
+            return;
+        }
+        const { input, signal } = request;
+        try {
+            const matches = await dataStore.getTermsByFulltext(input, undefined, signal);
+            // aggregate the matches by term
+            const byTerm = new Map();
+            const options = [];
+            for (const match of matches) {
+                if (!isOntologyClass(match.term) ||
+                    (!includeDeprecated && isDeprecated(match.term))) {
+                    continue;
+                }
+                let slot = byTerm.get(match.term.id);
+                if (!slot) {
+                    slot = { term: match.term, matches: [] };
+                    byTerm.set(match.term.id, slot);
+                    options.push(slot);
+                }
+                slot.matches.push(match);
+            }
+            callback(options);
+        }
+        catch (error) {
+            if (!isAbortException(error)) {
+                setErrorMessage(String(error));
             }
-            return assembly;
-        },
-        getRefSeqId(assembly) {
-            const firstRegion = self.getFirstRegion();
-            const { refName } = firstRegion;
-            const { refNameAliases } = assembly;
-            if (!refNameAliases) {
-                throw new Error(`Could not find aliases for ${assembly.name}`);
+        }
+    }, 400), [includeDeprecated, ontology]);
+    React.useEffect(() => {
+        const aborter = new AbortController();
+        const { signal } = aborter;
+        if (inputValue === '') {
+            setOptions([]);
+            return;
+        }
+        setLoading(true);
+        void getOntologyTerms({ input: inputValue, signal }, (results) => {
+            let newOptions = [];
+            if (value.length > 0) {
+                newOptions = value;
             }
-            const newRefNames = [...Object.entries(refNameAliases)]
-                .filter(([id, refName]) => id !== refName)
-                .map(([id, refName]) => ({
-                _id: id,
-                name: refName,
-            }));
-            const refSeqId = newRefNames.find((item) => item.name === refName)?._id;
-            if (!refSeqId) {
-                throw new Error(`Could not find refSeqId named ${refName}`);
+            if (results) {
+                newOptions = [...newOptions, ...results];
             }
-            return refSeqId;
-        },
-        getAnnotationFeature(assembly) {
-            const refSeqId = self.getRefSeqId(assembly);
-            const sfeature = self.contextMenuFeature.data;
-            return jbrowseFeatureToAnnotationFeature(sfeature, refSeqId);
-        },
-    }))
-        .views((self) => {
-        const superContextMenuItems = self.contextMenuItems;
-        const session = getSession(self);
-        const assembly = self.getAssembly();
-        return {
-            contextMenuItems() {
-                const feature = self.contextMenuFeature;
-                if (!feature) {
-                    return superContextMenuItems();
-                }
-                return [
-                    ...superContextMenuItems(),
-                    {
-                        label: 'Create Apollo annotation',
-                        icon: AddIcon,
-                        onClick: () => {
-                            session.queueDialog((doneCallback) => [
-                                CreateApolloAnnotation,
-                                {
-                                    session,
-                                    handleClose: () => {
-                                        doneCallback();
-                                    },
-                                    annotationFeature: self.getAnnotationFeature(assembly),
-                                    assembly,
-                                    refSeqId: self.getRefSeqId(assembly),
-                                },
-                            ]);
-                        },
-                    },
-                ];
-            },
+            setOptions(newOptions);
+            setLoading(false);
+        });
+        return () => {
+            aborter.abort();
         };
+    }, [getOntologyTerms, ontology, includeDeprecated, inputValue, value]);
+    if (!ontology) {
+        return null;
+    }
+    const extraTextFieldParams = {};
+    if (errorMessage) {
+        extraTextFieldParams.error = true;
+        extraTextFieldParams.helperText = errorMessage;
+    }
+    return (React.createElement(Autocomplete, { getOptionLabel: (option) => ontologyManager.applyPrefixes(option.term.id), filterOptions: (terms) => terms.filter((t) => isOntologyClass(t.term)), options: options, autoComplete: true, includeInputInList: true, filterSelectedOptions: true, value: value, loading: loading, isOptionEqualToValue: (option, v) => ontologyManager.applyPrefixes(option.term.id) ===
+            ontologyManager.applyPrefixes(v.term.id), noOptionsText: inputValue ? 'No matches' : 'Start typing to search', onChange: (_, newValue) => {
+            setOptions(newValue ? [...newValue, ...options] : options);
+            onChange(newValue.map((v) => ontologyManager.applyPrefixes(v.term.id)));
+            setValue(newValue);
+        }, onInputChange: (event, newInputValue) => {
+            if (newInputValue) {
+                setLoading(true);
+            }
+            setOptions([]);
+            setInputValue(newInputValue);
+        }, multiple: true, renderInput: (params) => (React.createElement(TextField, { ...params, ...extraTextFieldParams, variant: "outlined", label: label, fullWidth: true })), renderOption: (props, option) => (React.createElement(Option, { ...props, ontologyManager: ontologyManager, option: option, inputValue: inputValue })), renderTags: (v, getTagProps) => v.map((option, index) => (React.createElement(TermTagWithTooltip, { termId: option.term.id, index: index, ontology: ontology, getTagProps: getTagProps, key: option.term.id }))) }));
+}
+function HighlightedText(props) {
+    const { search, str } = props;
+    const highlights = highlightMatch(str, search, {
+        insideWords: true,
+        findAllOccurrences: true,
     });
-    pluggableElement.stateModel = newStateModel;
-    return pluggableElement;
+    const parts = highlightParse(str, highlights);
+    return (React.createElement(React.Fragment, null, parts.map((part, index) => (React.createElement(Typography, { key: index, component: "span", sx: { fontWeight: part.highlight ? 'bold' : 'regular' }, variant: "body2", color: "text.secondary" }, part.text)))));
+}
+function Option(props) {
+    const { inputValue, ontologyManager, option, ...other } = props;
+    const matches = option.matches ?? [];
+    const fields = matches
+        .filter((match) => match.field.jsonPath !== '$.lbl')
+        .map((match) => {
+        return (React.createElement(React.Fragment, { key: `option-${match.term.id}-${match.str}` },
+            React.createElement(Typography, { component: "dt", variant: "body2", color: "text.secondary" }, match.field.displayName),
+            React.createElement("dd", null,
+                React.createElement(HighlightedText, { str: match.str, search: inputValue }))));
+    });
+    // const lblScore = matches
+    //   .filter((match) => match.field.jsonPath === '$.lbl')
+    //   .map((m) => m.score)
+    //   .join(', ')
+    return (React.createElement("li", { ...other },
+        React.createElement(Grid2, { container: true },
+            React.createElement(Grid2, null,
+                React.createElement(Typography, { component: "span" }, ontologyManager.applyPrefixes(option.term.id)),
+                ' ',
+                React.createElement(HighlightedText, { str: option.term.lbl ?? '(no label)', search: inputValue }),
+                ' ',
+                React.createElement("dl", null, fields)))));
 }
 
 /* eslint-disable @typescript-eslint/unbound-method */
@@ -5278,13 +5351,13 @@ const reservedKeys = new Map([
     [
         'Gene Ontology',
         (props) => {
-            return React__default.createElement(OntologyTermMultiSelect, { ...props, ontologyName: "Gene Ontology" });
+            return (React__default.createElement(OntologyTermMultiSelect, { ...props, ontologyName: "Gene Ontology", label: 'Gene Ontology' }));
         },
     ],
     [
         'Sequence Ontology',
         (props) => {
-            return (React__default.createElement(OntologyTermMultiSelect, { ...props, ontologyName: "Sequence Ontology" }));
+            return (React__default.createElement(OntologyTermMultiSelect, { ...props, ontologyName: "Sequence Ontology", label: 'Sequence Ontology' }));
         },
     ],
 ]);
@@ -5311,17 +5384,13 @@ const useStyles$a = makeStyles()((theme) => ({
     },
 }));
 function CustomAttributeValueEditor(props) {
-    const { onChange, value } = props;
+    const { onChange, value, label } = props;
     return (React__default.createElement(StringTextField, { value: value, onChangeCommitted: (newValue) => {
             onChange(newValue.split(','));
-        }, variant: "outlined", fullWidth: true, helperText: "Separate multiple values for the attribute with commas" }));
+        }, variant: "outlined", fullWidth: true, label: label, style: { width: '100%' } }));
 }
-const Attributes = observer(function Attributes({ assembly, editable, feature, session, }) {
-    const [errorMessage, setErrorMessage] = useState('');
-    const [showAddNewForm, setShowAddNewForm] = useState(false);
-    const { classes } = useStyles$a();
-    const [newAttributeKey, setNewAttributeKey] = useState('');
-    const attributes = Object.fromEntries([...feature.attributes.entries()].map(([key, value]) => {
+function transformAttributes(feature) {
+    return Object.fromEntries([...feature.attributes.entries()].map(([key, value]) => {
         if (key.startsWith('gff_')) {
             const newKey = key.slice(4);
             const capitalizedKey = newKey.charAt(0).toUpperCase() + newKey.slice(1);
@@ -5332,17 +5401,23 @@ const Attributes = observer(function Attributes({ assembly, editable, feature, s
         }
         return [key, getSnapshot(value)];
     }));
+}
+const Attributes = observer(function Attributes({ assembly, editable, feature, session, }) {
+    const [errorMessage, setErrorMessage] = useState('');
+    const [showAddNewForm, setShowAddNewForm] = useState(false);
+    const { classes } = useStyles$a();
+    const [newAttributeKey, setNewAttributeKey] = useState('');
+    const [attributes, setAttributes] = useState(() => transformAttributes(feature));
+    useEffect(() => {
+        setAttributes(transformAttributes(feature));
+    }, [feature]);
     const { notify } = session;
     const { changeManager } = session.apolloDataStore;
-    async function onChangeCommitted(newKey, newValue) {
+    async function onChangeCommitted(attributes) {
         setErrorMessage('');
         const attrs = {};
         if (attributes) {
-            const modifiedAttrs = Object.entries({
-                ...attributes,
-                [newKey]: newValue,
-            });
-            for (const [key, val] of modifiedAttrs) {
+            for (const [key, val] of Object.entries(attributes)) {
                 if (!val) {
                     continue;
                 }
@@ -5431,7 +5506,25 @@ const Attributes = observer(function Attributes({ assembly, editable, feature, s
             setErrorMessage(`Key cannot starts with uppercase letter unless key is one of these: ${reservedTerms.join(', ')}`);
             return;
         }
-        void onChangeCommitted(newAttributeKey, []);
+        setAttributes({
+            ...attributes,
+            [newAttributeKey]: [],
+        });
+        setShowAddNewForm(false);
+        setNewAttributeKey('');
+    }
+    function deleteAttribute(key) {
+        const newAttributes = { ...attributes };
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete newAttributes[key];
+        setAttributes(newAttributes);
+        void onChangeCommitted(newAttributes);
+    }
+    function updateAttribute(key, newValue) {
+        const newAttributes = { ...attributes };
+        newAttributes[key] = newValue;
+        setAttributes(newAttributes);
+        void onChangeCommitted(newAttributes);
     }
     function handleRadioButtonChange(event, value) {
         if (value === 'custom') {
@@ -5444,22 +5537,22 @@ const Attributes = observer(function Attributes({ assembly, editable, feature, s
             setErrorMessage('Unknown attribute type');
         }
     }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { variant: "h5" }, "Attributes"),
+    return (React__default.createElement("div", { "data-testid": "attributes_test" },
         React__default.createElement(Grid2, { container: true, direction: "column", spacing: 1 },
             Object.entries(attributes).map(([key, value]) => {
                 if (key === '') {
                     return null;
                 }
                 const EditorComponent = reservedKeys.get(key) ?? CustomAttributeValueEditor;
-                return (React__default.createElement(Grid2, { container: true, spacing: 3, alignItems: "center", key: key },
-                    React__default.createElement(Grid2, null,
-                        React__default.createElement(Paper, { variant: "outlined", className: classes.attributeName },
-                            React__default.createElement(Typography, null, key))),
-                    React__default.createElement(Grid2, { flexGrow: 1 },
-                        React__default.createElement(EditorComponent, { session: session, value: value, onChange: (newValue) => onChangeCommitted(key, newValue) })),
-                    React__default.createElement(Grid2, null,
-                        React__default.createElement(IconButton, { "aria-label": "delete", size: "medium", disabled: !editable, onClick: () => onChangeCommitted(key) },
+                return (React__default.createElement(Grid2, { container: true, key: key },
+                    React__default.createElement(Grid2, { size: 11 },
+                        React__default.createElement(EditorComponent, { session: session, value: value, onChange: (newValue) => {
+                                updateAttribute(key, newValue);
+                            }, label: key })),
+                    React__default.createElement(Grid2, { size: 1 },
+                        React__default.createElement(IconButton, { "aria-label": "delete", size: "medium", disabled: !editable, onClick: () => {
+                                deleteAttribute(key);
+                            }, style: { marginTop: '10px' } },
                             React__default.createElement(DeleteIcon, { fontSize: "medium", key: key })))));
             }),
             React__default.createElement(Grid2, null,
@@ -5600,8 +5693,7 @@ const BasicInformation = observer(function BasicInformation({ assembly, feature,
         }
         return terms;
     }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { variant: "h5" }, "Basic information"),
+    return (React__default.createElement("div", { "data-testid": "basic_information" },
         React__default.createElement(NumberTextField, { margin: "dense", id: "start", label: "Start", fullWidth: true, variant: "outlined", value: min + 1, onChangeCommitted: handleStartChange }),
         React__default.createElement(NumberTextField, { margin: "dense", id: "end", label: "End", fullWidth: true, variant: "outlined", value: max, onChangeCommitted: handleEndChange }),
         React__default.createElement(OntologyTermAutocomplete, { session: session, ontologyName: "Sequence Ontology", value: type, filterTerms: isOntologyClass, fetchValidTerms: fetchValidTerms.bind(null, feature), renderInput: (params) => (React__default.createElement(TextField, { ...params, label: "Type", variant: "outlined", fullWidth: true, error: Boolean(typeWarningText), helperText: typeWarningText })), onChange: (oldValue, newValue) => {
@@ -5634,11 +5726,7 @@ const useStyles$9 = makeStyles()({
 });
 const Sequence = observer(function Sequence({ assembly, feature, refName, session, }) {
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
-    const [showSequence, setShowSequence] = useState(false);
     const { classes } = useStyles$9();
-    const onButtonClick = () => {
-        setShowSequence(!showSequence);
-    };
     if (!(feature && currentAssembly)) {
         return null;
     }
@@ -5647,22 +5735,17 @@ const Sequence = observer(function Sequence({ assembly, feature, refName, sessio
         return null;
     }
     const { max, min } = feature;
-    let sequence = '';
-    if (showSequence) {
-        sequence = refSeq.getSequence(min, max);
-        if (sequence) {
-            sequence = formatSequence(sequence, refName, min, max);
-        }
-        else {
-            void session.apolloDataStore.loadRefSeq([
-                { assemblyName: assembly, refName, start: min, end: max },
-            ]);
-        }
+    let sequence = refSeq.getSequence(min, max);
+    if (sequence) {
+        sequence = formatSequence(sequence, refName, min, max);
     }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { variant: "h5" }, "Sequence"),
-        React__default.createElement(Button, { variant: "contained", onClick: onButtonClick }, showSequence ? 'Hide sequence' : 'Show sequence'),
-        React__default.createElement("div", null, showSequence && (React__default.createElement("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence })))));
+    else {
+        void session.apolloDataStore.loadRefSeq([
+            { assemblyName: assembly, refName, start: min, end: max },
+        ]);
+    }
+    return (React__default.createElement("div", null,
+        React__default.createElement("textarea", { readOnly: true, rows: 20, className: classes.sequence, value: sequence })));
 });
 
 const FeatureDetailsNavigation = observer(function FeatureDetailsNavigation(props) {
@@ -5677,14 +5760,14 @@ const FeatureDetailsNavigation = observer(function FeatureDetailsNavigation(prop
     if (!(parent ?? childFeatures.length > 0)) {
         return null;
     }
-    return (React__default.createElement("div", null,
-        React__default.createElement(Typography, { variant: "h5" }, "Go to related feature"),
+    return (React__default.createElement("div", { style: { marginTop: 10 } },
         parent && (React__default.createElement("div", null,
             React__default.createElement(Typography, { variant: "h6" }, "Parent:"),
             React__default.createElement(Button, { variant: "contained", onClick: () => {
                     model.setFeature(parent);
                 } },
                 parent.type,
+                getFeatureNameOrId$1(parent),
                 " (",
                 parent.min,
                 "..",
@@ -5699,6 +5782,7 @@ const FeatureDetailsNavigation = observer(function FeatureDetailsNavigation(prop
                         model.setFeature(child);
                     } },
                     child.type,
+                    getFeatureNameOrId$1(child),
                     " (",
                     child.min,
                     "..",
@@ -5717,6 +5801,10 @@ const ApolloFeatureDetailsWidget = observer(function ApolloFeatureDetailsWidget(
     const session = getSession(model);
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
     const { classes } = useStyles$8();
+    const [panelState, setPanelState] = useState(['attributes']);
+    useEffect(() => {
+        setPanelState(['attributes']);
+    }, [feature]);
     if (!(feature && currentAssembly)) {
         return null;
     }
@@ -5731,14 +5819,36 @@ const ApolloFeatureDetailsWidget = observer(function ApolloFeatureDetailsWidget(
             { assemblyName: assembly, refName, start: min, end: max },
         ]);
     }
+    function handlePanelChange(expanded, panel) {
+        if (expanded) {
+            setPanelState([...panelState, panel]);
+        }
+        else {
+            setPanelState(panelState.filter((p) => p !== panel));
+        }
+    }
     return (React__default.createElement("div", { className: classes.root },
         React__default.createElement(BasicInformation, { feature: feature, session: session, assembly: currentAssembly._id }),
-        React__default.createElement("hr", null),
-        React__default.createElement(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }),
-        React__default.createElement("hr", null),
-        React__default.createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName }),
-        React__default.createElement("hr", null),
-        React__default.createElement(FeatureDetailsNavigation, { model: model, feature: feature })));
+        React__default.createElement(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('attributes'), onChange: (e, expanded) => {
+                handlePanelChange(expanded, 'attributes');
+            } },
+            React__default.createElement(AccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
+                React__default.createElement(Typography, { component: "span" }, "Attributes")),
+            React__default.createElement(AccordionDetails, null,
+                React__default.createElement(Attributes, { feature: feature, session: session, assembly: currentAssembly._id, editable: true }))),
+        React__default.createElement(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
+                handlePanelChange(expanded, 'sequence');
+            } },
+            React__default.createElement(AccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header" },
+                React__default.createElement(Typography, { component: "span" }, "Sequence")),
+            React__default.createElement(AccordionDetails, null, panelState.includes('sequence') && (React__default.createElement(Sequence, { feature: feature, session: session, assembly: currentAssembly._id, refName: refName })))),
+        React__default.createElement(Accordion, { style: { marginTop: 10 }, expanded: panelState.includes('related_features'), onChange: (e, expanded) => {
+                handlePanelChange(expanded, 'related_features');
+            } },
+            React__default.createElement(AccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header" },
+                React__default.createElement(Typography, { component: "span" }, "Related features")),
+            React__default.createElement(AccordionDetails, null,
+                React__default.createElement(FeatureDetailsNavigation, { model: model, feature: feature })))));
 });
 
 /* eslint-disable @typescript-eslint/no-unsafe-call */
@@ -5806,154 +5916,32 @@ const ApolloTranscriptDetailsModel = types
     .actions((self) => ({
     setFeature(feature) {
         // @ts-expect-error Not sure why TS thinks these MST types don't match
-        self.feature = feature;
-    },
-    setTryReload(featureId) {
-        self.tryReload = featureId;
-    },
-}))
-    .actions((self) => ({
-    afterAttach() {
-        addDisposer(self, autorun((reaction) => {
-            if (!self.tryReload) {
-                return;
-            }
-            const session = getSession(self);
-            const { apolloDataStore } = session;
-            if (!apolloDataStore) {
-                return;
-            }
-            const feature = apolloDataStore.getFeature(self.tryReload);
-            if (feature) {
-                self.setFeature(feature);
-                self.setTryReload();
-                reaction.dispose();
-            }
-        }));
-    },
-}));
-
-const TranscriptBasicInformation = observer(function TranscriptBasicInformation({ assembly, feature, refName, session, }) {
-    const { notify } = session;
-    const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
-    const refData = currentAssembly?.getByRefName(refName);
-    const { changeManager } = session.apolloDataStore;
-    const theme = useTheme();
-    function handleLocationChange(oldLocation, newLocation, feature, isMin) {
-        if (!feature.children) {
-            throw new Error('Transcript should have child features');
-        }
-        for (const [, child] of feature.children) {
-            if (isMin && oldLocation - 1 === child.min) {
-                const change = new LocationStartChange({
-                    typeName: 'LocationStartChange',
-                    changedIds: [child._id],
-                    featureId: feature._id,
-                    oldStart: oldLocation - 1,
-                    newStart: newLocation - 1,
-                    assembly,
-                });
-                changeManager.submit(change).catch(() => {
-                    notify('Error updating feature start position', 'error');
-                });
-                return;
-            }
-            if (!isMin && newLocation === child.max) {
-                const change = new LocationEndChange({
-                    typeName: 'LocationEndChange',
-                    changedIds: [child._id],
-                    featureId: feature._id,
-                    oldEnd: child.max,
-                    newEnd: newLocation,
-                    assembly,
-                });
-                changeManager.submit(change).catch(() => {
-                    notify('Error updating feature start position', 'error');
-                });
+        self.feature = feature;
+    },
+    setTryReload(featureId) {
+        self.tryReload = featureId;
+    },
+}))
+    .actions((self) => ({
+    afterAttach() {
+        addDisposer(self, autorun((reaction) => {
+            if (!self.tryReload) {
                 return;
             }
-        }
-    }
-    if (!refData) {
-        return null;
-    }
-    let strand, transcriptParts;
-    try {
-        ;
-        ({ strand, transcriptParts } = feature);
-    }
-    catch {
-        return null;
-    }
-    const [firstLocation] = transcriptParts;
-    const locationData = firstLocation
-        .map((loc, idx) => {
-        const { max, min, type } = loc;
-        let label = type;
-        if (label === 'threePrimeUTR') {
-            label = '3` UTR';
-        }
-        else if (label === 'fivePrimeUTR') {
-            label = '5` UTR';
-        }
-        let fivePrimeSpliceSite;
-        let threePrimeSpliceSite;
-        let frameColor;
-        if (type === 'CDS') {
-            const { phase } = loc;
-            const frame = getFrame(min, max, strand ?? 1, phase);
-            frameColor = theme.palette.framesCDS.at(frame)?.main;
-            const previousLoc = firstLocation.at(idx - 1);
-            const nextLoc = firstLocation.at(idx + 1);
-            if (strand === 1) {
-                if (previousLoc?.type === 'intron') {
-                    fivePrimeSpliceSite = refData.getSequence(min - 2, min);
-                }
-                if (nextLoc?.type === 'intron') {
-                    threePrimeSpliceSite = refData.getSequence(max, max + 2);
-                }
+            const session = getSession(self);
+            const { apolloDataStore } = session;
+            if (!apolloDataStore) {
+                return;
             }
-            else {
-                if (previousLoc?.type === 'intron') {
-                    fivePrimeSpliceSite = revcom(refData.getSequence(max, max + 2));
-                }
-                if (nextLoc?.type === 'intron') {
-                    threePrimeSpliceSite = revcom(refData.getSequence(min - 2, min));
-                }
+            const feature = apolloDataStore.getFeature(self.tryReload);
+            if (feature) {
+                self.setFeature(feature);
+                self.setTryReload();
+                reaction.dispose();
             }
-        }
-        return {
-            min,
-            max,
-            label,
-            fivePrimeSpliceSite,
-            threePrimeSpliceSite,
-            frameColor,
-        };
-    })
-        .filter((loc) => loc.label !== 'intron');
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { variant: "h5" }, "Structure"),
-        React__default.createElement(Typography, { variant: "h6" },
-            strand === 1 ? 'Forward' : 'Reverse',
-            " strand"),
-        React__default.createElement(TableContainer, { component: Paper },
-            React__default.createElement(Table, { size: "small" },
-                React__default.createElement(TableBody, null, locationData.map((loc) => (React__default.createElement(TableRow, { key: `${loc.label}:${loc.min}-${loc.max}` },
-                    React__default.createElement(TableCell, { component: "th", scope: "row", style: { background: loc.frameColor } }, loc.label),
-                    React__default.createElement(TableCell, null, loc.fivePrimeSpliceSite ?? ''),
-                    React__default.createElement(TableCell, { padding: "none" },
-                        React__default.createElement(NumberTextField, { margin: "dense", variant: "outlined", value: strand === 1 ? loc.min + 1 : loc.max, onChangeCommitted: (newLocation) => {
-                                handleLocationChange(strand === 1 ? loc.min + 1 : loc.max, newLocation, feature, strand === 1);
-                            } })),
-                    React__default.createElement(TableCell, { padding: "none" },
-                        React__default.createElement(NumberTextField, { margin: "dense", 
-                            // disabled={item.type !== 'CDS'}
-                            variant: "outlined", value: strand === 1 ? loc.max : loc.min + 1, onChangeCommitted: (newLocation) => {
-                                handleLocationChange(strand === 1 ? loc.max : loc.min + 1, newLocation, feature, strand !== 1);
-                            } })),
-                    React__default.createElement(TableCell, null, loc.threePrimeSpliceSite ?? '')))))))));
-});
+        }));
+    },
+}));
 
 const SEQUENCE_WRAP_LENGTH = 60;
 function getSequenceSegments(segmentType, feature, getSequence) {
@@ -6054,6 +6042,7 @@ function getSegmentColor(type) {
         case 'upOrDownstream': {
             return 'rgb(255,255,255)';
         }
+        case 'exon':
         case 'UTR': {
             return 'rgb(194,106,119)';
         }
@@ -6068,13 +6057,54 @@ function getSegmentColor(type) {
         }
     }
 }
+function getLocationIntervals(seqSegments) {
+    const locIntervals = [];
+    const allLocs = seqSegments.flatMap((segment) => segment.locs);
+    let [previous] = allLocs;
+    for (let i = 1; i < allLocs.length; i++) {
+        if (previous.min === allLocs[i].max || previous.max === allLocs[i].min) {
+            previous = {
+                min: Math.min(previous.min, allLocs[i].min),
+                max: Math.max(previous.max, allLocs[i].max),
+            };
+        }
+        else {
+            locIntervals.push(previous);
+            previous = allLocs[i];
+        }
+    }
+    locIntervals.push(previous);
+    return locIntervals;
+}
 const TranscriptSequence = observer(function TranscriptSequence({ assembly, feature, refName, session, }) {
     const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
     const refData = currentAssembly?.getByRefName(refName);
-    const [showSequence, setShowSequence] = useState(false);
-    const [selectedOption, setSelectedOption] = useState('CDS');
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    const defaultSelectedOption = 'genomic';
+    const defaultSequenceOptions = ['genomic', 'cDNA'];
+    const [sequenceOptions, setSequenceOptions] = useState(defaultSequenceOptions);
+    const [selectedOption, setSelectedOption] = useState(defaultSelectedOption);
+    const [sequenceSegments, setSequenceSegments] = useState(() => {
+        return refData
+            ? getSequenceSegments(defaultSelectedOption, feature, (min, max) => refData.getSequence(min, max))
+            : [];
+    });
+    const [locationIntervals, setLocationIntervals] = useState(() => {
+        return getLocationIntervals(sequenceSegments);
+    });
     const theme = useTheme();
     const seqRef = useRef(null);
+    useEffect(() => {
+        const { cdsLocations } = feature;
+        const [firstLocation] = cdsLocations;
+        if (firstLocation.length > 0) {
+            setSequenceOptions([...defaultSequenceOptions, 'CDS', 'protein']);
+        }
+        else {
+            setSequenceOptions(defaultSequenceOptions);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [feature]);
     if (!(currentAssembly && refData)) {
         return null;
     }
@@ -6082,15 +6112,21 @@ const TranscriptSequence = observer(function TranscriptSequence({ assembly, feat
     if (!refSeq) {
         return null;
     }
-    if (feature.type !== 'mRNA') {
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    if (!featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
         return null;
     }
-    const handleSeqButtonClick = () => {
-        setShowSequence(!showSequence);
-    };
     function handleChangeSeqOption(e) {
         const option = e.target.value;
         setSelectedOption(option);
+        const seqSegments = refData
+            ? getSequenceSegments(option, feature, (min, max) => refData.getSequence(min, max))
+            : [];
+        const locIntervals = getLocationIntervals(seqSegments);
+        setSequenceSegments(seqSegments);
+        setLocationIntervals(locIntervals);
     }
     // Function to copy text to clipboard
     const copyToClipboard = () => {
@@ -6106,62 +6142,419 @@ const TranscriptSequence = observer(function TranscriptSequence({ assembly, feat
         });
         void navigator.clipboard.write([clipboardItem]);
     };
-    const sequenceSegments = showSequence
-        ? getSequenceSegments(selectedOption, feature, (min, max) => refData.getSequence(min, max))
-        : [];
-    const locationIntervals = [];
-    if (showSequence) {
-        const allLocs = sequenceSegments.flatMap((segment) => segment.locs);
-        let [previous] = allLocs;
-        for (let i = 1; i < allLocs.length; i++) {
-            if (previous.min === allLocs[i].max || previous.max === allLocs[i].min) {
-                previous = {
-                    min: Math.min(previous.min, allLocs[i].min),
-                    max: Math.max(previous.max, allLocs[i].max),
-                };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Select, { defaultValue: "genomic", value: selectedOption, onChange: handleChangeSeqOption, size: "small" }, sequenceOptions.map((option) => (React__default.createElement(MenuItem, { key: option, value: option }, option)))),
+        React__default.createElement(Button, { variant: "contained", onClick: copyToClipboard, style: { marginLeft: 10 }, size: "medium" }, "Copy sequence"),
+        React__default.createElement(Paper, { style: {
+                fontFamily: 'monospace',
+                padding: theme.spacing(),
+                overflowX: 'auto',
+            }, ref: seqRef },
+            ">",
+            refSeq.name,
+            ":",
+            locationIntervals
+                .map((interval) => feature.strand === 1
+                ? `${interval.min + 1}-${interval.max}`
+                : `${interval.max}-${interval.min + 1}`)
+                .join(';'),
+            "(",
+            feature.strand === 1 ? '+' : '-',
+            ")",
+            React__default.createElement("br", null),
+            sequenceSegments.map((segment, index) => (React__default.createElement("span", { key: `${segment.type}-${index}`, style: {
+                    background: getSegmentColor(segment.type),
+                    color: theme.palette.getContrastText(getSegmentColor(segment.type)),
+                } }, segment.sequenceLines.map((sequenceLine, idx) => (React__default.createElement(React__default.Fragment, { key: `${sequenceLine.slice(0, 5)}-${idx}` },
+                sequenceLine,
+                idx === segment.sequenceLines.length - 1 &&
+                    sequenceLine.length !== SEQUENCE_WRAP_LENGTH ? null : (React__default.createElement("br", null)))))))))));
+});
+
+const HeaderTableCell = styled(TableCell)(() => ({
+    fontWeight: 'bold',
+}));
+const TranscriptWidgetSummary = observer(function TranscriptWidgetSummary(props) {
+    const { feature } = props;
+    const name = getFeatureName(feature);
+    const id = getFeatureId$1(feature);
+    return (React__default.createElement(Table, { size: "small", sx: { fontSize: '0.75rem', '& .MuiTableCell-root': { padding: '4px' } } },
+        React__default.createElement(TableBody, null,
+            name !== '' && (React__default.createElement(TableRow, null,
+                React__default.createElement(HeaderTableCell, null, "Name"),
+                React__default.createElement(TableCell, null, getFeatureName(feature)))),
+            id !== '' && (React__default.createElement(TableRow, null,
+                React__default.createElement(HeaderTableCell, null, "ID"),
+                React__default.createElement(TableCell, null, getFeatureId$1(feature)))),
+            React__default.createElement(TableRow, null,
+                React__default.createElement(HeaderTableCell, null, "Location"),
+                React__default.createElement(TableCell, null,
+                    props.refName,
+                    ":",
+                    feature.min,
+                    "..",
+                    feature.max)),
+            React__default.createElement(TableRow, null,
+                React__default.createElement(HeaderTableCell, null, "Strand"),
+                React__default.createElement(TableCell, null, getStrand(feature.strand))))));
+});
+
+/* eslint-disable unicorn/no-nested-ternary */
+const StyledTextField = styled(NumberTextField)(() => ({
+    '&.MuiFormControl-root': {
+        marginTop: 0,
+        marginBottom: 0,
+        width: '100%',
+    },
+    '& .MuiInputBase-input': {
+        fontSize: 12,
+        height: 20,
+        padding: 1,
+        paddingLeft: 10,
+    },
+}));
+const SequenceContainer = styled('div')({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'left',
+    width: '100%',
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+    wordBreak: 'break-all',
+    '& span': {
+        fontSize: 12,
+    },
+});
+const Strand = (props) => {
+    const { strand } = props;
+    return (React__default.createElement("div", null, strand === 1 ? (React__default.createElement(AddIcon, null)) : strand === -1 ? (React__default.createElement(RemoveIcon, null)) : (React__default.createElement(Typography, { component: 'span' }, "N/A"))));
+};
+const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocation({ assembly, feature, refName, session, }) {
+    const { notify } = session;
+    const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
+    const refData = currentAssembly?.getByRefName(refName);
+    const { changeManager } = session.apolloDataStore;
+    const seqRef = useRef(null);
+    // Separate function to handle CDS location change
+    // because start of CDS and exon might be same
+    function handleCDSLocationChange(oldLocation, newLocation, feature, isMin) {
+        if (!feature.children) {
+            throw new Error('Transcript should have child features');
+        }
+        for (const [, child] of feature.children) {
+            if (child.type !== 'CDS') {
+                continue;
             }
-            else {
-                locationIntervals.push(previous);
-                previous = allLocs[i];
+            if (isMin && oldLocation === child.min) {
+                const change = new LocationStartChange({
+                    typeName: 'LocationStartChange',
+                    changedIds: [child._id],
+                    featureId: feature._id,
+                    oldStart: child.min,
+                    newStart: newLocation,
+                    assembly,
+                });
+                changeManager.submit(change).catch(() => {
+                    notify('Error updating feature start position', 'error');
+                });
+                return;
+            }
+            if (!isMin && oldLocation === child.max) {
+                const change = new LocationEndChange({
+                    typeName: 'LocationEndChange',
+                    changedIds: [child._id],
+                    featureId: feature._id,
+                    oldEnd: child.max,
+                    newEnd: newLocation,
+                    assembly,
+                });
+                changeManager.submit(change).catch(() => {
+                    notify('Error updating feature start position', 'error');
+                });
+                return;
             }
         }
-        locationIntervals.push(previous);
     }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Typography, { variant: "h5" }, "Sequence"),
-        React__default.createElement("div", null,
-            React__default.createElement(Button, { variant: "contained", onClick: handleSeqButtonClick }, showSequence ? 'Hide sequence' : 'Show sequence')),
-        showSequence && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Select, { defaultValue: "CDS", value: selectedOption, onChange: handleChangeSeqOption },
-                React__default.createElement(MenuItem, { value: "CDS" }, "CDS"),
-                React__default.createElement(MenuItem, { value: "cDNA" }, "cDNA"),
-                React__default.createElement(MenuItem, { value: "genomic" }, "Genomic"),
-                React__default.createElement(MenuItem, { value: "protein" }, "Protein")),
-            React__default.createElement(Paper, { style: {
-                    fontFamily: 'monospace',
-                    padding: theme.spacing(),
-                    overflowX: 'auto',
-                }, ref: seqRef },
-                ">",
-                refSeq.name,
-                ":",
-                locationIntervals
-                    .map((interval) => feature.strand === 1
-                    ? `${interval.min + 1}-${interval.max}`
-                    : `${interval.max}-${interval.min + 1}`)
-                    .join(';'),
-                "(",
-                feature.strand === 1 ? '+' : '-',
-                ")",
-                React__default.createElement("br", null),
-                sequenceSegments.map((segment, index) => (React__default.createElement("span", { key: `${segment.type}-${index}`, style: {
-                        background: getSegmentColor(segment.type),
-                        color: theme.palette.getContrastText(getSegmentColor(segment.type)),
-                    } }, segment.sequenceLines.map((sequenceLine, idx) => (React__default.createElement(React__default.Fragment, { key: `${sequenceLine.slice(0, 5)}-${idx}` },
-                    sequenceLine,
-                    idx === segment.sequenceLines.length - 1 &&
-                        sequenceLine.length !== SEQUENCE_WRAP_LENGTH ? null : (React__default.createElement("br", null))))))))),
-            React__default.createElement(Button, { variant: "contained", onClick: copyToClipboard }, "Copy sequence")))));
+    function handleExonLocationChange(oldLocation, newLocation, feature, isMin) {
+        if (!feature.children) {
+            throw new Error('Transcript should have child features');
+        }
+        for (const [, child] of feature.children) {
+            if (child.type !== 'exon') {
+                continue;
+            }
+            if (isMin && oldLocation === child.min) {
+                const change = new LocationStartChange({
+                    typeName: 'LocationStartChange',
+                    changedIds: [child._id],
+                    featureId: feature._id,
+                    oldStart: child.min,
+                    newStart: newLocation,
+                    assembly,
+                });
+                changeManager.submit(change).catch(() => {
+                    notify('Error updating feature start position', 'error');
+                });
+                return;
+            }
+            if (!isMin && oldLocation === child.max) {
+                const change = new LocationEndChange({
+                    typeName: 'LocationEndChange',
+                    changedIds: [child._id],
+                    featureId: feature._id,
+                    oldEnd: child.max,
+                    newEnd: newLocation,
+                    assembly,
+                });
+                changeManager.submit(change).catch(() => {
+                    notify('Error updating feature start position', 'error');
+                });
+                return;
+            }
+        }
+    }
+    if (!refData) {
+        return null;
+    }
+    const { cdsLocations, transcriptExonParts, strand } = feature;
+    const [firstCDSLocation] = cdsLocations;
+    const exonParts = transcriptExonParts
+        .filter((part) => part.type === 'exon')
+        .sort(({ min: a }, { min: b }) => a - b);
+    const exonMin = exonParts[0]?.min;
+    const exonMax = exonParts[exonParts.length - 1]?.max;
+    let cdsMin = exonMin;
+    let cdsMax = exonMax;
+    const cdsPresent = firstCDSLocation.length > 0;
+    if (cdsPresent) {
+        cdsMin = firstCDSLocation[0].min;
+        cdsMax = firstCDSLocation[firstCDSLocation.length - 1].max;
+    }
+    const getFivePrimeSpliceSite = (loc, prevLocIdx) => {
+        let spliceSite = '';
+        if (prevLocIdx > 0) {
+            const prevLoc = transcriptExonParts[prevLocIdx - 1];
+            if (strand === 1) {
+                if (prevLoc.type === 'intron') {
+                    spliceSite = refData.getSequence(loc.min - 2, loc.min);
+                }
+            }
+            else {
+                if (prevLoc.type === 'intron') {
+                    spliceSite = revcom(refData.getSequence(loc.max, loc.max + 2));
+                }
+            }
+        }
+        return [
+            {
+                spliceSite,
+                color: spliceSite === 'AG' ? 'green' : 'red',
+            },
+        ];
+    };
+    const getThreePrimeSpliceSite = (loc, nextLocIdx) => {
+        let spliceSite = '';
+        if (nextLocIdx < transcriptExonParts.length - 1) {
+            const nextLoc = transcriptExonParts[nextLocIdx + 1];
+            if (strand === 1) {
+                if (nextLoc.type === 'intron') {
+                    spliceSite = refData.getSequence(loc.max, loc.max + 2);
+                }
+            }
+            else {
+                if (nextLoc.type === 'intron') {
+                    spliceSite = revcom(refData.getSequence(loc.min - 2, loc.min));
+                }
+            }
+        }
+        return [
+            {
+                spliceSite,
+                color: spliceSite === 'GT' ? 'green' : 'red',
+            },
+        ];
+    };
+    const getTranslationSequence = () => {
+        let wholeSequence = '';
+        const [firstLocation] = cdsLocations;
+        for (const loc of firstLocation) {
+            let sequence = refData.getSequence(loc.min, loc.max);
+            if (strand === -1) {
+                sequence = revcom(sequence);
+            }
+            wholeSequence += sequence;
+        }
+        const elements = [];
+        for (let codonGenomicPos = 0; codonGenomicPos < wholeSequence.length; codonGenomicPos += 3) {
+            const codonSeq = wholeSequence
+                .slice(codonGenomicPos, codonGenomicPos + 3)
+                .toUpperCase();
+            const protein = defaultCodonTable[codonSeq] || '&';
+            // highlight start codon and stop codons
+            if (codonSeq === 'ATG') {
+                elements.push(React__default.createElement(Typography, { component: 'span', style: {
+                        backgroundColor: 'yellow',
+                        cursor: 'pointer',
+                        border: '1px solid black',
+                    }, key: codonGenomicPos, onClick: () => {
+                        // NOTE: codonGenomicPos is important here for calculating the genomic location
+                        // of the start codon. We are using the codonGenomicPos as the key in the typography
+                        // elements to maintain the genomic postion of the codon start
+                        const startCodonGenomicLocation = getStartCodonGenomicLocation(codonGenomicPos);
+                        if (startCodonGenomicLocation !== cdsMin) {
+                            handleCDSLocationChange(cdsMin, startCodonGenomicLocation, feature, true);
+                        }
+                    } }, protein));
+            }
+            else if (['TAA', 'TAG', 'TGA'].includes(codonSeq)) {
+                elements.push(React__default.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));
+            }
+            else {
+                elements.push(
+                // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
+                React__default.createElement(Typography, { component: 'span', key: codonGenomicPos }, protein));
+            }
+        }
+        return elements;
+    };
+    // Codon position is the index of the start codon in the CDS genomic sequence
+    // Calculate the genomic location of the start codon based on the codon position in the CDS
+    const getStartCodonGenomicLocation = (codonGenomicPosition) => {
+        const [firstLocation] = cdsLocations;
+        let cdsLen = 0;
+        for (const loc of firstLocation) {
+            const locLength = loc.max - loc.min;
+            // Suppose CDS locations are [{min: 0, max: 10}, {min: 20, max: 30}, {min: 40, max: 50}]
+            // and codonGenomicPosition is 25
+            // (((10 - 0) + (30 - 20)) + 10) > 25
+            // 40 + (25-20) = 45 is the genomic location of the start codon
+            if (cdsLen + locLength > codonGenomicPosition) {
+                return loc.min + (codonGenomicPosition - cdsLen);
+            }
+            cdsLen += locLength;
+        }
+        return cdsMin;
+    };
+    const getStopCodonGenomicLocation = (codonGenomicPosition) => {
+        const [firstLocation] = cdsLocations;
+        let cdsLen = 0;
+        for (const loc of firstLocation) {
+            const locLength = loc.max - loc.min;
+            // Check if the codonPosition is within the current location
+            if (cdsLen + locLength > codonGenomicPosition) {
+                return loc.min + (codonGenomicPosition - cdsLen);
+            }
+            cdsLen += locLength;
+        }
+        return cdsMax;
+    };
+    const trimTranslationSequence = () => {
+        const sequenceElements = getTranslationSequence();
+        const translationSequence = sequenceElements
+            .map((el) => el.props.children)
+            .join('');
+        if (translationSequence.startsWith('M') &&
+            translationSequence.endsWith('*')) {
+            return;
+        }
+        // NOTE: We are maintaining the genomic location of the codon start as the "key"
+        // in typography elements. See getTranslationSequence function
+        const translSeqCodonStartGenomicPosArr = [];
+        for (const el of sequenceElements) {
+            translSeqCodonStartGenomicPosArr.push({
+                codonGenomicPos: el.key,
+                sequenceLetter: el.props.children,
+            });
+        }
+        if (translSeqCodonStartGenomicPosArr.length === 0) {
+            return;
+        }
+        // Trim any sequence before first start codon and after last stop codon
+        const startCodonIndex = translationSequence.indexOf('M');
+        const stopCodonIndex = translationSequence.lastIndexOf('*') + 1;
+        const startCodonPos = translSeqCodonStartGenomicPosArr[startCodonIndex].codonGenomicPos;
+        const stopCodonPos = translSeqCodonStartGenomicPosArr[stopCodonIndex].codonGenomicPos;
+        if (!startCodonPos || !stopCodonPos) {
+            return;
+        }
+        const startCodonGenomicLoc = getStartCodonGenomicLocation(startCodonPos);
+        const stopCodonGenomicLoc = getStopCodonGenomicLocation(stopCodonPos);
+        if (startCodonGenomicLoc !== cdsMin) {
+            handleCDSLocationChange(cdsMin, startCodonGenomicLoc, feature, true);
+        }
+        if (stopCodonGenomicLoc !== cdsMax) {
+            // TODO: getting error when trying to change the CDS start and end location at the same time
+            // Need to fix this
+            setTimeout(() => {
+                handleCDSLocationChange(cdsMax, stopCodonGenomicLoc, feature, false);
+            }, 1000);
+        }
+    };
+    const copyToClipboard = () => {
+        const seqDiv = seqRef.current;
+        if (!seqDiv) {
+            return;
+        }
+        const textBlob = new Blob([seqDiv.outerText], { type: 'text/plain' });
+        const htmlBlob = new Blob([seqDiv.outerHTML], { type: 'text/html' });
+        const clipboardItem = new ClipboardItem({
+            [textBlob.type]: textBlob,
+            [htmlBlob.type]: htmlBlob,
+        });
+        void navigator.clipboard.write([clipboardItem]);
+    };
+    return (React__default.createElement("div", null,
+        cdsPresent && (React__default.createElement("div", null,
+            React__default.createElement(Accordion, { defaultExpanded: true },
+                React__default.createElement(StyledAccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
+                    React__default.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Translation")),
+                React__default.createElement(AccordionDetails, null,
+                    React__default.createElement(SequenceContainer, null,
+                        React__default.createElement(Typography, { component: 'span', ref: seqRef }, getTranslationSequence())),
+                    React__default.createElement("div", { style: {
+                            marginTop: 10,
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 10,
+                        } },
+                        React__default.createElement(Tooltip, { title: "Copy" },
+                            React__default.createElement(ContentCopyIcon, { style: { fontSize: 15, cursor: 'pointer' }, onClick: copyToClipboard })),
+                        React__default.createElement(Tooltip, { title: "Trim" },
+                            React__default.createElement(ContentCutIcon, { style: { fontSize: 15, cursor: 'pointer' }, onClick: trimTranslationSequence }))))),
+            React__default.createElement(Grid2, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 } },
+                React__default.createElement(Grid2, { size: 1 }),
+                React__default.createElement(Grid2, { size: 4 },
+                    React__default.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin, onChangeCommitted: (newLocation) => {
+                            handleCDSLocationChange(cdsMin, newLocation, feature, true);
+                        } })),
+                React__default.createElement(Grid2, { size: 2 },
+                    React__default.createElement(Typography, { component: 'span' }, "CDS")),
+                React__default.createElement(Grid2, { size: 4 },
+                    React__default.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
+                            handleCDSLocationChange(cdsMax, newLocation, feature, false);
+                        } })),
+                React__default.createElement(Grid2, { size: 1 })))),
+        React__default.createElement("div", { style: { marginTop: 5 } }, transcriptExonParts.map((loc, index) => {
+            return (React__default.createElement("div", { key: index }, loc.type === 'exon' && (React__default.createElement(Grid2, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' } },
+                React__default.createElement(Grid2, { size: 1 }, index !== 0 &&
+                    getFivePrimeSpliceSite(loc, index).map((site, idx) => (React__default.createElement(Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite)))),
+                React__default.createElement(Grid2, { size: 4, style: { padding: 0 } },
+                    React__default.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min, onChangeCommitted: (newLocation) => {
+                            handleExonLocationChange(loc.min, newLocation, feature, true);
+                        } })),
+                React__default.createElement(Grid2, { size: 2 },
+                    React__default.createElement(Strand, { strand: feature.strand })),
+                React__default.createElement(Grid2, { size: 4, style: { padding: 0 } },
+                    React__default.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
+                            handleExonLocationChange(loc.max, newLocation, feature, false);
+                        } })),
+                React__default.createElement(Grid2, { size: 1 }, index !== transcriptExonParts.length - 1 &&
+                    getThreePrimeSpliceSite(loc, index).map((site, idx) => (React__default.createElement(Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite))))))));
+        }))));
 });
 
 const useStyles$7 = makeStyles()((theme) => ({
@@ -6169,10 +6562,24 @@ const useStyles$7 = makeStyles()((theme) => ({
         padding: theme.spacing(2),
     },
 }));
+const StyledAccordionSummary = styled(AccordionSummary)(() => ({
+    minHeight: 30,
+    maxHeight: 30,
+    '&.Mui-expanded': {
+        minHeight: 30,
+        maxHeight: 30,
+    },
+}));
 const ApolloTranscriptDetailsWidget = observer(function ApolloTranscriptDetails(props) {
     const { classes } = useStyles$7();
+    const DEFAULT_PANELS = ['summary', 'location', 'attrs'];
+    const [panelState, setPanelState] = useState(DEFAULT_PANELS);
     const { model } = props;
     const { assembly, feature, refName } = model;
+    useEffect(() => {
+        setPanelState(DEFAULT_PANELS);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [feature]);
     const session = getSession(model);
     const apolloSession = getSession(model);
     const currentAssembly = apolloSession.apolloDataStore.assemblies.get(assembly);
@@ -6194,12 +6601,47 @@ const ApolloTranscriptDetailsWidget = observer(function ApolloTranscriptDetails(
             { assemblyName: assembly, refName, start: min, end: max },
         ]);
     }
+    function handlePanelChange(expanded, panel) {
+        if (expanded) {
+            setPanelState([...panelState, panel]);
+        }
+        else {
+            setPanelState(panelState.filter((p) => p !== panel));
+        }
+    }
     return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement(TranscriptBasicInformation, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName }),
-        React__default.createElement("hr", null),
-        React__default.createElement(Attributes, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', editable: editable }),
-        React__default.createElement("hr", null),
-        React__default.createElement(TranscriptSequence, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName })));
+        React__default.createElement(Accordion, { expanded: panelState.includes('summary'), onChange: (e, expanded) => {
+                handlePanelChange(expanded, 'summary');
+            } },
+            React__default.createElement(StyledAccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
+                React__default.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Summary")),
+            React__default.createElement(AccordionDetails, null,
+                React__default.createElement(TranscriptWidgetSummary, { feature: feature, refName: refName }))),
+        React__default.createElement(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('location'), onChange: (e, expanded) => {
+                handlePanelChange(expanded, 'location');
+            } },
+            React__default.createElement(StyledAccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel2-content", id: "panel2-header" },
+                React__default.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Location")),
+            React__default.createElement(AccordionDetails, null,
+                React__default.createElement(TranscriptWidgetEditLocation, { feature: feature, refName: refName, session: apolloSession, assembly: currentAssembly._id || '' }))),
+        React__default.createElement(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('attrs'), onChange: (e, expanded) => {
+                handlePanelChange(expanded, 'attrs');
+            } },
+            React__default.createElement(StyledAccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel3-content", id: "panel3-header" },
+                React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                    React__default.createElement(Typography, { component: "span", fontWeight: 'bold' },
+                        "Attributes",
+                        ' '),
+                    React__default.createElement(Tooltip, { title: "Separate multiple values for the attribute with commas" },
+                        React__default.createElement(InfoIcon, { style: { color: 'white', fontSize: 15, marginLeft: 10 } })))),
+            React__default.createElement(AccordionDetails, null,
+                React__default.createElement(Attributes, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', editable: editable }))),
+        React__default.createElement(Accordion, { style: { marginTop: 5 }, expanded: panelState.includes('sequence'), onChange: (e, expanded) => {
+                handlePanelChange(expanded, 'sequence');
+            } },
+            React__default.createElement(StyledAccordionSummary, { expandIcon: React__default.createElement(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel4-content", id: "panel4-header" },
+                React__default.createElement(Typography, { component: "span", fontWeight: 'bold' }, "Sequence")),
+            React__default.createElement(AccordionDetails, null, panelState.includes('sequence') && (React__default.createElement(TranscriptSequence, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName }))))));
 });
 
 const configSchema$1 = ConfigurationSchema('LinearApolloDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
@@ -6356,29 +6798,13 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
                     },
                 ]);
             },
-        }, {
-            label: 'Edit attributes',
-            disabled: readOnly,
-            onClick: () => {
-                session.queueDialog((doneCallback) => [
-                    ModifyFeatureAttribute,
-                    {
-                        session,
-                        handleClose: () => {
-                            doneCallback();
-                        },
-                        changeManager,
-                        sourceFeature: feature,
-                        sourceAssemblyId: currentAssemblyId,
-                    },
-                ]);
-            },
         });
         const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
         if (!featureTypeOntology) {
             throw new Error('featureTypeOntology is undefined');
         }
-        if (featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+        if ((featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+            featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
             isSessionModelWithWidgets(session)) {
             menuItems.push({
                 label: 'Edit transcript details',
@@ -6420,6 +6846,12 @@ const NumberCell = observer(function NumberCell({ initialValue, notifyError, onC
     const [blur, setBlur] = useState(false);
     const [inputNode, setInputNode] = useState(null);
     const { classes } = useStyles$5();
+    useEffect(() => {
+        if (initialValue !== value) {
+            setValue(initialValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialValue]);
     useEffect(() => {
         if (blur) {
             inputNode?.blur();
@@ -6451,7 +6883,7 @@ const NumberCell = observer(function NumberCell({ initialValue, notifyError, onC
             } })));
 });
 
-/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+/* eslint-disable unicorn/no-nested-ternary */
 const useStyles$4 = makeStyles()((theme) => ({
     typeContent: {
         display: 'inline-block',
@@ -6695,12 +7127,14 @@ const ToolBar = observer(function ToolBar({ model: displayState, }) {
                 React__default.createElement(UnfoldLessIcon, null))),
         React__default.createElement(TextField, { className: classes.filterText, label: "Filter features", value: model.filterText, sx: { marginTop: 0 }, variant: "outlined", onChange: (event) => {
                 model.setFilterText(event.target.value);
-            }, InputProps: {
-                endAdornment: (React__default.createElement(InputAdornment$1, { position: "end" },
-                    React__default.createElement(IconButton, { onClick: () => {
-                            model.clearFilterText();
-                        } },
-                        React__default.createElement(ClearIcon, null)))),
+            }, slotProps: {
+                input: {
+                    endAdornment: (React__default.createElement(InputAdornment, { position: "end" },
+                        React__default.createElement(IconButton, { onClick: () => {
+                                model.clearFilterText();
+                            } },
+                            React__default.createElement(ClearIcon, null)))),
+                },
             } })));
 });
 
@@ -7254,23 +7688,6 @@ function getContextMenuItems$2(display) {
                 },
             ]);
         },
-    }, {
-        label: 'Modify feature attribute',
-        disabled: readOnly,
-        onClick: () => {
-            session.queueDialog((doneCallback) => [
-                ModifyFeatureAttribute,
-                {
-                    session,
-                    handleClose: () => {
-                        doneCallback();
-                    },
-                    changeManager,
-                    sourceFeature,
-                    sourceAssemblyId: currentAssemblyId,
-                },
-            ]);
-        },
     }, {
         label: 'Edit feature details',
         onClick: () => {
@@ -7286,7 +7703,8 @@ function getContextMenuItems$2(display) {
     if (!featureTypeOntology) {
         throw new Error('featureTypeOntology is undefined');
     }
-    if (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') &&
+    if ((featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(sourceFeature.type, 'pseudogenic_transcript')) &&
         isSessionModelWithWidgets(session)) {
         menuItems.push({
             label: 'Edit transcript details',
@@ -7466,7 +7884,8 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
     // Draw lines on different rows for each transcript
     let currentRow = 0;
     for (const [, transcript] of children) {
-        const isTranscript = featureTypeOntology.isTypeOf(transcript.type, 'transcript');
+        const isTranscript = featureTypeOntology.isTypeOf(transcript.type, 'transcript') ||
+            featureTypeOntology.isTypeOf(transcript.type, 'pseudogenic_transcript');
         if (!isTranscript) {
             currentRow += 1;
             continue;
@@ -7493,7 +7912,8 @@ function draw$1(ctx, feature, row, stateModel, displayedRegionIndex) {
     // Draw exon and CDS for each transcript
     currentRow = 0;
     for (const [, child] of children) {
-        if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+        if (!(featureTypeOntology.isTypeOf(child.type, 'transcript') ||
+            featureTypeOntology.isTypeOf(child.type, 'pseudogenic_transcript'))) {
             boxGlyph.draw(ctx, child, row, stateModel, displayedRegionIndex);
             currentRow += 1;
             continue;
@@ -7683,7 +8103,8 @@ function getFeatureFromLayout$1(feature, bp, row, featureTypeOntology) {
         }
         if (featureTypeOntology.isTypeOf(featureObj.type, 'CDS') &&
             featureObj.parent &&
-            featureTypeOntology.isTypeOf(featureObj.parent.type, 'transcript')) {
+            (featureTypeOntology.isTypeOf(featureObj.parent.type, 'transcript') ||
+                featureTypeOntology.isTypeOf(featureObj.parent.type, 'pseudogenic_transcript'))) {
             const { cdsLocations } = featureObj.parent;
             for (const cdsLoc of cdsLocations) {
                 for (const loc of cdsLoc) {
@@ -7705,7 +8126,7 @@ function getCDSCount(feature, featureTypeOntology) {
     if (!children) {
         return 0;
     }
-    const isMrna = featureTypeOntology.isTypeOf(type, 'mRNA');
+    const isMrna = featureTypeOntology.isTypeOf(type, 'transcript');
     let cdsCount = 0;
     if (isMrna) {
         for (const [, child] of children) {
@@ -7721,7 +8142,8 @@ function getRowCount$1(feature, featureTypeOntology, _bpPerPx) {
     if (!children) {
         return 1;
     }
-    const isTranscript = featureTypeOntology.isTypeOf(type, 'transcript');
+    const isTranscript = featureTypeOntology.isTypeOf(type, 'transcript') ||
+        featureTypeOntology.isTypeOf(type, 'pseudogenic_transcript');
     let rowCount = 0;
     if (isTranscript) {
         for (const [, child] of children) {
@@ -7744,7 +8166,8 @@ function getRowCount$1(feature, featureTypeOntology, _bpPerPx) {
  * If the row does not contain an transcript, the order is subfeature -\> gene
  */
 function featuresForRow$1(feature, featureTypeOntology) {
-    const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene');
+    const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogene');
     if (!isGene) {
         throw new Error('Top level feature for GeneGlyph must have type "gene"');
     }
@@ -7754,7 +8177,8 @@ function featuresForRow$1(feature, featureTypeOntology) {
     }
     const features = [];
     for (const [, child] of children) {
-        if (!featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+        if (!(featureTypeOntology.isTypeOf(child.type, 'transcript') ||
+            featureTypeOntology.isTypeOf(child.type, 'pseudogenic_transcript'))) {
             features.push([child, feature]);
             continue;
         }
@@ -7829,8 +8253,10 @@ function getDraggableFeatureInfo(mousePosition, feature, stateModel) {
     if (!featureTypeOntology) {
         throw new Error('featureTypeOntology is undefined');
     }
-    const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene');
-    const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript');
+    const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogene');
+    const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript');
     const isCds = featureTypeOntology.isTypeOf(feature.type, 'CDS');
     if (isGene || isTranscript) {
         return;
@@ -7867,7 +8293,7 @@ function getDraggableFeatureInfo(mousePosition, feature, stateModel) {
             }
         }
         const overlappingExon = exonChildren.find((child) => {
-            const [start, end] = intersection2(bp, bp + 1, child.min, child.max);
+            const [start, end] = intersection2(bp - 1, bp, child.min, child.max);
             return start !== undefined && end !== undefined;
         });
         if (!overlappingExon) {
@@ -8076,12 +8502,14 @@ function layoutsModelFactory(pluginManager, configSchema) {
             if (!children?.size) {
                 return false;
             }
-            const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene');
+            const isGene = featureTypeOntology.isTypeOf(feature.type, 'gene') ||
+                featureTypeOntology.isTypeOf(feature.type, 'pseudogene');
             if (!isGene) {
                 return false;
             }
             for (const [, child] of children) {
-                if (featureTypeOntology.isTypeOf(child.type, 'transcript')) {
+                if (featureTypeOntology.isTypeOf(child.type, 'transcript') ||
+                    featureTypeOntology.isTypeOf(child.type, 'pseudogenic_transcript')) {
                     const { children: grandChildren } = child;
                     if (!grandChildren?.size) {
                         return false;
@@ -8351,6 +8779,8 @@ function codonColorCode(letter) {
     return colorMap[letter.toUpperCase()];
 }
 function reverseCodonSeq(seq) {
+    // disable because sequence is all ascii
+    // eslint-disable-next-line @typescript-eslint/no-misused-spread
     return [...seq]
         .map((c) => revcom(c))
         .reverse()
@@ -8421,6 +8851,8 @@ function sequenceRenderingModelFactory(pluginManager, configSchema) {
                     if (!seq) {
                         return;
                     }
+                    // disable because sequence is all ascii
+                    // eslint-disable-next-line @typescript-eslint/no-misused-spread
                     for (const [i, letter] of [...seq].entries()) {
                         const trnslXOffset = (self.lgv.bpToPx({
                             refName: region.refName,
@@ -8887,7 +9319,7 @@ const useStyles$1 = makeStyles()((theme) => ({
 const LinearApolloDisplay = observer(function LinearApolloDisplay(props) {
     const theme = useTheme();
     const { model } = props;
-    const { loading, apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setSeqTrackCanvas, setSeqTrackOverlayCanvas, setTheme, } = model;
+    const { loading, apolloDragging, apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setSeqTrackCanvas, setSeqTrackOverlayCanvas, setTheme, } = model;
     const { classes } = useStyles$1();
     const lgv = getContainingView(model);
     useEffect(() => {
@@ -8965,15 +9397,21 @@ const LinearApolloDisplay = observer(function LinearApolloDisplay(props) {
                         if (!feature) {
                             return null;
                         }
-                        const { topLevelFeature } = feature;
-                        const row = parent
-                            ? model.getFeatureLayoutPosition(topLevelFeature)
-                                ?.layoutRow ?? 0
-                            : 0;
+                        let row = 0;
+                        const featureLayout = model.getFeatureLayoutPosition(feature);
+                        if (featureLayout) {
+                            row = featureLayout.layoutRow + featureLayout.featureRow;
+                        }
                         const top = row * apolloRowHeight;
                         const height = apolloRowHeight;
                         return (React__default.createElement(Tooltip, { key: checkResult._id, title: checkResult.message },
-                            React__default.createElement(Avatar, { className: classes.avatar, style: { top, left, height, width: height } },
+                            React__default.createElement(Avatar, { className: classes.avatar, style: {
+                                    top,
+                                    left,
+                                    height,
+                                    width: height,
+                                    pointerEvents: apolloDragging ? 'none' : 'auto',
+                                } },
                                 React__default.createElement(ErrorIcon, null))));
                     });
                 }),
@@ -9092,22 +9530,22 @@ const DisplayComponent = observer(function DisplayComponent({ model, ...other })
     const { featureTypeOntology } = ontologyManager;
     const ontologyStore = featureTypeOntology?.dataStore;
     const { classes } = useStyles();
-    const { detailsHeight, graphical, height: overallHeight, isShown, selectedFeature, table, tabularEditor, toggleShown, } = model;
+    const { graphical, height: overallHeight, isShown, selectedFeature, table, tabularEditor, toggleShown, } = model;
     const canvasScrollContainerRef = useRef(null);
     useEffect(() => {
         scrollSelectedFeatureIntoView(model, canvasScrollContainerRef);
     }, [model, selectedFeature]);
     const onDetailsResize = (delta) => {
-        model.setDetailsHeight(detailsHeight - delta);
+        model.setDetailsHeight(model.detailsHeight - delta);
     };
     if (!ontologyStore) {
         return (React__default.createElement("div", { className: classes.alertContainer },
             React__default.createElement(Alert, { severity: "error" }, "Could not load feature type ontology.")));
     }
     if (graphical && table) {
-        const tabularHeight = tabularEditor.isShown ? detailsHeight : 0;
+        const tabularHeight = tabularEditor.isShown ? model.detailsHeight : 0;
         const featureAreaHeight = isShown
-            ? overallHeight - detailsHeight - accordionControlHeight * 2
+            ? overallHeight - model.detailsHeight - accordionControlHeight * 2
             : 0;
         return (React__default.createElement("div", { style: { height: overallHeight } },
             React__default.createElement(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }),
@@ -10652,7 +11090,8 @@ function stateModelFactory(pluginManager, configSchema) {
                     return start1 - start2 || end1 - end2;
                 })) {
                     for (const [, childFeature] of feature.children ?? new Map()) {
-                        if (featureTypeOntology.isTypeOf(childFeature.type, 'transcript')) {
+                        if (featureTypeOntology.isTypeOf(childFeature.type, 'transcript') ||
+                            featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) {
                             for (const [, grandChildFeature] of childFeature.children ||
                                 new Map()) {
                                 let startingRow;