@apollo-annotation/jbrowse-plugin-apollo 0.3.6 → 0.3.7

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

@@ -95,7 +95,7 @@ var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon)
 var ErrorIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorIcon);
 var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
 
-var version = "0.3.6";
+var version = "0.3.7";
 
 const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -175,7 +175,7 @@ async function checkFeatures(assembly) {
     return checkResults;
 }
 
-function getFeatureName(feature) {
+function getFeatureName$1(feature) {
     const { attributes } = feature;
     const name = attributes.get('gff_name');
     if (name) {
@@ -204,7 +204,7 @@ function getFeatureId$1(feature) {
     return '';
 }
 function getFeatureNameOrId$1(feature) {
-    const name = getFeatureName(feature);
+    const name = getFeatureName$1(feature);
     const id = getFeatureId$1(feature);
     if (name) {
         return `: ${name}`;
@@ -223,6 +223,164 @@ function getStrand(strand) {
     }
     return '';
 }
+function getChildren(feature) {
+    const children = [];
+    //
+    if (feature.children) {
+        for (const [, ff] of feature.children) {
+            children.push(ff);
+        }
+    }
+    return children;
+}
+function getParents(feature) {
+    const parents = [];
+    let { parent } = feature;
+    while (parent) {
+        parents.push(parent);
+        ({ parent } = parent);
+    }
+    return parents;
+}
+function getFeaturesUnderClick(mousePosition, includeSiblings = false) {
+    const clickedFeatures = [];
+    if (!mousePosition.featureAndGlyphUnderMouse) {
+        return clickedFeatures;
+    }
+    clickedFeatures.push(mousePosition.featureAndGlyphUnderMouse.feature);
+    for (const x of getParents(mousePosition.featureAndGlyphUnderMouse.feature)) {
+        clickedFeatures.push(x);
+    }
+    const { bp } = mousePosition;
+    const children = getChildren(mousePosition.featureAndGlyphUnderMouse.feature);
+    for (const child of children) {
+        if (child.min < bp && child.max >= bp) {
+            clickedFeatures.push(child);
+        }
+    }
+    if (!includeSiblings) {
+        return clickedFeatures;
+    }
+    // Also add siblings , i.e. features having the same parent as the clicked
+    // one and intersecting the click position
+    if (mousePosition.featureAndGlyphUnderMouse.feature.parent) {
+        const siblings = mousePosition.featureAndGlyphUnderMouse.feature.parent.children;
+        if (siblings) {
+            for (const [, sib] of siblings) {
+                if (sib._id == mousePosition.featureAndGlyphUnderMouse.feature._id) {
+                    continue;
+                }
+                if (sib.min < bp && sib.max >= bp) {
+                    clickedFeatures.push(sib);
+                }
+            }
+        }
+    }
+    return clickedFeatures;
+}
+
+function getMinAndMaxPx(feature, refName, regionNumber, lgv) {
+    const minPxInfo = lgv.bpToPx({
+        refName,
+        coord: feature.min,
+        regionNumber,
+    });
+    const maxPxInfo = lgv.bpToPx({
+        refName,
+        coord: feature.max,
+        regionNumber,
+    });
+    if (minPxInfo === undefined || maxPxInfo === undefined) {
+        return;
+    }
+    const { offsetPx } = lgv;
+    const minPx = minPxInfo.offsetPx - offsetPx;
+    const maxPx = maxPxInfo.offsetPx - offsetPx;
+    return [minPx, maxPx];
+}
+function getOverlappingEdge(feature, x, minMax) {
+    const [minPx, maxPx] = minMax;
+    // Feature is too small to tell if we're overlapping an edge
+    if (Math.abs(maxPx - minPx) < 8) {
+        return;
+    }
+    if (Math.abs(minPx - x) < 4) {
+        return { feature, edge: 'min' };
+    }
+    if (Math.abs(maxPx - x) < 4) {
+        return { feature, edge: 'max' };
+    }
+    return;
+}
+
+function expandFeatures(feature, newLocation, edge) {
+    const featureId = feature._id;
+    const oldLocation = feature[edge];
+    const changes = [{ featureId, oldLocation, newLocation }];
+    const { parent } = feature;
+    if (parent &&
+        ((edge === 'min' && parent[edge] > newLocation) ||
+            (edge === 'max' && parent[edge] < newLocation))) {
+        changes.push(...expandFeatures(parent, newLocation, edge));
+    }
+    return changes;
+}
+function shrinkFeatures(feature, newLocation, edge, shrinkParent, childIdToSkip) {
+    const featureId = feature._id;
+    const oldLocation = feature[edge];
+    const changes = [{ featureId, oldLocation, newLocation }];
+    const { parent, children } = feature;
+    if (children) {
+        for (const [, child] of children) {
+            if (child._id === childIdToSkip) {
+                continue;
+            }
+            if ((edge === 'min' && child[edge] < newLocation) ||
+                (edge === 'max' && child[edge] > newLocation)) {
+                changes.push(...shrinkFeatures(child, newLocation, edge, shrinkParent));
+            }
+        }
+    }
+    if (parent && shrinkParent) {
+        const siblings = [];
+        if (parent.children) {
+            for (const [, c] of parent.children) {
+                if (c._id === featureId) {
+                    continue;
+                }
+                siblings.push(c);
+            }
+        }
+        if (siblings.length === 0) {
+            changes.push(...shrinkFeatures(parent, newLocation, edge, shrinkParent, featureId));
+        }
+        else {
+            const oldLocation = parent[edge];
+            const boundedLocation = Math[edge](...siblings.map((s) => s[edge]), newLocation);
+            if (boundedLocation !== oldLocation) {
+                changes.push(...shrinkFeatures(parent, boundedLocation, edge, shrinkParent, featureId));
+            }
+        }
+    }
+    return changes;
+}
+function getPropagatedLocationChanges(feature, newLocation, edge, shrinkParent = false) {
+    const oldLocation = feature[edge];
+    if (newLocation === oldLocation) {
+        throw new Error(`New and existing locations are the same: "${newLocation}"`);
+    }
+    if (edge === 'min') {
+        if (newLocation > oldLocation) {
+            // shrinking feature, may need to shrink children and/or parents
+            return shrinkFeatures(feature, newLocation, edge, shrinkParent);
+        }
+        return expandFeatures(feature, newLocation, edge);
+    }
+    if (newLocation < oldLocation) {
+        return shrinkFeatures(feature, newLocation, edge, shrinkParent);
+    }
+    return expandFeatures(feature, newLocation, edge);
+}
 
 async function createFetchErrorMessage(response, additionalText) {
     let errorMessage;
@@ -1541,7 +1699,9 @@ const OntologyRecordType = mobxStateTree.types
         const equivalents = terms
             .map((term) => term.lbl)
             .filter((term) => term != undefined);
-        self.setEquivalentTypes(type, equivalents);
+        if (mobxStateTree.isAlive(self)) {
+            self.setEquivalentTypes(type, equivalents);
+        }
     }),
 }))
     .actions((self) => ({
@@ -1822,8 +1982,8 @@ async function getValidTerms(ontologyStore, fetchValidTerms, filterTerms, signal
     return filterTerms ? result.filter((element) => filterTerms(element)) : result;
 }
 
+/* eslint-disable @typescript-eslint/unbound-method */
 function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId, sourceFeature, }) {
-    const { notify } = session;
     const [end, setEnd] = React.useState(String(sourceFeature.max));
     const [start, setStart] = React.useState(String(sourceFeature.min + 1));
     const [type, setType] = React.useState('');
@@ -1837,7 +1997,7 @@ function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId
         }
         return terms;
     }
-    async function onSubmit(event) {
+    function onSubmit(event) {
         event.preventDefault();
         setErrorMessage('');
         const change = new shared.AddFeatureChange({
@@ -1853,8 +2013,7 @@ function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId
             },
             parentFeatureId: sourceFeature._id,
         });
-        await changeManager.submit(change);
-        notify('Feature added successfully', 'success');
+        void changeManager.submit(change);
         handleClose();
         event.preventDefault();
     }
@@ -1884,6 +2043,7 @@ function AddChildFeature({ changeManager, handleClose, session, sourceAssemblyId
             React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
+/* eslint-disable @typescript-eslint/unbound-method */
 var NewFeature;
 (function (NewFeature) {
     NewFeature["GENE_AND_SUBFEATURES"] = "GENE_AND_SUBFEATURES";
@@ -1922,14 +2082,13 @@ function makeCodingMrna(refSeqId, strand, min, max) {
     return mRNA;
 }
 function AddFeature({ changeManager, handleClose, region, session, }) {
-    const { notify } = session;
     const [end, setEnd] = React.useState(String(region.end));
     const [start, setStart] = React.useState(String(region.start + 1));
     const [type, setType] = React.useState(NewFeature.GENE_AND_SUBFEATURES);
     const [customType, setCustomType] = React.useState();
     const [strand, setStrand] = React.useState();
     const [errorMessage, setErrorMessage] = React.useState('');
-    async function onSubmit(event) {
+    function onSubmit(event) {
         event.preventDefault();
         setErrorMessage('');
         let refSeqId;
@@ -1943,7 +2102,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
             }
         }
         if (!refSeqId) {
-            setErrorMessage('Invalid refseq id');
+            setErrorMessage('Invalid refseq id. Make sure you have the Apollo annotation track open');
             return;
         }
         if (type === NewFeature.GENE_AND_SUBFEATURES) {
@@ -1965,8 +2124,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
                     children,
                 },
             });
-            await changeManager.submit(change);
-            notify('Feature added successfully', 'success');
+            void changeManager.submit(change);
             handleClose();
             return;
         }
@@ -1978,8 +2136,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
                 assembly: region.assemblyName,
                 addedFeature: mRNA,
             });
-            await changeManager.submit(change);
-            notify('Feature added successfully', 'success');
+            void changeManager.submit(change);
             handleClose();
             return;
         }
@@ -2001,8 +2158,7 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
                 strand,
             },
         });
-        await changeManager.submit(change);
-        notify('Feature added successfully', 'success');
+        void changeManager.submit(change);
         handleClose();
         return;
     }
@@ -2035,7 +2191,9 @@ function AddFeature({ changeManager, handleClose, region, session, }) {
         }
     };
     let submitDisabled = Boolean(error) || !(start && end && type);
-    if (type === NewFeature.CUSTOM && !customType) {
+    if ((type === NewFeature.CUSTOM && !customType) ||
+        (!strand && type === NewFeature.GENE_AND_SUBFEATURES) ||
+        (!strand && type === NewFeature.TRANSCRIPT_AND_SUBFEATURES)) {
         submitDisabled = true;
     }
     return (React__default["default"].createElement(Dialog, { open: true, title: "Add new feature", handleClose: handleClose, maxWidth: false, "data-testid": "add-feature-dialog" },
@@ -2107,7 +2265,7 @@ feature, featureIds) {
     };
 }
 function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, sourceFeature, }) {
-    const { assemblyManager, notify } = session;
+    const { assemblyManager } = session;
     const assemblies = assemblyManager.assemblyList;
     const [selectedAssemblyId, setSelectedAssemblyId] = React.useState(assemblies.find((a) => a.name !== sourceAssemblyId)?.name);
     const [refNames, setRefNames] = React.useState([]);
@@ -2206,8 +2364,7 @@ function CopyFeature({ changeManager, handleClose, session, sourceAssemblyId, so
             copyFeature: true,
             allIds: featureIds,
         });
-        await changeManager.submit(change);
-        notify('Feature copied successfully', 'success');
+        void changeManager.submit(change);
         handleClose();
         event.preventDefault();
     }
@@ -2331,30 +2488,318 @@ function DeleteAssembly({ changeManager, handleClose, session, }) {
             React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
+/* eslint-disable @typescript-eslint/unbound-method */
+function lumpLocationChanges(changes, assembly) {
+    if (changes.length === 0) {
+        return;
+    }
+    const locationStartChange = new shared.LocationStartChange({
+        typeName: 'LocationStartChange',
+        changedIds: [],
+        changes: [],
+        assembly,
+    });
+    const locationEndChange = new shared.LocationEndChange({
+        typeName: 'LocationEndChange',
+        changedIds: [],
+        changes: [],
+        assembly,
+    });
+    for (const change of changes) {
+        if (change.typeName === 'LocationStartChange') {
+            locationStartChange.changedIds.push(change.changedId);
+            const cc = {
+                featureId: change.featureId,
+                oldStart: change.oldLocation,
+                newStart: change.newLocation,
+            };
+            locationStartChange.changes.push(cc);
+        }
+        if (change.typeName === 'LocationEndChange') {
+            locationEndChange.changedIds.push(change.changedId);
+            const cc = {
+                featureId: change.featureId,
+                oldEnd: change.oldLocation,
+                newEnd: change.newLocation,
+            };
+            locationEndChange.changes.push(cc);
+        }
+    }
+    if (locationStartChange.changedIds.length > 0 &&
+        locationEndChange.changedIds.length === 0) {
+        return locationStartChange;
+    }
+    if (locationEndChange.changedIds.length > 0 &&
+        locationStartChange.changedIds.length === 0) {
+        return locationEndChange;
+    }
+    throw new Error('Unexpected list of changes');
+}
 function DeleteFeature({ changeManager, handleClose, selectedFeature, session, setSelectedFeature, sourceAssemblyId, sourceFeature, }) {
-    const { notify } = session;
     const [errorMessage, setErrorMessage] = React.useState('');
+    const { ontologyManager } = session.apolloDataStore;
+    const { featureTypeOntology } = ontologyManager;
+    function trimCDS(sourceFeature) {
+        if (!featureTypeOntology) {
+            return;
+        }
+        if (!featureTypeOntology.isTypeOf(sourceFeature.type, 'exon')) {
+            return;
+        }
+        if (!sourceFeature.parent?.cdsLocations ||
+            sourceFeature.parent.cdsLocations.length === 0 ||
+            sourceFeature.parent.cdsLocations[0].length === 0) {
+            // No CDS - parent of this exon is a non-coding transcript
+            return;
+        }
+        if (!sourceFeature.parent.children) {
+            throw new Error('Unable to find parent of CDS');
+        }
+        if (sourceFeature.parent.cdsLocations.length != 1) {
+            throw new Error('Unable to handle a transcript with multiple CDSs');
+        }
+        const _cdsLocations = sourceFeature.parent.cdsLocations.at(0) ?? [];
+        const cdsLocations = _cdsLocations.sort(({ min: a }, { min: b }) => a - b);
+        let cdsFeature;
+        for (const child of sourceFeature.parent.children.values()) {
+            if (child.type === cdsLocations[0].type) {
+                cdsFeature = child;
+                break;
+            }
+        }
+        if (!cdsFeature) {
+            throw new Error('Unable to find CDS');
+        }
+        const cdsStart = cdsLocations[0].min;
+        // eslint-disable-next-line unicorn/prefer-at
+        const cdsEnd = cdsLocations[cdsLocations.length - 1].max;
+        if ((sourceFeature.min > cdsStart && sourceFeature.max < cdsEnd) ||
+            sourceFeature.max < cdsStart ||
+            sourceFeature.min > cdsEnd) {
+            // No adjustment if the exon being deleted is fully contained in the CDS
+            // or completely outside of the CDS
+            return;
+        }
+        if (sourceFeature.min <= cdsStart && sourceFeature.max >= cdsEnd) {
+            // CDS is fully contained in the exon, delete CDS
+            return new shared.DeleteFeatureChange({
+                changedIds: [cdsFeature._id],
+                typeName: 'DeleteFeatureChange',
+                assembly: sourceAssemblyId,
+                changes: [
+                    {
+                        deletedFeature: mobxStateTree.getSnapshot(cdsFeature),
+                        parentFeatureId: cdsFeature.parent?._id,
+                    },
+                ],
+            });
+        }
+        if (sourceFeature.min <= cdsStart && sourceFeature.max > cdsStart) {
+            // Exon overlaps the start of the CDS so we need to move the CDS start
+            let newCdsStart;
+            for (const cdsLocation of cdsLocations) {
+                if (cdsLocation.min > sourceFeature.max) {
+                    newCdsStart = cdsLocation.min;
+                    break;
+                }
+            }
+            if (!newCdsStart) {
+                throw new Error('Error setting new CDS start');
+            }
+            return {
+                typeName: 'LocationStartChange',
+                changedId: cdsFeature._id,
+                featureId: cdsFeature._id,
+                oldLocation: cdsFeature.min,
+                newLocation: newCdsStart,
+            };
+        }
+        if (sourceFeature.min < cdsEnd && sourceFeature.max >= cdsEnd) {
+            // Exon overlaps the end of the CDS so we need to move the CDS end
+            let newCdsEnd;
+            for (const cdsLocation of cdsLocations.reverse()) {
+                if (cdsLocation.max < sourceFeature.min) {
+                    newCdsEnd = cdsLocation.max;
+                    break;
+                }
+            }
+            if (!newCdsEnd) {
+                throw new Error('Error setting new CDS end');
+            }
+            return {
+                typeName: 'LocationEndChange',
+                changedId: cdsFeature._id,
+                featureId: cdsFeature._id,
+                oldLocation: cdsFeature.max,
+                newLocation: newCdsEnd,
+            };
+        }
+        throw new Error('Unexpected relationship between exon and CDS');
+    }
+    function trimParent(featureToDelete) {
+        if (!featureToDelete.parent?.children ||
+            featureToDelete.parent.children.size === 1) {
+            // Do not resize if this parent has only one child (i.e. the feature being deleted)
+            return;
+        }
+        const childrenByStart = [];
+        for (const x of featureToDelete.parent.children.values()) {
+            if (!featureTypeOntology?.isTypeOf(x.type, 'CDS')) {
+                // CDS has been already handled so don't use it to resize parent
+                childrenByStart.push(x);
+            }
+        }
+        childrenByStart.sort((a, b) => a.min - b.min);
+        const childrenByEnd = [];
+        for (const x of featureToDelete.parent.children.values()) {
+            if (!featureTypeOntology?.isTypeOf(x.type, 'CDS')) {
+                // CDS has been already handled so don't use it to resize parent
+                childrenByEnd.push(x);
+            }
+        }
+        childrenByEnd.sort((a, b) => b.max - a.max);
+        if (featureToDelete.min === childrenByStart[0].min) {
+            // The feature to delete has the lowest start coordinate of all children
+            // Find the next lowest coordinate and reset parent to this new start
+            let newParentFeatureStart;
+            for (const child of childrenByStart) {
+                if (child._id !== featureToDelete._id &&
+                    child.min >= featureToDelete.min) {
+                    newParentFeatureStart = child.min;
+                    break;
+                }
+            }
+            if (newParentFeatureStart &&
+                newParentFeatureStart != featureToDelete.parent.min) {
+                return {
+                    typeName: 'LocationStartChange',
+                    changedId: featureToDelete.parent._id,
+                    featureId: featureToDelete.parent._id,
+                    oldLocation: featureToDelete.parent.min,
+                    newLocation: newParentFeatureStart,
+                };
+            }
+        }
+        if (featureToDelete.max === childrenByEnd[0].max) {
+            // The feature to delete has the highest end coordinate of all children
+            // Find the next highest coordinate and reset parent to this new end
+            let newParentFeatureEnd;
+            for (const child of childrenByEnd) {
+                if (child._id != featureToDelete._id &&
+                    child.max <= featureToDelete.max) {
+                    newParentFeatureEnd = child.max;
+                    break;
+                }
+            }
+            if (newParentFeatureEnd &&
+                newParentFeatureEnd != featureToDelete.parent.max) {
+                return {
+                    typeName: 'LocationEndChange',
+                    changedId: featureToDelete.parent._id,
+                    featureId: featureToDelete.parent._id,
+                    oldLocation: featureToDelete.parent.max,
+                    newLocation: newParentFeatureEnd,
+                };
+            }
+        }
+        return;
+    }
     async function onSubmit(event) {
         event.preventDefault();
         setErrorMessage('');
         if (selectedFeature?._id === sourceFeature._id) {
             setSelectedFeature();
         }
-        // Delete features
-        const change = new shared.DeleteFeatureChange({
+        const locationChanges = [];
+        // const deleteChanges: DeleteFeatureChange = []
+        const deleteChanges = new shared.DeleteFeatureChange({
             changedIds: [sourceFeature._id],
             typeName: 'DeleteFeatureChange',
             assembly: sourceAssemblyId,
-            deletedFeature: mobxStateTree.getSnapshot(sourceFeature),
-            parentFeatureId: sourceFeature.parent?._id,
+            changes: [
+                {
+                    deletedFeature: mobxStateTree.getSnapshot(sourceFeature),
+                    parentFeatureId: sourceFeature.parent?._id,
+                },
+            ],
         });
-        await changeManager.submit(change);
-        notify('Feature deleted successfully', 'success');
+        if (featureTypeOntology &&
+            (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') ||
+                featureTypeOntology.isTypeOf(sourceFeature.type, 'pseudogenic_transcript'))) {
+            const geneChange = trimParent(sourceFeature);
+            if (geneChange) {
+                locationChanges.push(geneChange);
+            }
+        }
+        if (featureTypeOntology &&
+            featureTypeOntology.isTypeOf(sourceFeature.type, 'exon')) {
+            const cdsChange = trimCDS(sourceFeature);
+            if (cdsChange) {
+                if (cdsChange.typeName === 'DeleteFeatureChange') {
+                    deleteChanges.changedIds.push(...cdsChange.changedIds);
+                    deleteChanges.changes.push(...cdsChange.changes);
+                }
+                else {
+                    locationChanges.push(cdsChange);
+                }
+            }
+            const txChange = trimParent(sourceFeature);
+            if (txChange) {
+                locationChanges.push(txChange);
+                // Parent transcript has changed. See if we need to resize the parent gene
+                const gene = sourceFeature.parent?.parent;
+                if (gene?.children) {
+                    if (txChange.typeName === 'LocationStartChange') {
+                        let newGeneStart = txChange.newLocation;
+                        for (const [, tx] of gene.children) {
+                            if (tx._id != txChange.featureId && tx.min < newGeneStart) {
+                                // Reset to longest child (tx)
+                                newGeneStart = tx.min;
+                            }
+                        }
+                        if (newGeneStart != gene.min) {
+                            locationChanges.push({
+                                typeName: txChange.typeName,
+                                changedId: gene._id,
+                                featureId: gene._id,
+                                oldLocation: gene.min,
+                                newLocation: newGeneStart,
+                            });
+                        }
+                    }
+                    else {
+                        let newGeneEnd = txChange.newLocation;
+                        for (const [, tx] of gene.children) {
+                            if (tx._id != txChange.featureId && tx.max > newGeneEnd) {
+                                // Reset to longest child (tx)
+                                newGeneEnd = tx.max;
+                            }
+                        }
+                        if (newGeneEnd != gene.max) {
+                            locationChanges.push({
+                                typeName: txChange.typeName,
+                                changedId: gene._id,
+                                featureId: gene._id,
+                                oldLocation: gene.max,
+                                newLocation: newGeneEnd,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        const lumpedLocChanges = lumpLocationChanges(locationChanges, sourceAssemblyId);
+        await changeManager.submit(deleteChanges);
+        if (lumpedLocChanges) {
+            await changeManager.submit(lumpedLocChanges);
+        }
         handleClose();
         event.preventDefault();
     }
     return (React__default["default"].createElement(Dialog, { open: true, title: "Delete feature", handleClose: handleClose, maxWidth: false, "data-testid": "delete-feature" },
-        React__default["default"].createElement("form", { onSubmit: onSubmit },
+        React__default["default"].createElement("form", { onSubmit: (event) => {
+                void onSubmit(event);
+            } },
             React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
                 React__default["default"].createElement(material.DialogContentText, null, "Are you sure you want to delete the selected feature?")),
             React__default["default"].createElement(material.DialogActions, null,
@@ -2365,6 +2810,7 @@ function DeleteFeature({ changeManager, handleClose, selectedFeature, session, s
 }
 
 function DownloadGFF3({ handleClose, session }) {
+    const [includeFASTA, setincludeFASTA] = React.useState(false);
     const [selectedAssembly, setSelectedAssembly] = React.useState();
     const [errorMessage, setErrorMessage] = React.useState('');
     const { collaborationServerDriver, getInternetAccount, inMemoryFileDriver } = session.apolloDataStore;
@@ -2421,7 +2867,7 @@ function DownloadGFF3({ handleClose, session }) {
         const exportURL = new URL('export', internetAccount.baseURL);
         const params = {
             exportID,
-            includeFASTA: 'true',
+            includeFASTA: includeFASTA ? 'true' : 'false',
         };
         const exportSearchParams = new URLSearchParams(params);
         exportURL.search = exportSearchParams.toString();
@@ -2475,7 +2921,11 @@ function DownloadGFF3({ handleClose, session }) {
             React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
                 React__default["default"].createElement(material.DialogContentText, null, "Select assembly"),
                 React__default["default"].createElement(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0 }, assemblies.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option.name, value: option.name }, option.displayName ?? option.name)))),
-                React__default["default"].createElement(material.DialogContentText, null, "Select assembly to export to GFF3")),
+                React__default["default"].createElement(material.DialogContentText, null, "Select assembly to export to GFF3"),
+                React__default["default"].createElement(material.FormGroup, null,
+                    React__default["default"].createElement(material.FormControlLabel, { "data-testid": "include-fasta-checkbox", control: React__default["default"].createElement(material.Checkbox, { checked: includeFASTA, onChange: () => {
+                                setincludeFASTA(!includeFASTA);
+                            } }), label: "Include fasta sequence in GFF output" }))),
             React__default["default"].createElement(material.DialogActions, null,
                 React__default["default"].createElement(material.Button, { disabled: !selectedAssembly, variant: "contained", type: "submit" }, "Download"),
                 React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
@@ -2954,70 +3404,254 @@ function ManageUsers({ changeManager, handleClose, session, }) {
             React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-function OpenLocalFile({ handleClose, session }) {
-    const { apolloDataStore } = session;
-    const { addAssembly, addSessionAssembly, assemblyManager, notify } = session;
-    const [file, setFile] = React.useState(null);
-    const [assemblyName, setAssemblyName] = React.useState('');
-    const [errorMessage, setErrorMessage] = React.useState('');
-    const [submitted, setSubmitted] = React.useState(false);
-    const theme = material.useTheme();
-    function handleChangeFile(e) {
-        const selectedFile = e.target.files?.item(0);
-        if (!selectedFile) {
-            return;
+/* eslint-disable @typescript-eslint/unbound-method */
+function getNeighboringExons(referenceExon) {
+    const neighboringExons = {};
+    const tx = referenceExon.parent;
+    if (!tx) {
+        throw new Error('Unable to find parent of reference exon');
+    }
+    let exons = [];
+    if (tx.children) {
+        for (const [, feature] of tx.children) {
+            if (feature.type === 'exon') {
+                exons.push(feature);
+            }
         }
-        setErrorMessage('');
-        setFile(selectedFile);
-        if (!assemblyName) {
-            const fileName = selectedFile.name;
-            const lastDotIndex = fileName.lastIndexOf('.');
-            if (lastDotIndex === -1) {
-                setAssemblyName(fileName);
+    }
+    exons = exons.sort((a, b) => {
+        if (a.min === b.min) {
+            return a.max - b.max;
+        }
+        return a.min - b.min;
+    });
+    if (tx.strand && tx.strand === -1) {
+        exons = exons.reverse();
+    }
+    let i = 0;
+    for (const x of exons) {
+        if (x._id === referenceExon._id) {
+            if (exons.length > i + 1) {
+                neighboringExons.three_prime = exons[i + 1];
             }
-            else {
-                setAssemblyName(fileName.slice(0, lastDotIndex));
+            if (i > 0) {
+                neighboringExons.five_prime = exons[i - 1];
             }
+            break;
         }
+        i++;
     }
-    async function onSubmit(event) {
+    return neighboringExons;
+}
+function makeRadioButtonName$1(key, neighboringExons) {
+    const neighboringExon = neighboringExons[key];
+    let name;
+    if (key === 'three_prime') {
+        name = `3'end (coords: ${neighboringExon.min + 1}-${neighboringExon.max})`;
+    }
+    else if (key === 'five_prime') {
+        name = `5'end (coords: ${neighboringExon.min + 1}-${neighboringExon.max})`;
+    }
+    else {
+        throw new Error(`Unexpected direction: "${key}"`);
+    }
+    return name;
+}
+function MergeExons({ changeManager, handleClose, selectedFeature, setSelectedFeature, sourceAssemblyId, sourceFeature, }) {
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const [selectedExon, setSelectedExon] = React.useState();
+    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.nanoid(8)}`;
-        try {
-            await loadAssemblyIntoClient(assemblyId, fileData, apolloDataStore);
-        }
-        catch (error) {
-            console.error(error);
-            notify(`Error loading GFF3 ${file.name}, ${String(error)}`, 'error');
-            handleClose();
+        const { parent } = sourceFeature;
+        if (!(selectedExon && parent)) {
             return;
         }
-        const assemblyConfig = {
-            name: assemblyId,
-            aliases: [assemblyName],
-            displayName: assemblyName,
-            sequence: {
-                trackId: `sequenceConfigId-${assemblyName}`,
-                type: 'ReferenceSequenceTrack',
-                adapter: { type: 'ApolloSequenceAdapter', assemblyId },
-                metadata: {
-                    apollo: true,
-                    ...(util.isElectron
-                        ? { file: file.path }
-                        : {}),
-                },
-            },
-        };
-        // Save assembly into session
-        await (addSessionAssembly || addAssembly)(assemblyConfig);
+        if (selectedFeature?._id === sourceFeature._id) {
+            setSelectedFeature();
+        }
+        const change = new shared.MergeExonsChange({
+            changedIds: [sourceFeature._id],
+            typeName: 'MergeExonsChange',
+            assembly: sourceAssemblyId,
+            firstExon: mobxStateTree.getSnapshot(sourceFeature),
+            secondExon: mobxStateTree.getSnapshot(selectedExon),
+            parentFeatureId: parent._id,
+        });
+        void changeManager.submit(change);
+        handleClose();
+        event.preventDefault();
+    }
+    const handleTypeChange = (e) => {
+        setErrorMessage('');
+        const { value } = e.target;
+        setSelectedExon(neighboringExons[value]);
+    };
+    const neighboringExons = getNeighboringExons(sourceFeature);
+    return (React__default["default"].createElement(Dialog, { open: true, title: "Merge exons", handleClose: handleClose, maxWidth: false, "data-testid": "merge-exons" },
+        React__default["default"].createElement("form", { onSubmit: onSubmit },
+            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
+                Object.keys(neighboringExons).length === 0
+                    ? 'There are no neighbouring exons to merge with'
+                    : 'Merge with exon on:',
+                React__default["default"].createElement(material.FormControl, { style: { marginTop: 5 } },
+                    React__default["default"].createElement(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedExon, onChange: handleTypeChange }, Object.keys(neighboringExons).map((key) => (React__default["default"].createElement(material.FormControlLabel, { value: key, key: key, control: React__default["default"].createElement(material.Radio, null), label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" }, makeRadioButtonName$1(key, neighboringExons)) })))))),
+            React__default["default"].createElement(material.DialogActions, null,
+                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: Object.keys(neighboringExons).length === 0 ||
+                        selectedExon === undefined }, "Submit"),
+                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
+        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+}
+
+function getTranscripts(referenceTranscript, session) {
+    const gene = referenceTranscript.parent;
+    if (!gene) {
+        throw new Error('Unable to find parent of reference transcript');
+    }
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    const transcripts = {};
+    if (gene.children) {
+        for (const [, feature] of gene.children) {
+            if (featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+                feature._id !== referenceTranscript._id) {
+                transcripts[feature._id] = feature;
+            }
+        }
+    }
+    return transcripts;
+}
+function makeRadioButtonName(transcript) {
+    let id;
+    if (transcript.attributes.get('gff_name')) {
+        id = transcript.attributes.get('gff_name')?.join(',');
+    }
+    else if (transcript.attributes.get('gff_id')) {
+        id = transcript.attributes.get('gff_id')?.join(',');
+    }
+    else {
+        id = transcript._id;
+    }
+    return `${id} [${transcript.min + 1}-${transcript.max}]`;
+}
+function MergeTranscripts({ changeManager, handleClose, selectedFeature, session, setSelectedFeature, sourceAssemblyId, sourceFeature, }) {
+    const { notify } = session;
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const [selectedTranscript, setSelectedTranscript] = React.useState();
+    async function onSubmit(event) {
+        event.preventDefault();
+        setErrorMessage('');
+        if (!selectedTranscript) {
+            return;
+        }
+        if (selectedFeature?._id === sourceFeature._id) {
+            setSelectedFeature();
+        }
+        if (!sourceFeature.parent) {
+            throw new Error('Cannot find parent');
+        }
+        const change = new shared.MergeTranscriptsChange({
+            changedIds: [sourceFeature._id],
+            typeName: 'MergeTranscriptsChange',
+            assembly: sourceAssemblyId,
+            firstTranscript: mobxStateTree.getSnapshot(sourceFeature),
+            secondTranscript: mobxStateTree.getSnapshot(selectedTranscript),
+            parentFeatureId: sourceFeature.parent._id,
+        });
+        await changeManager.submit(change);
+        notify('Transcripts successfully merged', 'success');
+        handleClose();
+        event.preventDefault();
+    }
+    const handleTypeChange = (e) => {
+        setErrorMessage('');
+        const { value } = e.target;
+        setSelectedTranscript(transcripts[value]);
+    };
+    const transcripts = getTranscripts(sourceFeature, session);
+    return (React__default["default"].createElement(Dialog, { open: true, title: "Merge transcripts", handleClose: handleClose, maxWidth: false, "data-testid": "merge-transcripts" },
+        React__default["default"].createElement("form", { onSubmit: onSubmit },
+            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
+                Object.keys(transcripts).length === 0
+                    ? 'There are no transcripts to merge with'
+                    : 'Merge with transcript:',
+                React__default["default"].createElement(material.FormControl, { style: { marginTop: 5 } },
+                    React__default["default"].createElement(material.RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", name: "radio-buttons-group", value: selectedTranscript, onChange: handleTypeChange }, Object.keys(transcripts).map((key) => (React__default["default"].createElement(material.FormControlLabel, { value: key, key: key, control: React__default["default"].createElement(material.Radio, null), label: React__default["default"].createElement(material.Box, { display: "flex", alignItems: "center" }, makeRadioButtonName(transcripts[key])) })))))),
+            React__default["default"].createElement(material.DialogActions, null,
+                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: Object.keys(transcripts).length === 0 ||
+                        selectedTranscript === undefined }, "Submit"),
+                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
+        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+}
+
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+function OpenLocalFile({ handleClose, session }) {
+    const { apolloDataStore } = session;
+    const { addAssembly, addSessionAssembly, assemblyManager, notify } = session;
+    const [file, setFile] = React.useState(null);
+    const [assemblyName, setAssemblyName] = React.useState('');
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const [submitted, setSubmitted] = React.useState(false);
+    const theme = material.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.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 = {
+            name: assemblyId,
+            aliases: [assemblyName],
+            displayName: assemblyName,
+            sequence: {
+                trackId: `sequenceConfigId-${assemblyName}`,
+                type: 'ReferenceSequenceTrack',
+                adapter: { type: 'ApolloSequenceAdapter', assemblyId },
+                metadata: {
+                    apollo: true,
+                    ...(util.isElectron
+                        ? { file: file.path }
+                        : {}),
+                },
+            },
+        };
+        // Save assembly into session
+        await (addSessionAssembly || addAssembly)(assemblyConfig);
         const a = await assemblyManager.waitForAssembly(assemblyConfig.name);
         if (a) {
             // @ts-expect-error MST type coercion problem?
@@ -3173,7 +3807,7 @@ function ViewChangeLog({ handleClose, session }) {
 }
 
 /* eslint-disable @typescript-eslint/unbound-method */
-const columns = [
+const columns$1 = [
     { field: 'refName', headerName: 'Ref Name' },
     { field: 'aliases', headerName: 'Aliases', editable: true },
 ];
@@ -3322,7 +3956,7 @@ function AddRefSeqAliases({ changeManager, handleClose, session, }) {
                     React__default["default"].createElement("input", { type: "file", onChange: handleChangeFileHandler, ref: fileRef, disabled: (enableSubmit && !errorMessage) || !selectedAssembly }))),
             selectedAssembly && refNameAliasMap.size > 0 ? (React__default["default"].createElement("div", { style: { height: 200, width: '100%', marginTop: 20 } },
                 React__default["default"].createElement(material.InputLabel, null, "Refname aliases found for selected assembly."),
-                React__default["default"].createElement(xDataGrid.DataGrid, { rows: getTableRows(), columns: columns, initialState: {
+                React__default["default"].createElement(xDataGrid.DataGrid, { rows: getTableRows(), columns: columns$1, initialState: {
                         pagination: {
                             paginationModel: { page: 0, pageSize: 5 },
                         },
@@ -3412,6 +4046,116 @@ function ViewCheckResults({ handleClose, session, }) {
             React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
+/* eslint-disable @typescript-eslint/unbound-method */
+function exonIsSplittable(exonToBeSplit) {
+    if (exonToBeSplit.max - exonToBeSplit.min < 2) {
+        return {
+            isSplittable: false,
+            comment: 'This exon is too short to be split',
+        };
+    }
+    return { isSplittable: true, comment: '' };
+}
+function makeDialogText(splitExon) {
+    const splittable = exonIsSplittable(splitExon);
+    if (splittable.isSplittable) {
+        return 'Are you sure you want to split the selected exon?';
+    }
+    return splittable.comment;
+}
+function SplitExon({ changeManager, handleClose, selectedFeature, setSelectedFeature, sourceAssemblyId, sourceFeature, }) {
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const exonToBeSplit = mobxStateTree.getSnapshot(sourceFeature);
+    function onSubmit(event) {
+        event.preventDefault();
+        setErrorMessage('');
+        if (selectedFeature?._id === sourceFeature._id) {
+            setSelectedFeature();
+        }
+        const midpoint = exonToBeSplit.min + (exonToBeSplit.max - exonToBeSplit.min) / 2;
+        const upstreamCut = Math.floor(midpoint);
+        const downstreamCut = Math.ceil(midpoint);
+        if (!sourceFeature.parent?._id) {
+            throw new Error('Splitting an exon without parent is not possible yet');
+        }
+        const change = new shared.SplitExonChange({
+            changedIds: [sourceFeature._id],
+            typeName: 'SplitExonChange',
+            assembly: sourceAssemblyId,
+            exonToBeSplit,
+            parentFeatureId: sourceFeature.parent._id,
+            upstreamCut,
+            downstreamCut,
+            leftExonId: new ObjectID__default["default"]().toHexString(),
+            rightExonId: new ObjectID__default["default"]().toHexString(),
+        });
+        void changeManager.submit(change);
+        handleClose();
+        event.preventDefault();
+    }
+    return (React__default["default"].createElement(Dialog, { open: true, title: "Split exon", handleClose: handleClose, maxWidth: false, "data-testid": "split-exon" },
+        React__default["default"].createElement("form", { onSubmit: onSubmit },
+            React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
+                React__default["default"].createElement(material.DialogContentText, null, makeDialogText(exonToBeSplit))),
+            React__default["default"].createElement(material.DialogActions, null,
+                React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: !exonIsSplittable(exonToBeSplit).isSplittable }, "Yes"),
+                React__default["default"].createElement(material.Button, { variant: "outlined", type: "submit", onClick: handleClose }, "Cancel"))),
+        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+}
+
+const columns = [
+    {
+        field: 'name',
+        headerName: 'Assembly Name',
+        width: 150,
+        editable: false,
+    },
+    {
+        field: 'aliases',
+        headerName: 'Aliases',
+        width: 300,
+        editable: true,
+    },
+];
+function AddAssemblyAliases({ changeManager, handleClose, session, }) {
+    const { apolloDataStore } = session;
+    const { collaborationServerDriver } = apolloDataStore;
+    const assemblies = collaborationServerDriver.getAssemblies();
+    const rows = assemblies.map((assembly) => {
+        return {
+            id: assembly.name,
+            name: assembly.displayName ?? assembly.name,
+            aliases: assembly.aliases.join(', '),
+        };
+    });
+    const [errorMessage, setErrorMessage] = React__default["default"].useState('');
+    const processRowUpdate = (newRow, _oldRow) => {
+        const change = new shared.AddAssemblyAliasesChange({
+            typeName: 'AddAssemblyAliasesChange',
+            assembly: newRow.id,
+            aliases: newRow.aliases.split(','),
+        });
+        void changeManager.submit(change).catch(() => {
+            setErrorMessage('Error submitting change');
+        });
+        handleClose();
+        return newRow;
+    };
+    return (React__default["default"].createElement(Dialog, { open: true, title: "Add assembly aliases", handleClose: handleClose, maxWidth: 'sm', "data-testid": "add-assembly-alias", fullWidth: true },
+        React__default["default"].createElement(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' } },
+            React__default["default"].createElement(material.Box, { sx: { height: 400, width: '100%' } },
+                React__default["default"].createElement(xDataGrid.DataGrid, { rows: rows, columns: columns, initialState: {
+                        pagination: {
+                            paginationModel: {
+                                pageSize: 5,
+                            },
+                        },
+                    }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }))),
+        errorMessage ? (React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
+}
+
 function addMenuItems(rootModel) {
     rootModel.appendToMenu('Apollo', {
         label: 'Add Assembly',
@@ -3473,6 +4217,21 @@ function addMenuItems(rootModel) {
             ]);
         },
     });
+    rootModel.appendToMenu('Apollo', {
+        label: 'Add Assembly aliases',
+        onClick: (session) => {
+            session.queueDialog((doneCallback) => [
+                AddAssemblyAliases,
+                {
+                    session,
+                    handleClose: () => {
+                        doneCallback();
+                    },
+                    changeManager: session.apolloDataStore.changeManager,
+                },
+            ]);
+        },
+    });
     rootModel.appendToMenu('Apollo', {
         label: 'Manage Users',
         onClick: (session) => {
@@ -4488,12 +5247,14 @@ const Attributes = mobxReact.observer(function Attributes({ assembly, editable,
             typeName: 'FeatureAttributeChange',
             assembly,
             featureId: _id,
-            attributes: remainingAttributes,
+            oldAttributes: attributesSerialized,
+            newAttributes: remainingAttributes,
         });
         void changeManager.submit(change);
     }
     function modifyFeatureAttribute(key, attribute) {
         const serializedAttributes = { ...mobxStateTree.getSnapshot(attributes) };
+        const oldAttributes = structuredClone(serializedAttributes);
         if (!(key in serializedAttributes)) {
             notify(`"${key}" not found in feature attributes`, 'error');
             return;
@@ -4508,12 +5269,14 @@ const Attributes = mobxReact.observer(function Attributes({ assembly, editable,
             typeName: 'FeatureAttributeChange',
             assembly,
             featureId: feature._id,
-            attributes: serializedAttributes,
+            oldAttributes,
+            newAttributes: serializedAttributes,
         });
         void changeManager.submit(change);
     }
     function addFeatureAttribute(key, attribute) {
         const serializedAttributes = { ...mobxStateTree.getSnapshot(attributes) };
+        const oldAttributes = structuredClone(serializedAttributes);
         if (key in serializedAttributes) {
             notify(`Feature already has attribute "${key}"`, 'error');
             return;
@@ -4524,7 +5287,8 @@ const Attributes = mobxReact.observer(function Attributes({ assembly, editable,
             typeName: 'FeatureAttributeChange',
             assembly,
             featureId: feature._id,
-            attributes: serializedAttributes,
+            oldAttributes,
+            newAttributes: serializedAttributes,
         });
         void changeManager.submit(change);
     }
@@ -4927,6 +5691,28 @@ const ApolloTranscriptDetailsModel = mobxStateTree.types
     },
 }));
 
+async function copyToClipboard(element) {
+    if (isSecureContext) {
+        const textBlob = new Blob([element.outerText], { type: 'text/plain' });
+        const htmlBlob = new Blob([element.outerHTML], { type: 'text/html' });
+        const clipboardItem = new ClipboardItem({
+            [textBlob.type]: textBlob,
+            [htmlBlob.type]: htmlBlob,
+        });
+        return navigator.clipboard.write([clipboardItem]);
+    }
+    const copyCallback = (event) => {
+        event.clipboardData?.setData('text/plain', element.outerText);
+        event.clipboardData?.setData('text/html', element.outerHTML);
+        event.preventDefault();
+    };
+    document.addEventListener('copy', copyCallback);
+    // fall back to deprecated only in non-secure contexts
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    document.execCommand('copy');
+    document.removeEventListener('copy', copyCallback);
+}
+
 const SEQUENCE_WRAP_LENGTH = 60;
 function getSequenceSegments(segmentType, feature, getSequence) {
     const segments = [];
@@ -4986,13 +5772,12 @@ function getSequenceSegments(segmentType, feature, getSequence) {
             const [firstLocation] = cdsLocations;
             const locs = [];
             for (const loc of firstLocation) {
-                let sequence = getSequence(loc.min, loc.max);
-                if (strand === -1) {
-                    sequence = util.revcom(sequence);
-                }
-                wholeSequence += sequence;
+                wholeSequence += getSequence(loc.min, loc.max);
                 locs.push({ min: loc.min, max: loc.max });
             }
+            if (strand === -1) {
+                wholeSequence = util.revcom(wholeSequence);
+            }
             const sequenceLines = shared.splitStringIntoChunks(wholeSequence, SEQUENCE_WRAP_LENGTH);
             segments.push({ type: 'CDS', sequenceLines, locs });
             return segments;
@@ -5002,13 +5787,12 @@ function getSequenceSegments(segmentType, feature, getSequence) {
             const [firstLocation] = cdsLocations;
             const locs = [];
             for (const loc of firstLocation) {
-                let sequence = getSequence(loc.min, loc.max);
-                if (strand === -1) {
-                    sequence = util.revcom(sequence);
-                }
-                wholeSequence += sequence;
+                wholeSequence += getSequence(loc.min, loc.max);
                 locs.push({ min: loc.min, max: loc.max });
             }
+            if (strand === -1) {
+                wholeSequence = util.revcom(wholeSequence);
+            }
             let protein = '';
             for (let i = 0; i < wholeSequence.length; i += 3) {
                 const codonSeq = wholeSequence.slice(i, i + 3).toUpperCase();
@@ -5112,23 +5896,16 @@ const TranscriptSequence = mobxReact.observer(function TranscriptSequence({ asse
         setSequenceSegments(seqSegments);
         setLocationIntervals(locIntervals);
     }
-    // Function to copy text to clipboard
-    const copyToClipboard = () => {
+    const onCopyClick = () => {
         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]);
+        void copyToClipboard(seqDiv);
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Select, { defaultValue: "genomic", value: selectedOption, onChange: handleChangeSeqOption, size: "small" }, sequenceOptions.map((option) => (React__default["default"].createElement(material.MenuItem, { key: option, value: option }, option)))),
-        React__default["default"].createElement(material.Button, { variant: "contained", onClick: copyToClipboard, style: { marginLeft: 10 }, size: "medium" }, "Copy sequence"),
+        React__default["default"].createElement(material.Button, { variant: "contained", onClick: onCopyClick, style: { marginLeft: 10 }, size: "medium" }, "Copy sequence"),
         React__default["default"].createElement(material.Paper, { style: {
                 fontFamily: 'monospace',
                 padding: theme.spacing(),
@@ -5185,107 +5962,512 @@ const Strand = (props) => {
     const { strand } = props;
     return (React__default["default"].createElement("div", null, strand === 1 ? (React__default["default"].createElement(AddIcon__default["default"], null)) : strand === -1 ? (React__default["default"].createElement(RemoveIcon__default["default"], null)) : (React__default["default"].createElement(material.Typography, { component: 'span' }, "N/A"))));
 };
+const minMaxExonTranscriptLocation = (transcript, featureTypeOntology) => {
+    const { transcriptExonParts } = transcript;
+    const exonParts = transcriptExonParts
+        .filter((part) => featureTypeOntology.isTypeOf(part.type, 'exon'))
+        .sort(({ min: a }, { min: b }) => a - b);
+    const exonMin = exonParts[0]?.min;
+    const exonMax = exonParts[exonParts.length - 1]?.max;
+    return [exonMin, exonMax];
+};
 const TranscriptWidgetEditLocation = mobxReact.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 = React.useRef(null);
-    // Separate function to handle CDS location change
-    // because start of CDS and exon might be same
+    if (!refData) {
+        return null;
+    }
+    const { apolloDataStore } = session;
+    const { featureTypeOntology } = apolloDataStore.ontologyManager;
+    if (!featureTypeOntology.isTypeOf(feature.type, 'transcript') &&
+        !featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) {
+        throw new Error('Feature is not a transcript or equivalent');
+    }
+    const { cdsLocations, transcriptExonParts, strand } = feature;
+    const [firstCDSLocation] = cdsLocations;
+    const [exonMin, exonMax] = minMaxExonTranscriptLocation(feature, featureTypeOntology);
+    let cdsMin = exonMin;
+    let cdsMax = exonMax;
+    const cdsPresent = firstCDSLocation.length > 0;
+    if (cdsPresent) {
+        const sortedCDSLocations = firstCDSLocation.toSorted(({ min: a }, { min: b }) => a - b);
+        cdsMin = sortedCDSLocations[0].min;
+        cdsMax = sortedCDSLocations[sortedCDSLocations.length - 1].max;
+    }
     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;
-            }
-            if (isMin && oldLocation === child.min) {
-                const change = new shared.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 shared.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;
+        const overlappingExon = getOverlappingExonForCDS(feature, featureTypeOntology, oldLocation, isMin);
+        if (!overlappingExon) {
+            notify('No matching exon found', 'error');
+            return;
+        }
+        const oldExonLocation = isMin ? overlappingExon.min : overlappingExon.max;
+        const { prevExon, nextExon } = getNeighboringExonParts(feature, featureTypeOntology, oldExonLocation, isMin);
+        // Start location should be less than end location
+        if (isMin && newLocation >= overlappingExon.max) {
+            notify('Start location should be less than overlapping exon end location', 'error');
+            return;
+        }
+        // End location should be greater than start location
+        if (!isMin && newLocation <= overlappingExon.min) {
+            notify('End location should be greater than overlapping exon start location', 'error');
+            return;
+        }
+        // Changed location should be greater than end location of previous exon - give 2bp buffer
+        if (prevExon && prevExon.max + 2 > newLocation) {
+            notify('Start location should be greater than previous exon end location', 'error');
+            return;
+        }
+        // Changed location should be less than start location of next exon
+        if (nextExon && nextExon.min - 2 < newLocation) {
+            notify('End location should be less than next exon start location', 'error');
+            return;
+        }
+        const cdsFeature = getMatchingCDSFeature(feature, featureTypeOntology, oldLocation, isMin);
+        if (!cdsFeature) {
+            notify('No matching CDS feature found', 'error');
+            return;
+        }
+        if (!isMin && newLocation <= cdsFeature.min) {
+            notify('End location should be greater than CDS start location', 'error');
+            return;
+        }
+        if (isMin && newLocation >= cdsFeature.max) {
+            notify('Start location should be less than CDS end location', 'error');
+            return;
+        }
+        const overlappingExonFeature = getExonFeature(feature, overlappingExon.min, overlappingExon.max, featureTypeOntology);
+        if (!overlappingExonFeature) {
+            notify('No matching exon feature found', 'error');
+            return;
+        }
+        if (isMin && newLocation !== cdsFeature.min) {
+            const startChange = new shared.LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: [],
+                changes: [],
+                assembly,
+            });
+            if (newLocation < overlappingExon.min) {
+                if (prevExon) {
+                    // update exon start location
+                    appendStartLocationChange(overlappingExonFeature, startChange, newLocation);
+                    // update CDS start location
+                    appendStartLocationChange(cdsFeature, startChange, newLocation);
+                }
+                else {
+                    const transcriptStart = feature.min;
+                    const gene = feature.parent;
+                    if (newLocation < transcriptStart) {
+                        if (gene && newLocation < gene.min) {
+                            // update gene start location
+                            appendStartLocationChange(gene, startChange, newLocation);
+                        }
+                        // update transcript start location
+                        appendStartLocationChange(feature, startChange, newLocation);
+                        // update exon start location
+                        appendStartLocationChange(overlappingExonFeature, startChange, newLocation);
+                        // update CDS start location
+                        appendStartLocationChange(cdsFeature, startChange, newLocation);
+                    }
+                }
+            }
+            else {
+                // update CDS start location
+                appendStartLocationChange(cdsFeature, startChange, newLocation);
+            }
+            void changeManager.submit(startChange).catch(() => {
+                notify('Error updating feature CDS start position', 'error');
+            });
+        }
+        if (!isMin && newLocation !== cdsFeature.max) {
+            const endChange = new shared.LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: [],
+                changes: [],
+                assembly,
+            });
+            if (newLocation > overlappingExon.max) {
+                if (nextExon) {
+                    // update exon end location
+                    appendEndLocationChange(overlappingExonFeature, endChange, newLocation);
+                    // update CDS end location
+                    appendEndLocationChange(cdsFeature, endChange, newLocation);
+                }
+                else {
+                    const transcriptEnd = feature.max;
+                    const gene = feature.parent;
+                    if (newLocation > transcriptEnd) {
+                        if (gene && newLocation > gene.max) {
+                            // update gene end location
+                            appendEndLocationChange(gene, endChange, newLocation);
+                        }
+                        // update transcript end location
+                        appendEndLocationChange(feature, endChange, newLocation);
+                        // update exon end location
+                        appendEndLocationChange(overlappingExonFeature, endChange, newLocation);
+                        // update CDS end location
+                        appendEndLocationChange(cdsFeature, endChange, newLocation);
+                    }
+                }
+            }
+            else {
+                // update CDS end location
+                appendEndLocationChange(cdsFeature, endChange, newLocation);
             }
+            void changeManager.submit(endChange).catch(() => {
+                notify('Error updating feature CDS end position', 'error');
+            });
         }
     }
+    const updateCDSLocation = (oldLocation, newLocation, feature, isMin, onComplete) => {
+        if (!feature.children) {
+            throw new Error('Transcript should have child features');
+        }
+        if (oldLocation === newLocation) {
+            return;
+        }
+        const cdsFeature = getMatchingCDSFeature(feature, featureTypeOntology, oldLocation, isMin);
+        if (!cdsFeature) {
+            notify('No matching CDS feature found', 'error');
+            return;
+        }
+        const change = isMin
+            ? new shared.LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: [cdsFeature._id],
+                featureId: cdsFeature._id,
+                oldStart: cdsFeature.min,
+                newStart: newLocation,
+                assembly,
+            })
+            : new shared.LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: [cdsFeature._id],
+                featureId: cdsFeature._id,
+                oldEnd: cdsFeature.max,
+                newEnd: newLocation,
+                assembly,
+            });
+        void changeManager
+            .submit(change)
+            .then(() => {
+            if (onComplete) {
+                onComplete();
+            }
+        })
+            .catch(() => {
+            notify('Error updating feature CDS position', 'error');
+        });
+    };
     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;
+        const { matchingExon, prevExon, nextExon } = getNeighboringExonParts(feature, featureTypeOntology, oldLocation, isMin);
+        if (!matchingExon) {
+            notify('No matching exon found', 'error');
+            return;
+        }
+        // Start location should be less than end location
+        if (isMin && newLocation >= matchingExon.max) {
+            notify(`Start location should be less than end location`, 'error');
+            return;
+        }
+        // End location should be greater than start location
+        if (!isMin && newLocation <= matchingExon.min) {
+            notify(`End location should be greater than start location`, 'error');
+            return;
+        }
+        // Changed location should be greater than end location of previous exon - give 2bp buffer
+        if (prevExon && prevExon.max + 2 > newLocation) {
+            notify(`Error while changing start location`, 'error');
+            return;
+        }
+        // Changed location should be less than start location of next exon - give 2bp buffer
+        if (nextExon && nextExon.min - 2 < newLocation) {
+            notify(`Error while changing end location`, 'error');
+            return;
+        }
+        const exonFeature = getExonFeature(feature, matchingExon.min, matchingExon.max, featureTypeOntology);
+        if (!exonFeature) {
+            notify('No matching exon feature found', 'error');
+            return;
+        }
+        const cdsFeature = getFirstCDSFeature(feature, featureTypeOntology);
+        // START LOCATION CHANGE
+        if (isMin && newLocation !== matchingExon.min) {
+            const startChange = new shared.LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: [],
+                changes: [],
+                assembly,
+            });
+            if (prevExon) {
+                // update exon start location
+                appendStartLocationChange(exonFeature, startChange, newLocation);
             }
-            if (isMin && oldLocation === child.min) {
-                const change = new shared.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;
+            else {
+                const transcriptStart = feature.min;
+                const gene = feature.parent;
+                if (newLocation < transcriptStart) {
+                    if (gene && newLocation < gene.min) {
+                        // update gene start location
+                        appendStartLocationChange(gene, startChange, newLocation);
+                    }
+                    // update transcript start location
+                    appendStartLocationChange(feature, startChange, newLocation);
+                    // update exon start location
+                    appendStartLocationChange(exonFeature, startChange, newLocation);
+                }
+                else if (newLocation > transcriptStart) {
+                    // update exon start location
+                    appendStartLocationChange(exonFeature, startChange, newLocation);
+                    // update transcript start location
+                    appendStartLocationChange(feature, startChange, newLocation);
+                    if (gene) {
+                        const [geneMinWithNewLoc] = geneMinMaxWithNewLocation(gene, feature, newLocation, featureTypeOntology, isMin);
+                        if (gene.min != geneMinWithNewLoc) {
+                            // update gene start location
+                            appendStartLocationChange(gene, startChange, geneMinWithNewLoc);
+                        }
+                    }
+                }
             }
-            if (!isMin && oldLocation === child.max) {
-                const change = new shared.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;
+            // When we change the start location of the exon overlapping with start location of the CDS
+            // and the new start location is greater than the CDS start location then we need to update the CDS start location
+            if (cdsFeature &&
+                cdsFeature.min >= matchingExon.min &&
+                cdsFeature.min <= matchingExon.max &&
+                newLocation > cdsFeature.min) {
+                // update CDS start location
+                appendStartLocationChange(cdsFeature, startChange, newLocation);
             }
+            void changeManager.submit(startChange).catch(() => {
+                notify('Error updating feature exon start position', 'error');
+            });
+        }
+        // END LOCATION CHANGE
+        if (!isMin && newLocation !== matchingExon.max) {
+            const endChange = new shared.LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: [],
+                changes: [],
+                assembly,
+            });
+            if (nextExon) {
+                // update exon end location
+                appendEndLocationChange(exonFeature, endChange, newLocation);
+            }
+            else {
+                const transcriptEnd = feature.max;
+                const gene = feature.parent;
+                if (newLocation > transcriptEnd) {
+                    if (gene && newLocation > gene.max) {
+                        // update gene end location
+                        appendEndLocationChange(gene, endChange, newLocation);
+                    }
+                    // update transcript end location
+                    appendEndLocationChange(feature, endChange, newLocation);
+                    // update exon end location
+                    appendEndLocationChange(exonFeature, endChange, newLocation);
+                }
+                else if (newLocation < transcriptEnd) {
+                    // update exon end location
+                    appendEndLocationChange(exonFeature, endChange, newLocation);
+                    // update transcript end location
+                    appendEndLocationChange(feature, endChange, newLocation);
+                    if (gene) {
+                        const [, geneMaxWithNewLoc] = geneMinMaxWithNewLocation(gene, feature, newLocation, featureTypeOntology, isMin);
+                        if (gene.max != geneMaxWithNewLoc) {
+                            // update gene end location
+                            appendEndLocationChange(gene, endChange, geneMaxWithNewLoc);
+                        }
+                    }
+                }
+            }
+            // When we change the end location of the exon overlapping with end location of the CDS
+            // and the new end location is less than the CDS end location then we need to update the CDS end location
+            if (cdsFeature &&
+                cdsFeature.max >= matchingExon.min &&
+                cdsFeature.max <= matchingExon.max &&
+                newLocation < cdsFeature.max) {
+                // update CDS end location
+                appendEndLocationChange(cdsFeature, endChange, newLocation);
+            }
+            void changeManager.submit(endChange).catch(() => {
+                notify('Error updating feature exon end position', 'error');
+            });
         }
     }
-    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 appendEndLocationChange = (feature, change, newLocation) => {
+        change.changedIds.push(feature._id);
+        change.changes.push({
+            featureId: feature._id,
+            oldEnd: feature.max,
+            newEnd: newLocation,
+        });
+    };
+    const appendStartLocationChange = (feature, change, newLocation) => {
+        change.changedIds.push(feature._id);
+        change.changes.push({
+            featureId: feature._id,
+            oldStart: feature.min,
+            newStart: newLocation,
+        });
+    };
+    const getMatchingCDSFeature = (feature, featureTypeOntology, oldCDSLocation, isMin) => {
+        let cdsFeature;
+        for (const [, child] of feature.children ?? []) {
+            if (!featureTypeOntology.isTypeOf(child.type, 'CDS')) {
+                continue;
+            }
+            if (isMin && oldCDSLocation === child.min) {
+                cdsFeature = child;
+                break;
+            }
+            if (!isMin && oldCDSLocation === child.max) {
+                cdsFeature = child;
+                break;
+            }
+        }
+        return cdsFeature;
+    };
+    const getFirstCDSFeature = (feature, featureTypeOntology) => {
+        let cdsFeature;
+        for (const [, child] of feature.children ?? []) {
+            if (!featureTypeOntology.isTypeOf(child.type, 'CDS')) {
+                continue;
+            }
+            cdsFeature = child;
+            break;
+        }
+        return cdsFeature;
+    };
+    const getExonFeature = (feature, exonMin, exonMax, featureTypeOntology) => {
+        let exonFeature;
+        for (const [, child] of feature.children ?? []) {
+            if (!featureTypeOntology.isTypeOf(child.type, 'exon')) {
+                continue;
+            }
+            if (exonMin === child.min && exonMax === child.max) {
+                exonFeature = child;
+                break;
+            }
+        }
+        return exonFeature;
+    };
+    const geneMinMaxWithNewLocation = (gene, transcript, newLocation, featureTypeOntology, isMin) => {
+        const mins = [];
+        const maxs = [];
+        for (const [, t] of gene.children?.entries() ?? []) {
+            if (!featureTypeOntology.isTypeOf(t.type, 'transcript')) {
+                continue;
+            }
+            if (t._id === transcript._id) {
+                if (isMin) {
+                    mins.push(newLocation);
+                    maxs.push(t.max);
+                }
+                else {
+                    maxs.push(newLocation);
+                    mins.push(t.min);
+                }
+            }
+            else {
+                mins.push(t.min);
+                maxs.push(t.max);
+            }
+        }
+        const newMin = Math.min(...mins);
+        const newMax = Math.max(...maxs);
+        return [newMin, newMax];
+    };
+    const getOverlappingExonForCDS = (transcript, featureTypeOntology, oldCDSLocation, isMin) => {
+        const { transcriptExonParts } = transcript;
+        let overlappingExonPart;
+        for (const [, exonPart] of transcriptExonParts.entries()) {
+            if (!featureTypeOntology.isTypeOf(exonPart.type, 'exon')) {
+                continue;
+            }
+            if (!isMin &&
+                oldCDSLocation >= exonPart.min &&
+                oldCDSLocation <= exonPart.max) {
+                overlappingExonPart = exonPart;
+                break;
+            }
+            if (isMin &&
+                oldCDSLocation >= exonPart.min &&
+                oldCDSLocation <= exonPart.max) {
+                overlappingExonPart = exonPart;
+                break;
+            }
+        }
+        return overlappingExonPart;
+    };
+    const getNeighboringExonParts = (transcript, featureTypeOntology, oldExonLoc, isMin) => {
+        const { transcriptExonParts, strand } = transcript;
+        let matchingExon, matchingExonIdx, prevExon, nextExon;
+        for (const [i, exonPart] of transcriptExonParts.entries()) {
+            if (!featureTypeOntology.isTypeOf(exonPart.type, 'exon')) {
+                continue;
+            }
+            if (isMin && exonPart.min === oldExonLoc) {
+                matchingExon = exonPart;
+                matchingExonIdx = i;
+                break;
+            }
+            if (!isMin && exonPart.max === oldExonLoc) {
+                matchingExon = exonPart;
+                matchingExonIdx = i;
+                break;
+            }
+        }
+        if (matchingExon && matchingExonIdx !== undefined) {
+            if (strand === 1 && matchingExonIdx > 0) {
+                for (let i = matchingExonIdx - 1; i >= 0; i--) {
+                    const prevLoc = transcriptExonParts[i];
+                    if (featureTypeOntology.isTypeOf(prevLoc.type, 'exon')) {
+                        prevExon = prevLoc;
+                        break;
+                    }
+                }
+            }
+            if (strand === -1 && matchingExonIdx < transcriptExonParts.length - 1) {
+                for (let i = matchingExonIdx + 1; i < transcriptExonParts.length; i++) {
+                    const prevLoc = transcriptExonParts[i];
+                    if (featureTypeOntology.isTypeOf(prevLoc.type, 'exon')) {
+                        prevExon = prevLoc;
+                        break;
+                    }
+                }
+            }
+            if (strand === 1 && matchingExonIdx < transcriptExonParts.length - 1) {
+                for (let i = matchingExonIdx + 1; i < transcriptExonParts.length; i++) {
+                    const nextLoc = transcriptExonParts[i];
+                    if (featureTypeOntology.isTypeOf(nextLoc.type, 'exon')) {
+                        nextExon = nextLoc;
+                        break;
+                    }
+                }
+            }
+            if (strand === -1 && matchingExonIdx > 0) {
+                for (let i = matchingExonIdx - 1; i >= 0; i--) {
+                    const nextLoc = transcriptExonParts[i];
+                    if (featureTypeOntology.isTypeOf(nextLoc.type, 'exon')) {
+                        nextExon = nextLoc;
+                        break;
+                    }
+                }
+            }
+        }
+        return { matchingExon, prevExon, nextExon };
+    };
     const getFivePrimeSpliceSite = (loc, prevLocIdx) => {
         let spliceSite = '';
         if (prevLocIdx > 0) {
@@ -5333,12 +6515,15 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
     const getTranslationSequence = () => {
         let wholeSequence = '';
         const [firstLocation] = cdsLocations;
-        for (const loc of firstLocation) {
-            let sequence = refData.getSequence(loc.min, loc.max);
-            if (strand === -1) {
-                sequence = util.revcom(sequence);
-            }
-            wholeSequence += sequence;
+        const sortedCDSLocations = firstLocation.toSorted(({ min: a }, { min: b }) => a - b);
+        for (const loc of sortedCDSLocations) {
+            wholeSequence += refData.getSequence(loc.min, loc.max);
+        }
+        if (strand === -1) {
+            // Original: ACGCAT
+            // Complement: TGCGTA
+            // Reverse complement: ATGCGT
+            wholeSequence = util.revcom(wholeSequence);
         }
         const elements = [];
         for (let codonGenomicPos = 0; codonGenomicPos < wholeSequence.length; codonGenomicPos += 3) {
@@ -5356,9 +6541,12 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
                         // 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);
+                        const startCodonGenomicLocation = getCodonGenomicLocation(codonGenomicPos);
+                        if (startCodonGenomicLocation !== cdsMin && strand === 1) {
+                            updateCDSLocation(cdsMin, startCodonGenomicLocation, feature, true);
+                        }
+                        if (startCodonGenomicLocation !== cdsMax && strand === -1) {
+                            updateCDSLocation(cdsMax, startCodonGenomicLocation, feature, false);
                         }
                     } }, protein));
             }
@@ -5377,32 +6565,36 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
     };
     // 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 getCodonGenomicLocation = (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);
+        const sortedCDSLocations = firstLocation.toSorted(({ min: a }, { min: b }) => a - b);
+        // Suppose CDS locations are [{min: 0, max: 10}, {min: 20, max: 30}, {min: 40, max: 50}]
+        // and codonGenomicPosition is 25
+        // ((10 - 0) + (30 - 20) + (50 - 40)) > 25
+        // So, start codon is in (40, 50)
+        // 40 + (25-20) = 45 is the genomic location of the start codon
+        if (strand === 1) {
+            for (const loc of sortedCDSLocations) {
+                const locLength = loc.max - loc.min;
+                if (cdsLen + locLength > codonGenomicPosition) {
+                    return loc.min + (codonGenomicPosition - cdsLen);
+                }
+                cdsLen += locLength;
+            }
+        }
+        else if (strand === -1) {
+            for (let i = sortedCDSLocations.length - 1; i >= 0; i--) {
+                const loc = sortedCDSLocations[i];
+                const locLength = loc.max - loc.min;
+                if (cdsLen + locLength > codonGenomicPosition) {
+                    return loc.max - (codonGenomicPosition - cdsLen);
+                }
+                cdsLen += locLength;
             }
-            cdsLen += locLength;
+        }
+        if (strand === 1) {
+            return cdsMin;
         }
         return cdsMax;
     };
@@ -5427,48 +6619,82 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
         if (translSeqCodonStartGenomicPosArr.length === 0) {
             return;
         }
-        // Trim any sequence before first start codon and after last stop codon
+        // Trim any sequence before first start codon and after stop codon
         const startCodonIndex = translationSequence.indexOf('M');
-        const stopCodonIndex = translationSequence.lastIndexOf('*') + 1;
+        const stopCodonIndex = translationSequence.indexOf('*') + 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);
+        const startCodonGenomicLoc = getCodonGenomicLocation(startCodonPos);
+        const stopCodonGenomicLoc = getCodonGenomicLocation(stopCodonPos);
+        if (strand === 1) {
+            if (startCodonGenomicLoc > stopCodonGenomicLoc) {
+                notify('Start codon genomic location should be less than stop codon genomic location', 'error');
+                return;
+            }
+            let promise;
+            if (startCodonGenomicLoc !== cdsMin) {
+                promise = new Promise((resolve) => {
+                    updateCDSLocation(cdsMin, startCodonGenomicLoc, feature, true, () => {
+                        resolve(true);
+                    });
+                });
+            }
+            if (stopCodonGenomicLoc !== cdsMax) {
+                if (promise) {
+                    void promise.then(() => {
+                        updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
+                    });
+                }
+                else {
+                    updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
+                }
+            }
         }
-        if (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);
+        if (strand === -1) {
+            // reverse strand
+            if (startCodonGenomicLoc < stopCodonGenomicLoc) {
+                notify('Start codon genomic location should be less than stop codon genomic location', 'error');
+                return;
+            }
+            let promise;
+            if (startCodonGenomicLoc !== cdsMax) {
+                promise = new Promise((resolve) => {
+                    updateCDSLocation(cdsMax, startCodonGenomicLoc, feature, false, () => {
+                        resolve(true);
+                    });
+                });
+            }
+            if (stopCodonGenomicLoc !== cdsMin) {
+                if (promise) {
+                    void promise.then(() => {
+                        updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true);
+                    });
+                }
+                else {
+                    updateCDSLocation(cdsMin, stopCodonGenomicLoc, feature, true);
+                }
+            }
         }
+        notify('Translation sequence trimmed to start and stop codons', 'success');
     };
-    const copyToClipboard = () => {
+    const onCopyClick = () => {
         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]);
+        void copyToClipboard(seqDiv);
     };
     return (React__default["default"].createElement("div", null,
         cdsPresent && (React__default["default"].createElement("div", null,
-            React__default["default"].createElement(material.Accordion, { defaultExpanded: true },
+            React__default["default"].createElement(material.Accordion, null,
                 React__default["default"].createElement(StyledAccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header" },
                     React__default["default"].createElement(material.Typography, { component: "span", fontWeight: 'bold' }, "Translation")),
                 React__default["default"].createElement(material.AccordionDetails, null,
                     React__default["default"].createElement(SequenceContainer, null,
-                        React__default["default"].createElement(material.Typography, { component: 'span', ref: seqRef }, getTranslationSequence())),
+                        React__default["default"].createElement(material.Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' } }, getTranslationSequence())),
                     React__default["default"].createElement("div", { style: {
                             marginTop: 10,
                             display: 'flex',
@@ -5477,36 +6703,48 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
                             gap: 10,
                         } },
                         React__default["default"].createElement(material.Tooltip, { title: "Copy" },
-                            React__default["default"].createElement(ContentCopyIcon__default["default"], { style: { fontSize: 15, cursor: 'pointer' }, onClick: copyToClipboard })),
+                            React__default["default"].createElement(ContentCopyIcon__default["default"], { style: { fontSize: 15, cursor: 'pointer' }, onClick: onCopyClick })),
                         React__default["default"].createElement(material.Tooltip, { title: "Trim" },
                             React__default["default"].createElement(ContentCutIcon__default["default"], { style: { fontSize: 15, cursor: 'pointer' }, onClick: trimTranslationSequence }))))),
             React__default["default"].createElement(material.Grid2, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 } },
                 React__default["default"].createElement(material.Grid2, { size: 1 }),
-                React__default["default"].createElement(material.Grid2, { size: 4 },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin, onChangeCommitted: (newLocation) => {
-                            handleCDSLocationChange(cdsMin, newLocation, feature, true);
-                        } })),
+                strand === 1 ? (React__default["default"].createElement(material.Grid2, { size: 4 },
+                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
+                            handleCDSLocationChange(cdsMin, newLocation - 1, feature, true);
+                        }, style: { border: '1px solid black', borderRadius: 5 } }))) : (React__default["default"].createElement(material.Grid2, { size: 4 },
+                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
+                            handleCDSLocationChange(cdsMax, newLocation, feature, false);
+                        }, style: { border: '1px solid black', borderRadius: 5 } }))),
                 React__default["default"].createElement(material.Grid2, { size: 2 },
                     React__default["default"].createElement(material.Typography, { component: 'span' }, "CDS")),
-                React__default["default"].createElement(material.Grid2, { size: 4 },
+                strand === 1 ? (React__default["default"].createElement(material.Grid2, { size: 4 },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
                             handleCDSLocationChange(cdsMax, newLocation, feature, false);
-                        } })),
+                        }, style: { border: '1px solid black', borderRadius: 5 } }))) : (React__default["default"].createElement(material.Grid2, { size: 4 },
+                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
+                            handleCDSLocationChange(cdsMin, newLocation - 1, feature, true);
+                        }, style: { border: '1px solid black', borderRadius: 5 } }))),
                 React__default["default"].createElement(material.Grid2, { size: 1 })))),
         React__default["default"].createElement("div", { style: { marginTop: 5 } }, transcriptExonParts.map((loc, index) => {
             return (React__default["default"].createElement("div", { key: index }, loc.type === 'exon' && (React__default["default"].createElement(material.Grid2, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' } },
                 React__default["default"].createElement(material.Grid2, { size: 1 }, index !== 0 &&
                     getFivePrimeSpliceSite(loc, index).map((site, idx) => (React__default["default"].createElement(material.Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite)))),
-                React__default["default"].createElement(material.Grid2, { size: 4, style: { padding: 0 } },
-                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min, onChangeCommitted: (newLocation) => {
-                            handleExonLocationChange(loc.min, newLocation, feature, true);
-                        } })),
+                strand === 1 ? (React__default["default"].createElement(material.Grid2, { size: 4, style: { padding: 0 } },
+                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                            handleExonLocationChange(loc.min, newLocation - 1, feature, true);
+                        } }))) : (React__default["default"].createElement(material.Grid2, { size: 4, style: { padding: 0 } },
+                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
+                            handleExonLocationChange(loc.max, newLocation, feature, false);
+                        } }))),
                 React__default["default"].createElement(material.Grid2, { size: 2 },
                     React__default["default"].createElement(Strand, { strand: feature.strand })),
-                React__default["default"].createElement(material.Grid2, { size: 4, style: { padding: 0 } },
+                strand === 1 ? (React__default["default"].createElement(material.Grid2, { size: 4, style: { padding: 0 } },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                             handleExonLocationChange(loc.max, newLocation, feature, false);
-                        } })),
+                        } }))) : (React__default["default"].createElement(material.Grid2, { size: 4, style: { padding: 0 } },
+                    React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                            handleExonLocationChange(loc.min, newLocation - 1, feature, true);
+                        } }))),
                 React__default["default"].createElement(material.Grid2, { size: 1 }, index !== transcriptExonParts.length - 1 &&
                     getThreePrimeSpliceSite(loc, index).map((site, idx) => (React__default["default"].createElement(material.Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite))))))));
         }))));
@@ -5517,16 +6755,19 @@ const HeaderTableCell = styled__default["default"](material.TableCell)(() => ({
 }));
 const TranscriptWidgetSummary = mobxReact.observer(function TranscriptWidgetSummary(props) {
     const { feature } = props;
-    const name = getFeatureName(feature);
+    const name = getFeatureName$1(feature);
     const id = getFeatureId$1(feature);
     return (React__default["default"].createElement(material.Table, { size: "small", sx: { fontSize: '0.75rem', '& .MuiTableCell-root': { padding: '4px' } } },
         React__default["default"].createElement(material.TableBody, null,
             name !== '' && (React__default["default"].createElement(material.TableRow, null,
                 React__default["default"].createElement(HeaderTableCell, null, "Name"),
-                React__default["default"].createElement(material.TableCell, null, getFeatureName(feature)))),
+                React__default["default"].createElement(material.TableCell, null, getFeatureName$1(feature)))),
             id !== '' && (React__default["default"].createElement(material.TableRow, null,
                 React__default["default"].createElement(HeaderTableCell, null, "ID"),
                 React__default["default"].createElement(material.TableCell, null, getFeatureId$1(feature)))),
+            React__default["default"].createElement(material.TableRow, null,
+                React__default["default"].createElement(HeaderTableCell, null, "Type"),
+                React__default["default"].createElement(material.TableCell, null, feature.type)),
             React__default["default"].createElement(material.TableRow, null,
                 React__default["default"].createElement(HeaderTableCell, null, "Location"),
                 React__default["default"].createElement(material.TableCell, null,
@@ -5774,13 +7015,14 @@ const NumberCell = mobxReact.observer(function NumberCell({ initialValue, notify
             } })));
 });
 
-function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature, setSelectedFeature, session, changeManager) {
+function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature, setSelectedFeature, session, changeManager, filteredTranscripts, updateFilteredTranscripts) {
     const internetAccount = getApolloInternetAccount(session);
     const role = internetAccount ? internetAccount.role : 'admin';
     const admin = role === 'admin';
     const readOnly = !(role && ['admin', 'user'].includes(role));
     const menuItems = [];
     if (feature) {
+        const featureID = feature.attributes.get('gff_id')?.toString();
         const sourceAssemblyId = getAssemblyId(region.assemblyName);
         const currentAssemblyId = getAssemblyId(region.assemblyName);
         menuItems.push({
@@ -5847,6 +7089,63 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
                     },
                 ]);
             },
+        }, {
+            label: 'Merge transcripts',
+            disabled: !admin,
+            onClick: () => {
+                session.queueDialog((doneCallback) => [
+                    MergeTranscripts,
+                    {
+                        session,
+                        handleClose: () => {
+                            doneCallback();
+                        },
+                        changeManager,
+                        sourceFeature: feature,
+                        sourceAssemblyId: currentAssemblyId,
+                        selectedFeature,
+                        setSelectedFeature,
+                    },
+                ]);
+            },
+        }, {
+            label: 'Merge exons',
+            disabled: !admin,
+            onClick: () => {
+                session.queueDialog((doneCallback) => [
+                    MergeExons,
+                    {
+                        session,
+                        handleClose: () => {
+                            doneCallback();
+                        },
+                        changeManager,
+                        sourceFeature: feature,
+                        sourceAssemblyId: currentAssemblyId,
+                        selectedFeature,
+                        setSelectedFeature,
+                    },
+                ]);
+            },
+        }, {
+            label: 'Split exon',
+            disabled: !admin,
+            onClick: () => {
+                session.queueDialog((doneCallback) => [
+                    SplitExon,
+                    {
+                        session,
+                        handleClose: () => {
+                            doneCallback();
+                        },
+                        changeManager,
+                        sourceFeature: feature,
+                        sourceAssemblyId: currentAssemblyId,
+                        selectedFeature,
+                        setSelectedFeature,
+                    },
+                ]);
+            },
         });
         const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
         if (!featureTypeOntology) {
@@ -5866,6 +7165,18 @@ function featureContextMenuItems(feature, region, getAssemblyId, selectedFeature
                     });
                     session.showWidget(apolloTranscriptWidget);
                 },
+            }, {
+                label: 'Visible',
+                type: 'checkbox',
+                checked: featureID && filteredTranscripts.includes(featureID) ? false : true,
+                onClick: () => {
+                    if (featureID) {
+                        const newForms = filteredTranscripts.includes(featureID)
+                            ? filteredTranscripts.filter((form) => form !== featureID)
+                            : [...filteredTranscripts, featureID];
+                        updateFilteredTranscripts(newForms);
+                    }
+                },
             });
         }
     }
@@ -5908,8 +7219,8 @@ const useStyles$5 = mui.makeStyles()((theme) => ({
     },
 }));
 function makeContextMenuItems(display, feature) {
-    const { changeManager, getAssemblyId, regions, selectedFeature, session, setSelectedFeature, } = display;
-    return featureContextMenuItems(feature, regions[0], getAssemblyId, selectedFeature, setSelectedFeature, session, changeManager);
+    const { changeManager, getAssemblyId, regions, selectedFeature, session, setSelectedFeature, filteredTranscripts, updateFilteredTranscripts, } = display;
+    return featureContextMenuItems(feature, regions[0], getAssemblyId, selectedFeature, setSelectedFeature, session, changeManager, filteredTranscripts, updateFilteredTranscripts);
 }
 function getTopLevelFeature(feature) {
     let cur = feature;
@@ -6211,7 +7522,7 @@ function draw$3(ctx, feature, row, stateModel, displayedRegionIndex) {
     const widthPx = feature.length / bpPerPx;
     const startPx = reversed ? minX - widthPx : minX;
     const top = row * heightPx;
-    const isSelected = isSelectedFeature(feature, apolloSelectedFeature);
+    const isSelected = isSelectedFeature$1(feature, apolloSelectedFeature);
     const backgroundColor = getBackgroundColor(theme, isSelected);
     const textColor = getTextColor(theme, isSelected);
     const featureBox = [
@@ -6330,7 +7641,7 @@ function drawTooltip$3(display, context) {
     textTop = textTop + 12;
     context.fillText(location, startPx + 2, textTop);
 }
-function isSelectedFeature(feature, selectedFeature) {
+function isSelectedFeature$1(feature, selectedFeature) {
     return Boolean(selectedFeature && feature._id === selectedFeature._id);
 }
 function getBackgroundColor(theme, selected) {
@@ -6349,19 +7660,51 @@ function drawBox(ctx, x, y, width, height, color) {
     ctx.fillRect(x, y, width, height);
 }
 function getContextMenuItems$3(display) {
-    const { apolloHover, apolloInternetAccount: internetAccount, changeManager, regions, selectedFeature, session, } = display;
-    const menuItems = [];
+    const { apolloHover } = display;
     if (!apolloHover) {
-        return menuItems;
+        return [];
     }
     const { feature: sourceFeature } = apolloHover;
+    return getContextMenuItemsForFeature$2(display, sourceFeature);
+}
+function makeFeatureLabel(feature) {
+    let name;
+    if (feature.attributes.get('gff_name')) {
+        name = feature.attributes.get('gff_name')?.join(',');
+    }
+    else if (feature.attributes.get('gff_id')) {
+        name = feature.attributes.get('gff_id')?.join(',');
+    }
+    else {
+        name = feature._id;
+    }
+    const coords = `(${(feature.min + 1).toLocaleString('en')}..${feature.max.toLocaleString('en')})`;
+    const maxLen = 60;
+    if (name && name.length + coords.length > maxLen + 5) {
+        const trim = maxLen - coords.length;
+        name = trim > 0 ? name.slice(0, trim) : '';
+        name = `${name}[...]`;
+    }
+    return `${name} ${coords}`;
+}
+function getContextMenuItemsForFeature$2(display, sourceFeature) {
+    const { apolloInternetAccount: internetAccount, changeManager, regions, selectedFeature, session, } = display;
+    const menuItems = [];
     const role = internetAccount ? internetAccount.role : 'admin';
     const admin = role === 'admin';
     const readOnly = !(role && ['admin', 'user'].includes(role));
     const [region] = regions;
     const sourceAssemblyId = display.getAssemblyId(region.assemblyName);
     const currentAssemblyId = display.getAssemblyId(region.assemblyName);
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    // Add only relevant options
     menuItems.push({
+        label: makeFeatureLabel(sourceFeature),
+        type: 'subHeader',
+    }, {
         label: 'Add child feature',
         disabled: readOnly,
         onClick: () => {
@@ -6417,37 +7760,7 @@ function getContextMenuItems$3(display) {
                 },
             ]);
         },
-    }, {
-        label: 'Edit feature details',
-        onClick: () => {
-            const apolloFeatureWidget = session.addWidget('ApolloFeatureDetailsWidget', 'apolloFeatureDetailsWidget', {
-                feature: sourceFeature,
-                assembly: currentAssemblyId,
-                refName: region.refName,
-            });
-            session.showWidget(apolloFeatureWidget);
-        },
     });
-    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
-    if (!featureTypeOntology) {
-        throw new Error('featureTypeOntology is undefined');
-    }
-    if ((featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') ||
-        featureTypeOntology.isTypeOf(sourceFeature.type, 'pseudogenic_transcript')) &&
-        util.isSessionModelWithWidgets(session)) {
-        menuItems.push({
-            label: 'Edit transcript details',
-            onClick: () => {
-                const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
-                    feature: sourceFeature,
-                    assembly: currentAssemblyId,
-                    changeManager,
-                    refName: region.refName,
-                });
-                session.showWidget(apolloTranscriptWidget);
-            },
-        });
-    }
     return menuItems;
 }
 function getFeatureFromLayout$2(feature, _bp, _row) {
@@ -6491,9 +7804,12 @@ function onMouseUp$3(stateModel, mousePosition) {
         return;
     }
     const { featureAndGlyphUnderMouse } = mousePosition;
-    if (featureAndGlyphUnderMouse?.feature) {
-        stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature);
+    if (!featureAndGlyphUnderMouse) {
+        return;
     }
+    const { feature } = featureAndGlyphUnderMouse;
+    stateModel.setSelectedFeature(feature);
+    stateModel.showFeatureDetailsWidget(feature);
 }
 /** @returns undefined if mouse not on the edge of this feature, otherwise 'start' or 'end' depending on which edge */
 function isMouseOnFeatureEdge(mousePosition, feature, stateModel) {
@@ -6522,6 +7838,7 @@ const boxGlyph = {
     drawDragPreview: drawDragPreview$3,
     drawHover: drawHover$3,
     drawTooltip: drawTooltip$3,
+    getContextMenuItemsForFeature: getContextMenuItemsForFeature$2,
     getContextMenuItems: getContextMenuItems$3,
     getFeatureFromLayout: getFeatureFromLayout$2,
     getRowCount: getRowCount$2,
@@ -6536,7 +7853,10 @@ let forwardFillLight$1 = null;
 let backwardFillLight$1 = null;
 let forwardFillDark$1 = null;
 let backwardFillDark$1 = null;
-if ('document' in globalThis) {
+const canvas$1 = globalThis.document.createElement('canvas');
+// @ts-expect-error getContext is undefined in the web worker
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+if (canvas$1?.getContext) {
     for (const direction of ['forward', 'backward']) {
         for (const themeMode of ['light', 'dark']) {
             const canvas = document.createElement('canvas');
@@ -6949,7 +8269,7 @@ function onMouseDown$2(stateModel, currentMousePosition, event) {
     const draggableFeature = getDraggableFeatureInfo$1(currentMousePosition, feature, stateModel);
     if (draggableFeature) {
         event.stopPropagation();
-        stateModel.startDrag(currentMousePosition, draggableFeature.feature, draggableFeature.edge);
+        stateModel.startDrag(currentMousePosition, draggableFeature.feature, draggableFeature.edge, true);
     }
 }
 function onMouseMove$2(stateModel, mousePosition) {
@@ -6970,8 +8290,35 @@ function onMouseUp$2(stateModel, mousePosition) {
         return;
     }
     const { featureAndGlyphUnderMouse } = mousePosition;
-    if (featureAndGlyphUnderMouse?.feature) {
-        stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature);
+    if (!featureAndGlyphUnderMouse) {
+        return;
+    }
+    const { feature } = featureAndGlyphUnderMouse;
+    stateModel.setSelectedFeature(feature);
+    const { session } = stateModel;
+    const { apolloDataStore } = session;
+    const { featureTypeOntology } = apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    let containsCDSOrExon = false;
+    for (const [, child] of feature.children ?? []) {
+        if (featureTypeOntology.isTypeOf(child.type, 'CDS') ||
+            featureTypeOntology.isTypeOf(child.type, 'exon')) {
+            containsCDSOrExon = true;
+            break;
+        }
+    }
+    if ((featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
+        containsCDSOrExon) {
+        stateModel.showFeatureDetailsWidget(feature, [
+            'ApolloTranscriptDetails',
+            'apolloTranscriptDetails',
+        ]);
+    }
+    else {
+        stateModel.showFeatureDetailsWidget(feature);
     }
 }
 function getDraggableFeatureInfo$1(mousePosition, feature, stateModel) {
@@ -6985,30 +8332,18 @@ function getDraggableFeatureInfo$1(mousePosition, feature, stateModel) {
         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');
+    const isCDS = featureTypeOntology.isTypeOf(feature.type, 'CDS');
     if (isGene || isTranscript) {
+        // For gene glyphs, the sizes of genes and transcripts are determined by
+        // their child exons, so we don't make them draggable
         return;
     }
+    // So now the type of feature is either CDS or exon. If an exon and CDS edge
+    // are in the same place, we want to prioritize dragging the exon. If the
+    // feature we're on is a CDS, let's find any exon it may overlap.
     const { bp, refName, regionNumber, x } = mousePosition;
     const { lgv } = stateModel;
-    const { offsetPx } = lgv;
-    const minPxInfo = lgv.bpToPx({ refName, coord: feature.min, regionNumber });
-    const maxPxInfo = lgv.bpToPx({ refName, coord: feature.max, regionNumber });
-    if (minPxInfo === undefined || maxPxInfo === undefined) {
-        return;
-    }
-    const minPx = minPxInfo.offsetPx - offsetPx;
-    const maxPx = maxPxInfo.offsetPx - offsetPx;
-    if (Math.abs(maxPx - minPx) < 8) {
-        return;
-    }
-    if (Math.abs(minPx - x) < 4) {
-        return { feature, edge: 'min' };
-    }
-    if (Math.abs(maxPx - x) < 4) {
-        return { feature, edge: 'max' };
-    }
-    if (isCds) {
+    if (isCDS) {
         const transcript = feature.parent;
         if (!transcript?.children) {
             return;
@@ -7024,39 +8359,157 @@ function getDraggableFeatureInfo$1(mousePosition, feature, stateModel) {
             const [start, end] = util.intersection2(bp - 1, bp, child.min, child.max);
             return start !== undefined && end !== undefined;
         });
-        if (!overlappingExon) {
-            return;
-        }
-        const minPxInfo = lgv.bpToPx({
-            refName,
-            coord: overlappingExon.min,
-            regionNumber,
-        });
-        const maxPxInfo = lgv.bpToPx({
-            refName,
-            coord: overlappingExon.max,
-            regionNumber,
-        });
-        if (minPxInfo === undefined || maxPxInfo === undefined) {
-            return;
+        if (overlappingExon) {
+            // We are on an exon, are we on the edge of it?
+            const minMax = getMinAndMaxPx(overlappingExon, refName, regionNumber, lgv);
+            if (minMax) {
+                const overlappingEdge = getOverlappingEdge(overlappingExon, x, minMax);
+                if (overlappingEdge) {
+                    return overlappingEdge;
+                }
+            }
         }
-        const minPx = minPxInfo.offsetPx - offsetPx;
-        const maxPx = maxPxInfo.offsetPx - offsetPx;
-        if (Math.abs(maxPx - minPx) < 8) {
-            return;
+    }
+    // End of special cases, let's see if we're on the edge of this CDS or exon
+    const minMax = getMinAndMaxPx(feature, refName, regionNumber, lgv);
+    if (minMax) {
+        const overlappingEdge = getOverlappingEdge(feature, x, minMax);
+        if (overlappingEdge) {
+            return overlappingEdge;
         }
-        if (Math.abs(minPx - x) < 4) {
-            return { feature: overlappingExon, edge: 'min' };
+    }
+    return;
+}
+function isTranscriptFeature(feature, session) {
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    return (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript'));
+}
+function isExonFeature(feature, session) {
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    return featureTypeOntology.isTypeOf(feature.type, 'exon');
+}
+function isCDSFeature(feature, session) {
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    return featureTypeOntology.isTypeOf(feature.type, 'CDS');
+}
+function getContextMenuItems$2(display, mousePosition) {
+    const { apolloInternetAccount: internetAccount, apolloHover, changeManager, regions, selectedFeature, session, } = display;
+    const [region] = regions;
+    const currentAssemblyId = display.getAssemblyId(region.assemblyName);
+    const menuItems = [];
+    const role = internetAccount ? internetAccount.role : 'admin';
+    const admin = role === 'admin';
+    if (!apolloHover) {
+        return menuItems;
+    }
+    let featuresUnderClick = getFeaturesUnderClick(mousePosition);
+    if (isCDSFeature(mousePosition.featureAndGlyphUnderMouse.feature, session)) {
+        featuresUnderClick = getFeaturesUnderClick(mousePosition, true);
+    }
+    for (const feature of featuresUnderClick) {
+        const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(display, feature);
+        if (isExonFeature(feature, session)) {
+            contextMenuItemsForFeature.push({
+                label: 'Merge exons',
+                disabled: !admin,
+                onClick: () => {
+                    session.queueDialog((doneCallback) => [
+                        MergeExons,
+                        {
+                            session,
+                            handleClose: () => {
+                                doneCallback();
+                            },
+                            changeManager,
+                            sourceFeature: feature,
+                            sourceAssemblyId: currentAssemblyId,
+                            selectedFeature,
+                            setSelectedFeature: (feature) => {
+                                display.setSelectedFeature(feature);
+                            },
+                        },
+                    ]);
+                },
+            }, {
+                label: 'Split exon',
+                disabled: !admin,
+                onClick: () => {
+                    session.queueDialog((doneCallback) => [
+                        SplitExon,
+                        {
+                            session,
+                            handleClose: () => {
+                                doneCallback();
+                            },
+                            changeManager,
+                            sourceFeature: feature,
+                            sourceAssemblyId: currentAssemblyId,
+                            selectedFeature,
+                            setSelectedFeature: (feature) => {
+                                display.setSelectedFeature(feature);
+                            },
+                        },
+                    ]);
+                },
+            });
         }
-        if (Math.abs(maxPx - x) < 4) {
-            return { feature: overlappingExon, edge: 'max' };
+        if (isTranscriptFeature(feature, session)) {
+            contextMenuItemsForFeature.push({
+                label: 'Merge transcript',
+                onClick: () => {
+                    session.queueDialog((doneCallback) => [
+                        MergeTranscripts,
+                        {
+                            session,
+                            handleClose: () => {
+                                doneCallback();
+                            },
+                            changeManager,
+                            sourceFeature: feature,
+                            sourceAssemblyId: currentAssemblyId,
+                            selectedFeature,
+                            setSelectedFeature: (feature) => {
+                                display.setSelectedFeature(feature);
+                            },
+                        },
+                    ]);
+                },
+            });
+            if (util.isSessionModelWithWidgets(session)) {
+                contextMenuItemsForFeature.push({
+                    label: 'Open transcript details',
+                    onClick: () => {
+                        const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
+                            feature,
+                            assembly: currentAssemblyId,
+                            changeManager,
+                            refName: region.refName,
+                        });
+                        session.showWidget(apolloTranscriptWidget);
+                    },
+                });
+            }
         }
+        menuItems.push({
+            label: feature.type,
+            subMenu: contextMenuItemsForFeature,
+        });
     }
-    return;
+    return menuItems;
 }
 // False positive here, none of these functions use "this"
 /* eslint-disable @typescript-eslint/unbound-method */
-const { drawTooltip: drawTooltip$2, getContextMenuItems: getContextMenuItems$2, onMouseLeave: onMouseLeave$2 } = boxGlyph;
+const { drawTooltip: drawTooltip$2, getContextMenuItemsForFeature: getContextMenuItemsForFeature$1, onMouseLeave: onMouseLeave$2 } = boxGlyph;
 /* eslint-enable @typescript-eslint/unbound-method */
 const geneGlyph$1 = {
     draw: draw$2,
@@ -7064,6 +8517,7 @@ const geneGlyph$1 = {
     drawHover: drawHover$2,
     drawTooltip: drawTooltip$2,
     getContextMenuItems: getContextMenuItems$2,
+    getContextMenuItemsForFeature: getContextMenuItemsForFeature$1,
     getFeatureFromLayout: getFeatureFromLayout$1,
     getRowCount: getRowCount$1,
     getRowForFeature: getRowForFeature$1,
@@ -7111,7 +8565,7 @@ function drawFeature(ctx, feature, row, stateModel, displayedRegionIndex) {
     const startPx = reversed ? minX - widthPx : minX;
     const top = row * heightPx;
     const rowCount = getRowCount(feature);
-    const isSelected = isSelectedFeature(feature, apolloSelectedFeature);
+    const isSelected = isSelectedFeature$1(feature, apolloSelectedFeature);
     const groupingColor = isSelected ? 'rgba(130,0,0,0.45)' : 'rgba(255,0,0,0.25)';
     if (rowCount > 1) {
         // draw background that encapsulates all child features
@@ -7158,15 +8612,44 @@ function getRowForFeature(feature, childFeature) {
     }
     return;
 }
+function getContextMenuItems$1(display, mousePosition) {
+    const { apolloHover, session } = display;
+    const menuItems = [];
+    if (!apolloHover) {
+        return menuItems;
+    }
+    const { feature: sourceFeature } = apolloHover;
+    const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    const sourceFeatureMenuItems = boxGlyph.getContextMenuItems(display, mousePosition);
+    menuItems.push({
+        label: sourceFeature.type,
+        subMenu: sourceFeatureMenuItems,
+    });
+    for (const relative of getFeaturesUnderClick(mousePosition)) {
+        if (relative._id === sourceFeature._id) {
+            continue;
+        }
+        const contextMenuItemsForFeature = boxGlyph.getContextMenuItemsForFeature(display, relative);
+        menuItems.push({
+            label: relative.type,
+            subMenu: contextMenuItemsForFeature,
+        });
+    }
+    return menuItems;
+}
 // False positive here, none of these functions use "this"
 /* eslint-disable @typescript-eslint/unbound-method */
-const { drawDragPreview: drawDragPreview$1, drawTooltip: drawTooltip$1, getContextMenuItems: getContextMenuItems$1, onMouseDown: onMouseDown$1, onMouseLeave: onMouseLeave$1, onMouseMove: onMouseMove$1, onMouseUp: onMouseUp$1, } = boxGlyph;
+const { drawDragPreview: drawDragPreview$1, drawTooltip: drawTooltip$1, getContextMenuItemsForFeature, onMouseDown: onMouseDown$1, onMouseLeave: onMouseLeave$1, onMouseMove: onMouseMove$1, onMouseUp: onMouseUp$1, } = boxGlyph;
 /* eslint-enable @typescript-eslint/unbound-method */
 const genericChildGlyph = {
     draw: draw$1,
     drawDragPreview: drawDragPreview$1,
     drawHover: drawHover$1,
     drawTooltip: drawTooltip$1,
+    getContextMenuItemsForFeature,
     getContextMenuItems: getContextMenuItems$1,
     getFeatureFromLayout,
     getRowCount,
@@ -7453,6 +8936,27 @@ function baseModelFactory$1(_pluginManager, configSchema) {
         setSelectedFeature(feature) {
             self.session.apolloSetSelectedFeature(feature);
         },
+        showFeatureDetailsWidget(feature, customWidgetNameAndId) {
+            const [region] = self.regions;
+            const { assemblyName, refName } = region;
+            const assembly = self.getAssemblyId(assemblyName);
+            if (!assembly) {
+                return;
+            }
+            const { session } = self;
+            const { changeManager } = session.apolloDataStore;
+            const [widgetName, widgetId] = customWidgetNameAndId ?? [
+                'ApolloFeatureDetailsWidget',
+                'apolloFeatureDetailsWidget',
+            ];
+            const apolloFeatureWidget = session.addWidget(widgetName, widgetId, {
+                feature,
+                assembly,
+                refName,
+                changeManager,
+            });
+            session.showWidget(apolloFeatureWidget);
+        },
         afterAttach() {
             mobxStateTree.addDisposer(self, mobx.autorun(() => {
                 if (!self.lgv.initialized || self.regionCannotBeRendered()) {
@@ -7681,6 +9185,7 @@ function renderingModelIntermediateFactory$1(pluginManager, configSchema) {
         detailsHeight: 200,
         lastRowTooltipBufferHeight: 40,
         isShown: true,
+        filteredTranscripts: mobxStateTree.types.array(mobxStateTree.types.string),
     })
         .volatile(() => ({
         canvas: null,
@@ -8072,6 +9577,10 @@ function mouseEventsModelIntermediateFactory$1(pluginManager, configSchema) {
                 self.cursor = cursor;
             }
         },
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        updateFilteredTranscripts(forms) {
+            return;
+        },
     }))
         .actions(() => ({
         // onClick(event: CanvasMouseEvent) {
@@ -8151,32 +9660,37 @@ function mouseEventsSeqHightlightModelFactory(pluginManager, configSchema) {
 function mouseEventsModelFactory$1(pluginManager, configSchema) {
     const LinearApolloDisplayMouseEvents = mouseEventsSeqHightlightModelFactory(pluginManager, configSchema);
     return LinearApolloDisplayMouseEvents.views((self) => ({
-        contextMenuItems(contextCoord) {
+        contextMenuItems(event) {
             const { apolloHover } = self;
-            if (!(apolloHover && contextCoord)) {
+            if (!apolloHover) {
                 return [];
             }
+            const mousePosition = self.getMousePosition(event);
             const { topLevelFeature } = apolloHover;
             const glyph = self.getGlyph(topLevelFeature);
-            return glyph.getContextMenuItems(self);
+            if (isMousePositionWithFeatureAndGlyph$1(mousePosition)) {
+                return glyph.getContextMenuItems(self, mousePosition);
+            }
+            return [];
         },
     }))
         .actions((self) => ({
         // explicitly pass in a feature in case it's not the same as the one in
         // mousePosition (e.g. if features are drawn overlapping).
-        startDrag(mousePosition, feature, edge) {
+        startDrag(mousePosition, feature, edge, shrinkParent = false) {
             self.apolloDragging = {
                 start: mousePosition,
                 current: mousePosition,
                 feature,
                 edge,
+                shrinkParent,
             };
         },
         endDrag() {
             if (!self.apolloDragging) {
                 throw new Error('endDrag() called with no current drag in progress');
             }
-            const { current, edge, feature, start } = self.apolloDragging;
+            const { current, edge, feature, start, shrinkParent } = self.apolloDragging;
             // don't do anything if it was only dragged a tiny bit
             if (Math.abs(current.x - start.x) <= 4) {
                 self.setDragging();
@@ -8186,33 +9700,28 @@ function mouseEventsModelFactory$1(pluginManager, configSchema) {
             const { displayedRegions } = self.lgv;
             const region = displayedRegions[start.regionNumber];
             const assembly = self.getAssemblyId(region.assemblyName);
-            let change;
-            if (edge === 'max') {
-                const featureId = feature._id;
-                const oldEnd = feature.max;
-                const newEnd = current.bp;
-                change = new shared.LocationEndChange({
+            const changes = getPropagatedLocationChanges(feature, current.bp, edge, shrinkParent);
+            const change = edge === 'max'
+                ? new shared.LocationEndChange({
                     typeName: 'LocationEndChange',
-                    changedIds: [featureId],
-                    featureId,
-                    oldEnd,
-                    newEnd,
+                    changedIds: changes.map((c) => c.featureId),
+                    changes: changes.map((c) => ({
+                        featureId: c.featureId,
+                        oldEnd: c.oldLocation,
+                        newEnd: c.newLocation,
+                    })),
                     assembly,
-                });
-            }
-            else {
-                const featureId = feature._id;
-                const oldStart = feature.min;
-                const newStart = current.bp;
-                change = new shared.LocationStartChange({
+                })
+                : new shared.LocationStartChange({
                     typeName: 'LocationStartChange',
-                    changedIds: [featureId],
-                    featureId,
-                    oldStart,
-                    newStart,
+                    changedIds: changes.map((c) => c.featureId),
+                    changes: changes.map((c) => ({
+                        featureId: c.featureId,
+                        oldStart: c.oldLocation,
+                        newStart: c.newLocation,
+                    })),
                     assembly,
                 });
-            }
             void self.changeManager.submit(change);
             self.setDragging();
             self.setCursor();
@@ -8253,6 +9762,9 @@ function mouseEventsModelFactory$1(pluginManager, configSchema) {
             if (isMousePositionWithFeatureAndGlyph$1(mousePosition)) {
                 mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(self, mousePosition, event);
             }
+            else {
+                self.setSelectedFeature();
+            }
             if (self.apolloDragging) {
                 self.endDrag();
             }
@@ -8302,11 +9814,46 @@ function stateModelFactory$1(pluginManager, configSchema) {
 
 const configSchema = configuration.ConfigurationSchema('LinearApolloSixFrameDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
 
+const FilterTranscripts = mobxReact.observer(function FilterTranscripts({ sourceFeature, filteredTranscripts, handleClose, onUpdate, }) {
+    const allTranscripts = [];
+    if (sourceFeature.children) {
+        for (const [, child] of sourceFeature.children) {
+            const childID = child.attributes
+                .get('gff_id')
+                ?.toString();
+            if (childID) {
+                allTranscripts.push(childID);
+            }
+        }
+    }
+    const [excludedTranscripts, setExcludedTranscripts] = React.useState(filteredTranscripts);
+    const handleChange = (value) => {
+        const newForms = excludedTranscripts.includes(value)
+            ? excludedTranscripts.filter((form) => form !== value)
+            : [...excludedTranscripts, value];
+        onUpdate(newForms);
+        setExcludedTranscripts(newForms);
+    };
+    return (React__default["default"].createElement(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose },
+        React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.DialogContentText, null, "Select the alternate transcripts you want to display in the apollo track"),
+            React__default["default"].createElement(material.Grid2, { container: true, spacing: 2 },
+                React__default["default"].createElement(material.Grid2, { size: 8 },
+                    React__default["default"].createElement(material.FormGroup, null, allTranscripts.map((item) => (
+                    // eslint-disable-next-line react/jsx-key
+                    React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
+                                handleChange(item);
+                            }, inputProps: { 'aria-label': 'controlled' } }), label: item })))))))));
+});
+
 let forwardFillLight = null;
 let backwardFillLight = null;
 let forwardFillDark = null;
 let backwardFillDark = null;
-if ('document' in globalThis) {
+const canvas = globalThis.document.createElement('canvas');
+// @ts-expect-error getContext is undefined in the web worker
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+if (canvas?.getContext) {
     for (const direction of ['forward', 'backward']) {
         for (const themeMode of ['light', 'dark']) {
             const canvas = document.createElement('canvas');
@@ -8357,15 +9904,35 @@ function deepSetHas(set, item) {
     }
     return false;
 }
+function drawTextLabels(ctx, labelArray, font = '10px sans-serif') {
+    for (let i = labelArray.length - 1; i >= 0; --i) {
+        const label = labelArray[i];
+        ctx.fillStyle = label.color;
+        const labelRowX = Math.max(label.x + 1, 0);
+        const labelRowY = label.y + label.h;
+        const textWidth = util.measureText(label.text, 10);
+        if (label.isSelected) {
+            ctx.clearRect(labelRowX - 5, labelRowY, textWidth + 10, label.h);
+            ctx.font = 'bold '.concat(font);
+        }
+        if (label.text) {
+            ctx.fillText(label.text, labelRowX, labelRowY + 11, textWidth);
+            ctx.font = font;
+        }
+    }
+}
 function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
-    const { apolloRowHeight, lgv, session, theme, highestRow } = stateModel;
+    const { apolloRowHeight, lgv, session, theme, highestRow, filteredTranscripts, showFeatureLabels, } = stateModel;
     const { bpPerPx, displayedRegions, offsetPx } = lgv;
     const displayedRegion = displayedRegions[displayedRegionIndex];
     const { refName, reversed } = displayedRegion;
     const rowHeight = apolloRowHeight;
-    const exonHeight = Math.round(0.6 * rowHeight);
-    const cdsHeight = Math.round(0.7 * rowHeight);
-    const { children, min, strand, _id } = topLevelFeature;
+    const exonHeight = rowHeight;
+    const cdsHeight = rowHeight;
+    const topLevelFeatureHeight = rowHeight;
+    const featureLabelSpacer = showFeatureLabels ? 2 : 1;
+    const textColor = theme?.palette.text.primary ?? 'black';
+    const { attributes, children, min, strand } = topLevelFeature;
     if (!children) {
         return;
     }
@@ -8375,6 +9942,7 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
     if (!featureTypeOntology) {
         throw new Error('featureTypeOntology is undefined');
     }
+    const labelArray = [];
     // Draw background for gene
     const topLevelFeatureMinX = (lgv.bpToPx({
         refName,
@@ -8385,16 +9953,29 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
     const topLevelFeatureStartPx = reversed
         ? topLevelFeatureMinX - topLevelFeatureWidthPx
         : topLevelFeatureMinX;
-    const topLevelRow = strand == 1 ? 3 : 4;
+    const topLevelRow = (strand == 1 ? 3 : 4) * featureLabelSpacer;
     const topLevelFeatureTop = topLevelRow * rowHeight;
-    const topLevelFeatureHeight = Math.round(0.7 * rowHeight);
     ctx.fillStyle = theme?.palette.text.primary ?? 'black';
     ctx.fillRect(topLevelFeatureStartPx, topLevelFeatureTop, topLevelFeatureWidthPx, topLevelFeatureHeight);
-    ctx.fillStyle =
-        apolloSelectedFeature && _id === apolloSelectedFeature._id
-            ? material.alpha('rgb(0,0,0)', 0.7)
-            : material.alpha(theme?.palette.background.paper ?? '#ffffff', 0.7);
+    ctx.fillStyle = isSelectedFeature(topLevelFeature, apolloSelectedFeature)
+        ? material.alpha('rgb(0,0,0)', 0.7)
+        : material.alpha(theme?.palette.background.paper ?? '#ffffff', 0.7);
     ctx.fillRect(topLevelFeatureStartPx + 1, topLevelFeatureTop + 1, topLevelFeatureWidthPx - 2, topLevelFeatureHeight - 2);
+    const isSelected = isSelectedFeature(topLevelFeature, apolloSelectedFeature);
+    const label = {
+        x: topLevelFeatureStartPx,
+        y: topLevelFeatureTop,
+        h: topLevelFeatureHeight,
+        text: attributes.get('gff_id')?.toString(),
+        color: textColor,
+        isSelected,
+    };
+    if (isSelected) {
+        labelArray.unshift(label);
+    }
+    else {
+        labelArray.push(label);
+    }
     const forwardFill = theme?.palette.mode === 'dark' ? forwardFillDark : forwardFillLight;
     const backwardFill = theme?.palette.mode === 'dark' ? backwardFillDark : backwardFillLight;
     const reversal = reversed ? -1 : 1;
@@ -8418,10 +9999,16 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
             featureTypeOntology.isTypeOf(child.type, 'pseudogenic_transcript'))) {
             continue;
         }
-        const { children: childrenOfmRNA, cdsLocations, _id } = child;
+        const { children: childrenOfmRNA, cdsLocations } = child;
         if (!childrenOfmRNA) {
             continue;
         }
+        const childID = child.attributes
+            .get('gff_id')
+            ?.toString();
+        if (childID && filteredTranscripts.includes(childID)) {
+            continue;
+        }
         for (const [, exon] of childrenOfmRNA) {
             if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
                 continue;
@@ -8434,14 +10021,12 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
             const widthPx = exon.length / bpPerPx;
             const startPx = reversed ? minX - widthPx : minX;
             const exonTop = topLevelFeatureTop + (topLevelFeatureHeight - exonHeight) / 2;
+            const isSelected = isSelectedFeature(exon, apolloSelectedFeature);
             ctx.fillStyle = theme?.palette.text.primary ?? 'black';
             ctx.fillRect(startPx, exonTop, widthPx, exonHeight);
             if (widthPx > 2) {
                 ctx.clearRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2);
-                ctx.fillStyle =
-                    apolloSelectedFeature && exon._id === apolloSelectedFeature._id
-                        ? 'rgb(0,0,0)'
-                        : material.alpha('#f5f500', 0.6);
+                ctx.fillStyle = isSelected ? 'rgb(0,0,0)' : material.alpha('#f5f500', 0.6);
                 ctx.fillRect(startPx + 1, exonTop + 1, widthPx - 2, exonHeight - 2);
                 if (topFill && bottomFill) {
                     ctx.fillStyle = topFill;
@@ -8449,16 +10034,33 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
                     ctx.fillStyle = bottomFill;
                     ctx.fillRect(startPx + 1, exonTop + 1 + (exonHeight - 2) / 2, widthPx - 2, (exonHeight - 2) / 2);
                 }
+                const label = {
+                    x: startPx,
+                    y: exonTop,
+                    h: exonHeight,
+                    text: exon.attributes.get('gff_id')?.toString(),
+                    color: textColor,
+                    isSelected,
+                };
+                if (isSelected) {
+                    labelArray.unshift(label);
+                }
+                else {
+                    labelArray.push(label);
+                }
             }
         }
+        const isSelected = isSelectedFeature(child, apolloSelectedFeature?.parent);
+        let cdsStartPx = 0;
+        let cdsTop = 0;
         for (const cdsRow of cdsLocations) {
             let prevCDSTop = 0;
             let prevCDSEndPx = 0;
             let counter = 1;
             for (const cds of cdsRow.sort((a, b) => a.max - b.max)) {
                 if ((apolloSelectedFeature &&
-                    featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS') &&
-                    _id === apolloSelectedFeature.parent?._id) ||
+                    isSelected &&
+                    featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS')) ||
                     !deepSetHas(renderedCDS, cds)) {
                     const cdsWidthPx = (cds.max - cds.min) / bpPerPx;
                     const minX = (lgv.bpToPx({
@@ -8466,11 +10068,11 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
                         coord: cds.min,
                         regionNumber: displayedRegionIndex,
                     })?.offsetPx ?? 0) - offsetPx;
-                    const cdsStartPx = reversed ? minX - cdsWidthPx : minX;
+                    cdsStartPx = reversed ? minX - cdsWidthPx : minX;
                     ctx.fillStyle = theme?.palette.text.primary ?? 'black';
                     const frame = util.getFrame(cds.min, cds.max, child.strand ?? 1, cds.phase);
-                    const frameAdjust = frame < 0 ? -1 * frame + 5 : frame;
-                    const cdsTop = (frameAdjust - 1) * rowHeight + (rowHeight - cdsHeight) / 2;
+                    const frameAdjust = (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer;
+                    cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight;
                     ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight);
                     if (cdsWidthPx > 2) {
                         ctx.clearRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, cdsHeight - 2);
@@ -8479,8 +10081,8 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
                         ctx.fillStyle = cdsColorCode;
                         ctx.fillStyle =
                             apolloSelectedFeature &&
-                                featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS') &&
-                                _id === apolloSelectedFeature.parent?._id
+                                isSelected &&
+                                featureTypeOntology.isTypeOf(apolloSelectedFeature.type, 'CDS')
                                 ? 'rgb(0,0,0)'
                                 : cdsColorCode;
                         ctx.fillRect(cdsStartPx + 1, cdsTop + 1, cdsWidthPx - 2, cdsHeight - 2);
@@ -8489,7 +10091,9 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
                             // Mid-point for intron line "hat"
                             const midPoint = [
                                 (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-                                Math.max(frame < 0 ? rowHeight * highestRow + 1 : 1, // Avoid render ceiling
+                                Math.max(frame < 0
+                                    ? rowHeight * featureLabelSpacer * highestRow + 1
+                                    : 1, // Avoid render ceiling
                                 Math.min(prevCDSTop, cdsTop) - rowHeight / 2),
                             ];
                             ctx.strokeStyle = 'rgb(0, 128, 128)';
@@ -8515,6 +10119,23 @@ function draw(ctx, topLevelFeature, _row, stateModel, displayedRegionIndex) {
                 }
             }
         }
+        const label = {
+            x: cdsStartPx,
+            y: cdsTop,
+            h: cdsHeight,
+            text: child.attributes.get('gff_id')?.toString(),
+            color: textColor,
+            isSelected,
+        };
+        if (isSelected) {
+            labelArray.unshift(label);
+        }
+        else {
+            labelArray.push(label);
+        }
+    }
+    if (showFeatureLabels) {
+        drawTextLabels(ctx, labelArray);
     }
 }
 function drawDragPreview(stateModel, overlayCtx) {
@@ -8542,7 +10163,7 @@ function drawDragPreview(stateModel, overlayCtx) {
     overlayCtx.fillRect(rectX, rectY, rectWidth, rectHeight);
 }
 function drawHover(stateModel, ctx) {
-    const { apolloHover, apolloRowHeight, lgv, highestRow, session } = stateModel;
+    const { apolloHover, apolloRowHeight, filteredTranscripts, lgv, highestRow, session, showFeatureLabels, } = stateModel;
     if (!apolloHover) {
         return;
     }
@@ -8555,6 +10176,12 @@ function drawHover(stateModel, ctx) {
     if (!featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
         return;
     }
+    const featureID = feature.attributes
+        .get('gff_id')
+        ?.toString();
+    if (featureID && filteredTranscripts.includes(featureID)) {
+        return;
+    }
     const position = stateModel.getFeatureLayoutPosition(feature);
     if (!position) {
         return;
@@ -8564,7 +10191,8 @@ function drawHover(stateModel, ctx) {
     const displayedRegion = displayedRegions[layoutIndex];
     const { refName, reversed } = displayedRegion;
     const rowHeight = apolloRowHeight;
-    const cdsHeight = Math.round(0.7 * rowHeight);
+    const cdsHeight = rowHeight;
+    const featureLabelSpacer = showFeatureLabels ? 2 : 1;
     const { cdsLocations, strand } = feature;
     for (const cdsRow of cdsLocations) {
         let prevCDSTop = 0;
@@ -8580,15 +10208,15 @@ function drawHover(stateModel, ctx) {
                 })?.offsetPx ?? 0) - offsetPx;
                 const cdsStartPx = reversed ? minX - cdsWidthPx : minX;
                 const frame = util.getFrame(cds.min, cds.max, strand ?? 1, cds.phase);
-                const frameAdjust = frame < 0 ? -1 * frame + 5 : frame;
-                const cdsTop = (frameAdjust - 1) * rowHeight + (rowHeight - cdsHeight) / 2;
+                const frameAdjust = (frame < 0 ? -1 * frame + 5 : frame) * featureLabelSpacer;
+                const cdsTop = (frameAdjust - featureLabelSpacer) * rowHeight;
                 ctx.fillStyle = 'rgba(255,0,0,0.6)';
                 ctx.fillRect(cdsStartPx, cdsTop, cdsWidthPx, cdsHeight);
                 if (counter > 1) {
                     // Mid-point for intron line "hat"
                     const midPoint = [
                         (cdsStartPx - prevCDSEndPx) / 2 + prevCDSEndPx,
-                        Math.max(frame < 0 ? rowHeight * highestRow + 1 : 1, // Avoid render ceiling
+                        Math.max(frame < 0 ? rowHeight * featureLabelSpacer * highestRow + 1 : 1, // Avoid render ceiling
                         Math.min(prevCDSTop, cdsTop) - rowHeight / 2),
                     ];
                     ctx.strokeStyle = 'rgb(0, 0, 0)';
@@ -8616,7 +10244,7 @@ function onMouseDown(stateModel, currentMousePosition, event) {
     const draggableFeature = getDraggableFeatureInfo(currentMousePosition, cds, feature, stateModel);
     if (draggableFeature) {
         event.stopPropagation();
-        stateModel.startDrag(currentMousePosition, draggableFeature.feature, draggableFeature.edge);
+        stateModel.startDrag(currentMousePosition, draggableFeature.feature, draggableFeature.edge, true);
     }
 }
 function onMouseMove(stateModel, mousePosition) {
@@ -8640,28 +10268,39 @@ function onMouseUp(stateModel, mousePosition) {
     const { session } = stateModel;
     const { apolloDataStore } = session;
     const { featureTypeOntology } = apolloDataStore.ontologyManager;
-    if (featureAndGlyphUnderMouse?.cds) {
-        const { cds, feature } = featureAndGlyphUnderMouse;
-        if (!featureTypeOntology) {
-            throw new Error('featureTypeOntology is undefined');
-        }
-        if (!feature.children) {
-            return;
-        }
-        for (const child of feature.children.values()) {
-            const childIsCDS = featureTypeOntology.isTypeOf(child.type, 'CDS');
-            if (childIsCDS && cds.max <= child.max && cds.min >= child.min) {
-                stateModel.setSelectedFeature(child);
-                break;
-            }
+    if (!featureAndGlyphUnderMouse) {
+        return;
+    }
+    const { feature } = featureAndGlyphUnderMouse;
+    stateModel.setSelectedFeature(feature);
+    if (!featureTypeOntology) {
+        throw new Error('featureTypeOntology is undefined');
+    }
+    let containsCDSOrExon = false;
+    for (const [, child] of feature.children ?? []) {
+        if (featureTypeOntology.isTypeOf(child.type, 'CDS') ||
+            featureTypeOntology.isTypeOf(child.type, 'exon')) {
+            containsCDSOrExon = true;
+            break;
         }
     }
-    else if (featureAndGlyphUnderMouse?.feature) {
-        stateModel.setSelectedFeature(featureAndGlyphUnderMouse.feature);
+    if ((featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
+        featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
+        containsCDSOrExon) {
+        stateModel.showFeatureDetailsWidget(feature, [
+            'ApolloTranscriptDetails',
+            'apolloTranscriptDetails',
+        ]);
+    }
+    else {
+        stateModel.showFeatureDetailsWidget(feature);
     }
 }
+function isSelectedFeature(feature, selectedFeature) {
+    return Boolean(selectedFeature && feature._id === selectedFeature._id);
+}
 function getDraggableFeatureInfo(mousePosition, cds, feature, stateModel) {
-    const { session } = stateModel;
+    const { filteredTranscripts, session } = stateModel;
     const { apolloDataStore } = session;
     const { featureTypeOntology } = apolloDataStore.ontologyManager;
     if (!featureTypeOntology) {
@@ -8671,67 +10310,64 @@ function getDraggableFeatureInfo(mousePosition, cds, feature, stateModel) {
     if (cds === null) {
         return;
     }
-    const { bp, refName, regionNumber, x } = mousePosition;
-    const { lgv } = stateModel;
-    const { offsetPx } = lgv;
-    const minPxInfo = lgv.bpToPx({ refName, coord: cds.min, regionNumber });
-    const maxPxInfo = lgv.bpToPx({ refName, coord: cds.max, regionNumber });
-    if (minPxInfo === undefined || maxPxInfo === undefined) {
-        return;
-    }
-    const minPx = minPxInfo.offsetPx - offsetPx;
-    const maxPx = maxPxInfo.offsetPx - offsetPx;
-    if (Math.abs(maxPx - minPx) < 8) {
+    const featureID = feature.attributes
+        .get('gff_id')
+        ?.toString();
+    if (featureID && filteredTranscripts.includes(featureID)) {
         return;
     }
+    const { bp, refName, regionNumber, x } = mousePosition;
+    const { lgv } = stateModel;
     if (isTranscript) {
         const transcript = feature;
         if (!transcript.children) {
             return;
         }
         const exonChildren = [];
+        const cdsChildren = [];
         for (const child of transcript.children.values()) {
             const childIsExon = featureTypeOntology.isTypeOf(child.type, 'exon');
+            const childIsCDS = featureTypeOntology.isTypeOf(child.type, 'CDS');
             if (childIsExon) {
                 exonChildren.push(child);
             }
+            else if (childIsCDS) {
+                cdsChildren.push(child);
+            }
         }
         const overlappingExon = exonChildren.find((child) => {
             const [start, end] = util.intersection2(bp, bp + 1, child.min, child.max);
             return start !== undefined && end !== undefined;
         });
-        if (!overlappingExon) {
-            return;
-        }
-        const minPxInfo = lgv.bpToPx({
-            refName,
-            coord: overlappingExon.min,
-            regionNumber,
-        });
-        const maxPxInfo = lgv.bpToPx({
-            refName,
-            coord: overlappingExon.max,
-            regionNumber,
-        });
-        if (minPxInfo === undefined || maxPxInfo === undefined) {
-            return;
-        }
-        const minPx = minPxInfo.offsetPx - offsetPx;
-        const maxPx = maxPxInfo.offsetPx - offsetPx;
-        if (Math.abs(maxPx - minPx) < 8) {
-            return;
-        }
-        if (Math.abs(minPx - x) < 4) {
-            return { feature: overlappingExon, edge: 'min' };
-        }
-        if (Math.abs(maxPx - x) < 4) {
-            return { feature: overlappingExon, edge: 'max' };
+        if (overlappingExon) {
+            // We are on an exon, are we on the edge of it?
+            const minMax = getMinAndMaxPx(overlappingExon, refName, regionNumber, lgv);
+            if (minMax) {
+                const overlappingEdge = getOverlappingEdge(overlappingExon, x, minMax);
+                if (overlappingEdge) {
+                    return overlappingEdge;
+                }
+            }
+        }
+        // End of special cases, let's see if we're on the edge of this CDS or exon
+        const minMax = getMinAndMaxPx(cds, refName, regionNumber, lgv);
+        if (minMax) {
+            const overlappingCDS = cdsChildren.find((child) => {
+                const [start, end] = util.intersection2(bp, bp + 1, child.min, child.max);
+                return start !== undefined && end !== undefined;
+            });
+            if (overlappingCDS) {
+                const overlappingEdge = getOverlappingEdge(overlappingCDS, x, minMax);
+                if (overlappingEdge) {
+                    return overlappingEdge;
+                }
+            }
         }
     }
     return;
 }
 function drawTooltip(display, context) {
-    const { apolloHover, apolloRowHeight, lgv, theme } = display;
+    const { apolloHover, apolloRowHeight, filteredTranscripts, lgv, theme } = display;
     if (!apolloHover) {
         return;
     }
@@ -8743,6 +10379,12 @@ function drawTooltip(display, context) {
     if (!position) {
         return;
     }
+    const featureID = feature.attributes
+        .get('gff_id')
+        ?.toString();
+    if (featureID && filteredTranscripts.includes(featureID)) {
+        return;
+    }
     const { layoutIndex } = position;
     const { bpPerPx, displayedRegions, offsetPx } = lgv;
     const displayedRegion = displayedRegions[layoutIndex];
@@ -8794,7 +10436,7 @@ function drawTooltip(display, context) {
     context.fillText(location, startPx + 2, textTop);
 }
 function getContextMenuItems(display) {
-    const { apolloHover, apolloInternetAccount: internetAccount, changeManager, regions, selectedFeature, session, } = display;
+    const { apolloHover, apolloInternetAccount: internetAccount, changeManager, filteredTranscripts, regions, selectedFeature, session, } = display;
     const menuItems = [];
     if (!apolloHover) {
         return menuItems;
@@ -8862,33 +10504,28 @@ function getContextMenuItems(display) {
                 },
             ]);
         },
-    }, {
-        label: 'Edit feature details',
-        onClick: () => {
-            const apolloFeatureWidget = session.addWidget('ApolloFeatureDetailsWidget', 'apolloFeatureDetailsWidget', {
-                feature: sourceFeature,
-                assembly: currentAssemblyId,
-                refName: region.refName,
-            });
-            session.showWidget(apolloFeatureWidget);
-        },
     });
     const { featureTypeOntology } = session.apolloDataStore.ontologyManager;
     if (!featureTypeOntology) {
         throw new Error('featureTypeOntology is undefined');
     }
-    if (featureTypeOntology.isTypeOf(sourceFeature.type, 'transcript') &&
-        util.isSessionModelWithWidgets(session)) {
+    if (featureTypeOntology.isTypeOf(sourceFeature.type, 'gene')) {
         menuItems.push({
-            label: 'Edit transcript details',
+            label: 'Filter alternate transcripts',
             onClick: () => {
-                const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
-                    feature: sourceFeature,
-                    assembly: currentAssemblyId,
-                    changeManager,
-                    refName: region.refName,
-                });
-                session.showWidget(apolloTranscriptWidget);
+                session.queueDialog((doneCallback) => [
+                    FilterTranscripts,
+                    {
+                        handleClose: () => {
+                            doneCallback();
+                        },
+                        sourceFeature,
+                        filteredTranscripts: mobxStateTree.getSnapshot(filteredTranscripts),
+                        onUpdate: (forms) => {
+                            display.updateFilteredTranscripts(forms);
+                        },
+                    },
+                ]);
             },
         });
     }
@@ -8917,6 +10554,7 @@ function baseModelFactory(_pluginManager, configSchema) {
         configuration: configuration.ConfigurationReference(configSchema),
         graphical: true,
         table: false,
+        showFeatureLabels: true,
         heightPreConfig: mobxStateTree.types.maybe(mobxStateTree.types.refinement('displayHeight', mobxStateTree.types.number, (n) => n >= minDisplayHeight)),
         filteredFeatureTypes: mobxStateTree.types.array(mobxStateTree.types.string),
     })
@@ -9033,6 +10671,9 @@ function baseModelFactory(_pluginManager, configSchema) {
             self.graphical = true;
             self.table = true;
         },
+        toggleShowFeatureLabels() {
+            self.showFeatureLabels = !self.showFeatureLabels;
+        },
         updateFilteredFeatureTypes(types) {
             self.filteredFeatureTypes = mobxStateTree.cast(types);
         },
@@ -9041,7 +10682,7 @@ function baseModelFactory(_pluginManager, configSchema) {
         const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
         return {
             trackMenuItems() {
-                const { graphical, table } = self;
+                const { graphical, table, showFeatureLabels } = self;
                 return [
                     ...superTrackMenuItems(),
                     {
@@ -9072,6 +10713,14 @@ function baseModelFactory(_pluginManager, configSchema) {
                                     self.showGraphicalAndTable();
                                 },
                             },
+                            {
+                                label: 'Feature Labels',
+                                type: 'checkbox',
+                                checked: showFeatureLabels,
+                                onClick: () => {
+                                    self.toggleShowFeatureLabels();
+                                },
+                            },
                         ],
                     },
                     {
@@ -9101,6 +10750,27 @@ function baseModelFactory(_pluginManager, configSchema) {
         setSelectedFeature(feature) {
             self.session.apolloSetSelectedFeature(feature);
         },
+        showFeatureDetailsWidget(feature, customWidgetNameAndId) {
+            const [region] = self.regions;
+            const { assemblyName, refName } = region;
+            const assembly = self.getAssemblyId(assemblyName);
+            if (!assembly) {
+                return;
+            }
+            const { session } = self;
+            const { changeManager } = session.apolloDataStore;
+            const [widgetName, widgetId] = customWidgetNameAndId ?? [
+                'ApolloFeatureDetailsWidget',
+                'apolloFeatureDetailsWidget',
+            ];
+            const apolloFeatureWidget = session.addWidget(widgetName, widgetId, {
+                feature,
+                assembly,
+                refName,
+                changeManager,
+            });
+            session.showWidget(apolloFeatureWidget);
+        },
         afterAttach() {
             mobxStateTree.addDisposer(self, mobx.autorun(() => {
                 if (!self.lgv.initialized || self.regionCannotBeRendered()) {
@@ -9161,6 +10831,9 @@ function layoutsModelFactory(pluginManager, configSchema) {
         getGlyph(_feature) {
             return geneGlyph;
         },
+        featureLabelSpacer(elem) {
+            return self.showFeatureLabels ? elem * 2 - 1 : elem;
+        },
     }))
         .actions((self) => ({
         addSeenFeature(feature) {
@@ -9169,6 +10842,11 @@ function layoutsModelFactory(pluginManager, configSchema) {
         deleteSeenFeature(featureId) {
             self.seenFeatures.delete(featureId);
         },
+    }))
+        .views((self) => ({
+        get geneTrackRowNums() {
+            return [4, 5].map((elem) => self.featureLabelSpacer(elem));
+        },
     }))
         .views((self) => ({
         get featureLayouts() {
@@ -9195,7 +10873,9 @@ function layoutsModelFactory(pluginManager, configSchema) {
                         throw new Error('featureTypeOntology is undefined');
                     }
                     if (feature.looksLikeGene) {
-                        const rowNum = feature.strand == 1 ? 4 : 5;
+                        const rowNum = feature.strand == 1
+                            ? self.geneTrackRowNums[0]
+                            : self.geneTrackRowNums[1];
                         if (!featureLayout.get(rowNum)) {
                             featureLayout.set(rowNum, []);
                         }
@@ -9213,7 +10893,9 @@ function layoutsModelFactory(pluginManager, configSchema) {
                                         if (!featureTypeOntology.isTypeOf(exon.type, 'exon')) {
                                             continue;
                                         }
-                                        const rowNum = exon.strand == 1 ? 4 : 5;
+                                        const rowNum = exon.strand == 1
+                                            ? self.geneTrackRowNums[0]
+                                            : self.geneTrackRowNums[1];
                                         const layoutRow = featureLayout.get(rowNum);
                                         layoutRow?.push({ rowNum, feature: exon, cds: null });
                                     }
@@ -9221,7 +10903,7 @@ function layoutsModelFactory(pluginManager, configSchema) {
                                 for (const cdsRow of cdsLocations) {
                                     for (const cds of cdsRow) {
                                         let rowNum = util.getFrame(cds.min, cds.max, strand ?? 1, cds.phase);
-                                        rowNum = rowNum < 0 ? -1 * rowNum + 5 : rowNum;
+                                        rowNum = self.featureLabelSpacer(rowNum < 0 ? -1 * rowNum + 5 : rowNum);
                                         if (!featureLayout.get(rowNum)) {
                                             featureLayout.set(rowNum, []);
                                         }
@@ -9297,6 +10979,7 @@ function renderingModelIntermediateFactory(pluginManager, configSchema) {
         detailsHeight: 200,
         lastRowTooltipBufferHeight: 80,
         isShown: true,
+        filteredTranscripts: mobxStateTree.types.array(mobxStateTree.types.string),
     })
         .volatile(() => ({
         canvas: null,
@@ -9306,7 +10989,8 @@ function renderingModelIntermediateFactory(pluginManager, configSchema) {
     }))
         .views((self) => ({
         get featuresHeight() {
-            return ((self.highestRow + 1) * self.apolloRowHeight +
+            const featureLabelSpacer = self.showFeatureLabels ? 2 : 1;
+            return (featureLabelSpacer * ((self.highestRow + 1) * self.apolloRowHeight) +
                 self.lastRowTooltipBufferHeight);
         },
     }))
@@ -9444,7 +11128,7 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
                 return mousePosition;
             }
             let foundFeature;
-            if ([4, 5].includes(row)) {
+            if (self.geneTrackRowNums.includes(row)) {
                 foundFeature = layoutRow.find((f) => f.feature.type == 'exon' &&
                     bp >= f.feature.min &&
                     bp <= f.feature.max);
@@ -9453,7 +11137,14 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
                 }
             }
             else {
-                foundFeature = layoutRow.find((f) => f.cds != null && bp >= f.cds.min && bp <= f.cds.max);
+                foundFeature = layoutRow.find((f) => {
+                    const featureID = f.feature.attributes.get('gff_id')?.toString();
+                    return (f.cds != null &&
+                        bp >= f.cds.min &&
+                        bp <= f.cds.max &&
+                        (featureID === undefined ||
+                            !self.filteredTranscripts.includes(featureID)));
+                });
             }
             if (!foundFeature) {
                 return mousePosition;
@@ -9488,6 +11179,9 @@ function mouseEventsModelIntermediateFactory(pluginManager, configSchema) {
                 self.cursor = cursor;
             }
         },
+        updateFilteredTranscripts(forms) {
+            self.filteredTranscripts = mobxStateTree.cast(forms);
+        },
     }))
         .actions(() => ({
         // onClick(event: CanvasMouseEvent) {
@@ -9512,19 +11206,20 @@ function mouseEventsModelFactory(pluginManager, configSchema) {
         .actions((self) => ({
         // explicitly pass in a feature in case it's not the same as the one in
         // mousePosition (e.g. if features are drawn overlapping).
-        startDrag(mousePosition, feature, edge) {
+        startDrag(mousePosition, feature, edge, shrinkParent = false) {
             self.apolloDragging = {
                 start: mousePosition,
                 current: mousePosition,
                 feature,
                 edge,
+                shrinkParent,
             };
         },
         endDrag() {
             if (!self.apolloDragging) {
                 throw new Error('endDrag() called with no current drag in progress');
             }
-            const { current, edge, feature, start } = self.apolloDragging;
+            const { current, edge, feature, start, shrinkParent } = self.apolloDragging;
             // don't do anything if it was only dragged a tiny bit
             if (Math.abs(current.x - start.x) <= 4) {
                 self.setDragging();
@@ -9534,33 +11229,28 @@ function mouseEventsModelFactory(pluginManager, configSchema) {
             const { displayedRegions } = self.lgv;
             const region = displayedRegions[start.regionNumber];
             const assembly = self.getAssemblyId(region.assemblyName);
-            let change;
-            if (edge === 'max') {
-                const featureId = feature._id;
-                const oldEnd = feature.max;
-                const newEnd = current.bp;
-                change = new shared.LocationEndChange({
+            const changes = getPropagatedLocationChanges(feature, current.bp, edge, shrinkParent);
+            const change = edge === 'max'
+                ? new shared.LocationEndChange({
                     typeName: 'LocationEndChange',
-                    changedIds: [featureId],
-                    featureId,
-                    oldEnd,
-                    newEnd,
+                    changedIds: changes.map((c) => c.featureId),
+                    changes: changes.map((c) => ({
+                        featureId: c.featureId,
+                        oldEnd: c.oldLocation,
+                        newEnd: c.newLocation,
+                    })),
                     assembly,
-                });
-            }
-            else {
-                const featureId = feature._id;
-                const oldStart = feature.min;
-                const newStart = current.bp;
-                change = new shared.LocationStartChange({
+                })
+                : new shared.LocationStartChange({
                     typeName: 'LocationStartChange',
-                    changedIds: [featureId],
-                    featureId,
-                    oldStart,
-                    newStart,
+                    changedIds: changes.map((c) => c.featureId),
+                    changes: changes.map((c) => ({
+                        featureId: c.featureId,
+                        oldStart: c.oldLocation,
+                        newStart: c.newLocation,
+                    })),
                     assembly,
                 });
-            }
             void self.changeManager.submit(change);
             self.setDragging();
             self.setCursor();
@@ -9601,6 +11291,9 @@ function mouseEventsModelFactory(pluginManager, configSchema) {
             if (isMousePositionWithFeatureAndGlyph(mousePosition)) {
                 mousePosition.featureAndGlyphUnderMouse.glyph.onMouseUp(self, mousePosition, event);
             }
+            else {
+                self.setSelectedFeature();
+            }
             if (self.apolloDragging) {
                 self.endDrag();
             }
@@ -9651,185 +11344,16 @@ function stateModelFactory(pluginManager, configSchema) {
 const ApolloPluginConfigurationSchema = configuration.ConfigurationSchema('ApolloPlugin', {
     ontologies: mobxStateTree.types.array(OntologyRecordConfiguration),
     featureTypeOntologyName: {
-        description: 'Name of the feature type ontology',
-        type: 'string',
-        defaultValue: 'Sequence Ontology',
-    },
-});
-
-function parseCigar(cigar) {
-    return (cigar.toUpperCase().match(/\d+\D/g) ?? []).map((op) => {
-        return [(/\D/.exec(op) ?? [])[0], Number.parseInt(op, 10)];
-    });
-}
-function annotationFromPileup(pluggableElement) {
-    if (pluggableElement.name !== 'LinearPileupDisplay') {
-        return pluggableElement;
-    }
-    const { stateModel } = pluggableElement;
-    const newStateModel = stateModel
-        .views((self) => ({
-        getFirstRegion() {
-            const lgv = util.getContainingView(self);
-            return lgv.dynamicBlocks.contentBlocks[0];
-        },
-        getAssembly() {
-            const firstRegion = self.getFirstRegion();
-            const session = util.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;
-        },
-        createFeature() {
-            const feature = self.contextMenuFeature;
-            const assembly = self.getAssembly();
-            const refSeqId = self.getRefSeqId(assembly);
-            const cigarData = feature.get('CIGAR');
-            const ops = parseCigar(cigarData);
-            let currOffset = 0;
-            const start = feature.get('start');
-            let openStart;
-            const exons = [];
-            for (const [op, len] of ops) {
-                // open or continue open
-                if (op === 'M' || op === '=') {
-                    // if it was closed, then open with start, strand, type
-                    if (openStart === undefined) {
-                        // add subfeature
-                        openStart = currOffset + start;
-                    }
-                }
-                else if (op === 'N' && openStart !== undefined) {
-                    // if it was open, then close and add the subfeature
-                    exons.push({
-                        start: openStart,
-                        end: currOffset + openStart,
-                    });
-                    openStart = undefined;
-                }
-                if (op !== 'I') {
-                    // we ignore insertions when calculating potential exon length
-                    currOffset += len;
-                }
-            }
-            // if we are still open, then close with the final length and add subfeature
-            if (openStart !== undefined) {
-                exons.push({
-                    start: openStart,
-                    end: currOffset + start,
-                });
-            }
-            const newFeature = {
-                _id: ObjectID__default["default"]().toHexString(),
-                refSeq: refSeqId,
-                min: feature.get('start'),
-                max: feature.get('end'),
-                type: 'mRNA',
-                strand: feature.get('strand'),
-            };
-            if (exons.length === 0) {
-                return newFeature;
-            }
-            const children = {};
-            newFeature.children = children;
-            const [firstExon] = exons;
-            const cdsFeature = {
-                _id: ObjectID__default["default"]().toHexString(),
-                refSeq: refSeqId,
-                min: firstExon.start,
-                max: firstExon.end,
-                type: 'CDS',
-                strand: feature.get('strand'),
-            };
-            newFeature.children[cdsFeature._id] = cdsFeature;
-            if (exons.length === 1) {
-                const exon = {
-                    _id: ObjectID__default["default"]().toHexString(),
-                    refSeq: refSeqId,
-                    min: firstExon.start,
-                    max: firstExon.end,
-                    type: 'exon',
-                    strand: feature.get('strand'),
-                };
-                newFeature.children[exon._id] = exon;
-                return newFeature;
-            }
-            for (const exon of exons) {
-                cdsFeature.min = Math.min(cdsFeature.min, exon.start);
-                cdsFeature.max = Math.max(cdsFeature.max, exon.end);
-                const { end, start } = exon;
-                const newExon = {
-                    _id: ObjectID__default["default"]().toHexString(),
-                    refSeq: refSeqId,
-                    min: start,
-                    max: end,
-                    type: 'exon',
-                    strand: feature.get('strand'),
-                };
-                newFeature.children[newExon._id] = newExon;
-            }
-            return newFeature;
-        },
-        async onPileupFeatureContext() {
-            const newFeature = self.createFeature();
-            const assembly = self.getAssembly();
-            const assemblyId = assembly.name;
-            const change = new shared.AddFeatureChange({
-                changedIds: [newFeature._id],
-                typeName: 'AddFeatureChange',
-                assembly: assemblyId,
-                addedFeature: newFeature,
-            });
-            const session = util.getSession(self);
-            await session.apolloDataStore.changeManager.submit(change);
-            session.notify('Annotation added successfully', 'success');
-        },
-    }))
-        .views((self) => {
-        const superContextMenuItems = self.contextMenuItems;
-        return {
-            contextMenuItems() {
-                const feature = self.contextMenuFeature;
-                if (!feature) {
-                    return superContextMenuItems();
-                }
-                return [
-                    ...superContextMenuItems(),
-                    {
-                        label: 'Create Apollo annotation',
-                        icon: AddIcon__default["default"],
-                        onClick: self.onPileupFeatureContext,
-                    },
-                ];
-            },
-        };
-    });
-    pluggableElement.stateModel = newStateModel;
-    return pluggableElement;
-}
+        description: 'Name of the feature type ontology',
+        type: 'string',
+        defaultValue: 'Sequence Ontology',
+    },
+    hasRole: {
+        description: 'Flag used internally by jbrowse-plugin-apollo',
+        type: 'boolean',
+        defaultValue: false,
+    },
+});
 
 /* eslint-disable react-hooks/exhaustive-deps */
 const isGeneOrTranscript = (annotationFeature, apolloSessionModel) => {
@@ -9858,61 +11382,80 @@ const isTranscript = (annotationFeature, apolloSessionModel) => {
     return (featureTypeOntology.isTypeOf(annotationFeature.type, 'transcript') ||
         featureTypeOntology.isTypeOf(annotationFeature.type, 'pseudogenic_transcript'));
 };
-const getFeatureId = (feature) => {
+function getFeatureName(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';
+    const keys = ['name', 'gff_name', 'transcript_name', 'gene_name'];
+    for (const key of keys) {
+        const value = attributes?.[key];
+        if (value?.[0]) {
+            return value[0];
+        }
     }
-    if (featureTypeOntology.isTypeOf(feature.type, 'transcript')) {
-        attrName = 'transcript_name';
+    return '';
+}
+function getGeneNameOrId(feature) {
+    const { attributes } = feature;
+    const keys = ['gene_name', 'gene_id', 'gene_stable_id'];
+    for (const key of keys) {
+        const value = attributes?.[key];
+        if (value?.[0]) {
+            return value[0];
+        }
     }
+    return '';
+}
+function getFeatureId(feature) {
     const { attributes } = feature;
-    const name = attributes?.[attrName];
+    const keys = [
+        'id',
+        'gff_id',
+        'transcript_id',
+        'gene_id',
+        'gene_stable_id',
+        'stable_id',
+    ];
+    for (const key of keys) {
+        const value = attributes?.[key];
+        if (value?.[0]) {
+            return value[0];
+        }
+    }
+    return '';
+}
+const getFeatureNameOrId = (feature) => {
+    const name = getFeatureName(feature);
+    const id = getFeatureId(feature);
     if (name) {
-        return name[0];
+        return `${feature.type} - ${name}`;
+    }
+    if (id) {
+        return `${feature.type} - ${id}`;
     }
-    return getFeatureId(feature);
+    return feature.type;
 };
-function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refSeqId, session, }) {
+function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refSeqId, session, region, }) {
     const apolloSessionModel = session;
+    const { featureTypeOntology } = apolloSessionModel.apolloDataStore.ontologyManager;
     const childIds = React.useMemo(() => Object.keys(annotationFeature.children ?? {}), [annotationFeature]);
-    const features = React.useMemo(() => {
-        for (const [, asm] of apolloSessionModel.apolloDataStore.assemblies) {
-            if (asm._id === assembly.name) {
-                for (const [, refSeq] of asm.refSeqs) {
-                    if (refSeq._id === refSeqId) {
-                        return refSeq.features;
-                    }
-                }
-            }
-        }
-        return [];
-    }, []);
     const [parentFeatureChecked, setParentFeatureChecked] = React.useState(true);
     const [checkedChildrens, setCheckedChildrens] = React.useState(childIds);
     const [errorMessage, setErrorMessage] = React.useState('');
     const [destinationFeatures, setDestinationFeatures] = React.useState([]);
+    const [createNewGene, setCreateNewGene] = React.useState(false);
     const [selectedDestinationFeature, setSelectedDestinationFeature] = React.useState();
-    const getFeatures = (min, max) => {
+    const apolloAssembly = apolloSessionModel.apolloDataStore.assemblies.get(assembly.name);
+    const refSeq = apolloAssembly?.refSeqs.get(refSeqId);
+    const features = refSeq?.getFeatures(region.start, region.end);
+    const getDestinationFeatures = () => {
         const filteredFeatures = [];
-        for (const [, f] of features) {
-            if (f.type === 'chromosome') {
+        for (const f of features ?? []) {
+            if (f.min > region.end || f.max < region.start) {
                 continue;
             }
-            const featureSnapshot = mobxStateTree.getSnapshot(f);
-            if (min >= featureSnapshot.min && max <= featureSnapshot.max) {
+            // Destination feature should be of type gene amd should be on the same strand as the source feature
+            if (featureTypeOntology?.isTypeOf(f.type, 'gene') &&
+                f.strand === annotationFeature.strand) {
+                const featureSnapshot = mobxStateTree.getSnapshot(f);
                 filteredFeatures.push(featureSnapshot);
             }
         }
@@ -9920,27 +11463,10 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     };
     React.useEffect(() => {
         setErrorMessage('');
-        let mins = [];
-        let maxes = [];
-        if (annotationFeature.children) {
-            const checkedAnnotationFeatureChildren = Object.values(annotationFeature.children)
-                .filter((child) => isTranscript(child, apolloSessionModel))
-                .filter((child) => checkedChildrens.includes(child._id));
-            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 features = getDestinationFeatures();
+        setDestinationFeatures(features);
+        setSelectedDestinationFeature(features[0]);
+    }, [checkedChildrens, parentFeatureChecked, region]);
     const handleParentFeatureCheck = (event) => {
         const isChecked = event.target.checked;
         setParentFeatureChecked(isChecked);
@@ -9957,95 +11483,211 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
     };
     const handleCreateApolloAnnotation = async () => {
         if (parentFeatureChecked) {
-            let change;
+            // IF SOURCE FEATURE IS GENE
             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 shared.AddFeatureChange({
-                        changedIds: [annotationFeature._id],
-                        typeName: 'AddFeatureChange',
-                        assembly: assembly.name,
-                        addedFeature: {
-                            ...annotationFeature,
-                            children: childrens,
-                        },
-                    });
-                }
-                else {
-                    change = new shared.AddFeatureChange({
-                        changedIds: [annotationFeature._id],
-                        typeName: 'AddFeatureChange',
-                        assembly: assembly.name,
-                        addedFeature: annotationFeature,
-                    });
-                }
+                await copyGeneFeature();
+                session.notify('Successfully copied selected gene and transcript(s)', 'success');
             }
             if (isTranscript(annotationFeature, apolloSessionModel)) {
-                if (selectedDestinationFeature) {
-                    change = new shared.AddFeatureChange({
-                        parentFeatureId: selectedDestinationFeature._id,
-                        changedIds: [selectedDestinationFeature._id],
-                        typeName: 'AddFeatureChange',
-                        assembly: assembly.name,
-                        addedFeature: annotationFeature,
-                    });
+                // IF THE SOURCE IS TRANSCRIPT AND THE DESTINATION IS SELECTED AND CREATE NEW GENE IS NOT CHECKED
+                if (selectedDestinationFeature && !createNewGene) {
+                    const transcripts = {};
+                    transcripts[annotationFeature._id] = annotationFeature;
+                    // If source trancript doesn't overlap with destination gene
+                    // If not overlapping, then extend the destination gene to include the transcript
+                    if (selectedDestinationFeature.max < annotationFeature.max ||
+                        selectedDestinationFeature.min > annotationFeature.min) {
+                        const newMin = Math.min(selectedDestinationFeature.min, annotationFeature.min);
+                        const newMax = Math.max(selectedDestinationFeature.max, annotationFeature.max);
+                        await extendSelectedDestinationFeatureLocation(newMin, newMax);
+                        await copyTranscriptsToDestinationGene(transcripts);
+                    }
+                    else {
+                        await copyTranscriptsToDestinationGene(transcripts);
+                    }
+                    session.notify('Successfully copied selected transcripts to destination gene', 'success');
                 }
                 else {
-                    setErrorMessage('There is no destination gene for this transcript');
-                    return;
+                    // IF THERE IS NO DESTINATION GENE SELECTED AND CREATE NEW GENE IS CHECKED
+                    const childrens = {};
+                    childrens[annotationFeature._id] = annotationFeature;
+                    await createNewGeneFeatureWithTranscripts(childrens);
+                    session.notify('Successfully created a new gene with selected transcripts', 'success');
                 }
             }
-            if (!change) {
-                return;
-            }
-            await apolloSessionModel.apolloDataStore.changeManager.submit(change);
-            session.notify('Annotation added successfully', 'success');
-            handleClose();
         }
         else {
+            // IF PARENT (GENE) FEATURE IS NOT CHECKED AND WE ARE COPYING CHILDREN (TRANSCRIPTS)
             if (!annotationFeature.children) {
                 return;
             }
-            if (!selectedDestinationFeature) {
-                return;
+            // IF DESTINATION IS SELECTED AND CREATE NEW GENE IS NOT CHECKED
+            if (selectedDestinationFeature && !createNewGene) {
+                const childrens = {};
+                for (const childId of checkedChildrens) {
+                    childrens[childId] = annotationFeature.children[childId];
+                }
+                const min = Math.min(...Object.values(childrens).map((child) => child.min));
+                const max = Math.max(...Object.values(childrens).map((child) => child.max));
+                // If source trancript doesn't overlap with destination gene
+                // If not overlapping, then extend the destination gene to include the transcript
+                if (selectedDestinationFeature.min > min ||
+                    selectedDestinationFeature.max < max) {
+                    const newMin = Math.min(selectedDestinationFeature.min, min);
+                    const newMax = Math.max(selectedDestinationFeature.max, max);
+                    await extendSelectedDestinationFeatureLocation(newMin, newMax);
+                    await copyTranscriptsToDestinationGene(childrens);
+                }
+                else {
+                    await copyTranscriptsToDestinationGene(childrens);
+                }
+                session.notify('Successfully copied transcript to destination gene', 'success');
             }
+            else {
+                // IF THERE IS NO DESTINATION GENE SELECTED AND CREATE NEW GENE IS CHECKED
+                const childrens = {};
+                for (const childId of checkedChildrens) {
+                    childrens[childId] = annotationFeature.children[childId];
+                }
+                await createNewGeneFeatureWithTranscripts(childrens);
+                session.notify('Successfully created a new gene with selected transcript', 'success');
+            }
+        }
+        handleClose();
+    };
+    // Copies gene feature along with its selected children
+    const copyGeneFeature = async () => {
+        let change;
+        if (annotationFeature.children &&
+            checkedChildrens.length !==
+                Object.values(annotationFeature.children).length) {
+            // IF SOME CHILDREN ARE CHECKED
+            const childrens = {};
             for (const childId of checkedChildrens) {
-                const child = annotationFeature.children[childId];
-                const change = new shared.AddFeatureChange({
-                    parentFeatureId: selectedDestinationFeature._id,
-                    changedIds: [selectedDestinationFeature._id],
-                    typeName: 'AddFeatureChange',
-                    assembly: assembly.name,
-                    addedFeature: child,
-                });
-                await apolloSessionModel.apolloDataStore.changeManager.submit(change);
+                childrens[childId] = annotationFeature.children[childId];
             }
-            session.notify('Annotation added successfully', 'success');
-            handleClose();
+            change = new shared.AddFeatureChange({
+                changedIds: [annotationFeature._id],
+                typeName: 'AddFeatureChange',
+                assembly: assembly.name,
+                addedFeature: {
+                    ...annotationFeature,
+                    children: childrens,
+                },
+            });
+        }
+        else {
+            // IF PARENT AND ALL CHILDREN ARE CHECKED
+            change = new shared.AddFeatureChange({
+                changedIds: [annotationFeature._id],
+                typeName: 'AddFeatureChange',
+                assembly: assembly.name,
+                addedFeature: annotationFeature,
+            });
+        }
+        await submitChange(change);
+    };
+    const copyTranscriptsToDestinationGene = async (transcripts) => {
+        if (!selectedDestinationFeature) {
+            return;
+        }
+        for (const transcriptId of Object.keys(transcripts)) {
+            const transcript = transcripts[transcriptId];
+            const change = new shared.AddFeatureChange({
+                parentFeatureId: selectedDestinationFeature._id,
+                changedIds: [selectedDestinationFeature._id],
+                typeName: 'AddFeatureChange',
+                assembly: assembly.name,
+                addedFeature: transcript,
+            });
+            await submitChange(change);
+        }
+    };
+    const createNewGeneFeatureWithTranscripts = async (childrens) => {
+        const newGeneId = new ObjectID__default["default"]().toHexString();
+        const min = Math.min(...Object.values(childrens).map((child) => child.min));
+        const max = Math.max(...Object.values(childrens).map((child) => child.max));
+        const change = new shared.AddFeatureChange({
+            changedIds: [newGeneId],
+            typeName: 'AddFeatureChange',
+            assembly: assembly.name,
+            addedFeature: {
+                _id: newGeneId,
+                refSeq: refSeqId,
+                min,
+                max,
+                strand: annotationFeature.strand,
+                type: 'gene',
+                children: childrens,
+                attributes: {
+                    name: [getGeneNameOrId(annotationFeature)],
+                    gene_name: [getGeneNameOrId(annotationFeature)],
+                },
+            },
+        });
+        await submitChange(change);
+    };
+    const extendSelectedDestinationFeatureLocation = async (newMin, newMax) => {
+        if (!selectedDestinationFeature) {
+            return;
+        }
+        const changes = [];
+        if (newMin !== selectedDestinationFeature.min) {
+            changes.push(new shared.LocationStartChange({
+                typeName: 'LocationStartChange',
+                changedIds: [selectedDestinationFeature._id],
+                featureId: selectedDestinationFeature._id,
+                assembly: assembly.name,
+                oldStart: selectedDestinationFeature.min,
+                newStart: newMin,
+            }));
+        }
+        if (newMax !== selectedDestinationFeature.max) {
+            changes.push(new shared.LocationEndChange({
+                typeName: 'LocationEndChange',
+                changedIds: [selectedDestinationFeature._id],
+                featureId: selectedDestinationFeature._id,
+                assembly: assembly.name,
+                oldEnd: selectedDestinationFeature.max,
+                newEnd: newMax,
+            }));
+        }
+        for (const change of changes) {
+            await submitChange(change);
         }
     };
+    const submitChange = async (change) => {
+        await apolloSessionModel.apolloDataStore.changeManager.submit(change);
+    };
+    const handleCreateNewGeneChange = (e) => {
+        setCreateNewGene(e.target.checked);
+    };
     return (React__default["default"].createElement(Dialog, { open: true, title: "Create Apollo Annotation", handleClose: handleClose, fullWidth: true, maxWidth: "sm" },
         React__default["default"].createElement(material.DialogTitle, { fontSize: 15 }, "Select the feature to be copied to apollo track"),
         React__default["default"].createElement(material.DialogContent, null,
             React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
-                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${getFeatureNameOrId(annotationFeature, apolloSessionModel)} (${annotationFeature.min + 1}..${annotationFeature.max})` })),
+                isGeneOrTranscript(annotationFeature, apolloSessionModel) && (React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { size: "small", checked: parentFeatureChecked, onChange: handleParentFeatureCheck }), label: `${getFeatureNameOrId(annotationFeature)} (${annotationFeature.min + 1}..${annotationFeature.max})` })),
                 annotationFeature.children && (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexDirection: 'column', ml: 3 } }, Object.values(annotationFeature.children)
                     .filter((child) => isTranscript(child, apolloSessionModel))
                     .map((child) => (React__default["default"].createElement(material.FormControlLabel, { key: child._id, control: React__default["default"].createElement(material.Checkbox, { size: "small", checked: checkedChildrens.includes(child._id), onChange: (e) => {
                             handleChildFeatureCheck(e, child);
-                        } }), label: `${getFeatureNameOrId(child, apolloSessionModel)} (${child.min + 1}..${child.max})` })))))),
+                        } }), label: `${getFeatureNameOrId(child)} (${child.min + 1}..${child.max})` })))))),
             destinationFeatures.length > 0 &&
                 ((!parentFeatureChecked && checkedChildrens.length > 0) ||
                     (parentFeatureChecked &&
-                        isTranscript(annotationFeature, apolloSessionModel))) && (React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
-                React__default["default"].createElement(material.Typography, { variant: "caption", fontSize: 12 }, "Select the destination feature to copy the selected features"),
-                React__default["default"].createElement(material.Box, { sx: { mt: 1 } },
-                    React__default["default"].createElement(material.Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange }, destinationFeatures.map((f) => (React__default["default"].createElement(material.MenuItem, { key: f._id, value: f._id }, `${getFeatureNameOrId(f, apolloSessionModel)} (${f.min}..${f.max})`)))))))),
+                        isTranscript(annotationFeature, apolloSessionModel))) && (React__default["default"].createElement("div", { style: {
+                    border: '1px solid #ccc',
+                    marginTop: 20,
+                    padding: 10,
+                    borderRadius: 5,
+                } },
+                React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
+                    React__default["default"].createElement(material.Typography, { variant: "caption", fontSize: 12 }, "Select the destination feature to copy the selected features"),
+                    React__default["default"].createElement(material.Box, { sx: { mt: 1 } },
+                        React__default["default"].createElement(material.Select, { labelId: "label", style: { width: '100%' }, value: selectedDestinationFeature?._id ?? '', onChange: handleDestinationFeatureChange, disabled: createNewGene }, destinationFeatures.map((f) => (React__default["default"].createElement(material.MenuItem, { key: f._id, value: f._id }, `${getFeatureNameOrId(f)} (${f.min + 1}..${f.max})`)))))),
+                React__default["default"].createElement(material.Box, { sx: { ml: 3 } },
+                    React__default["default"].createElement(material.FormGroup, null,
+                        React__default["default"].createElement(material.FormControlLabel, { control: React__default["default"].createElement(material.Checkbox, { checked: createNewGene, onChange: handleCreateNewGeneChange }), label: "Create new gene" })))))),
         React__default["default"].createElement(material.DialogActions, null,
             React__default["default"].createElement(material.Button, { variant: "contained", type: "submit", disabled: checkedChildrens.length === 0 ||
                     (!parentFeatureChecked &&
@@ -10056,6 +11698,189 @@ function CreateApolloAnnotation({ annotationFeature, assembly, handleClose, refS
             React__default["default"].createElement(material.DialogContentText, { color: "error" }, errorMessage))) : null));
 }
 
+function parseCigar(cigar) {
+    const regex = /(\d+)([MIDNSHPX=])/g;
+    const result = [];
+    let match;
+    while ((match = regex.exec(cigar)) !== null) {
+        result.push([match[2], Number.parseInt(match[1], 10)]);
+    }
+    return result;
+}
+function annotationFromPileup(pluggableElement) {
+    if (pluggableElement.name !== 'LinearPileupDisplay') {
+        return pluggableElement;
+    }
+    const { stateModel } = pluggableElement;
+    const newStateModel = stateModel
+        .views((self) => ({
+        getFirstRegion() {
+            const lgv = util.getContainingView(self);
+            return lgv.dynamicBlocks.contentBlocks[0];
+        },
+        getAssembly() {
+            const firstRegion = self.getFirstRegion();
+            const session = util.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() {
+            const feature = self.contextMenuFeature;
+            const assembly = self.getAssembly();
+            const refSeqId = self.getRefSeqId(assembly);
+            const start = feature.get('start');
+            const end = feature.get('end');
+            const strand = feature.get('strand');
+            const name = feature.get('name');
+            const cigarData = feature.get('CIGAR');
+            const ops = parseCigar(cigarData);
+            let position = start;
+            let currentExonStart;
+            const exons = [];
+            // Example: [[96,S], [4,M], [4216,N], [357,M], [1,I], [628,M], [94,S]]
+            // Results in 2 exons
+            // M, = and X are matches -> exon
+            // N is a gap in the reference sequence -> intron
+            // I, S, H and P -> not counted in reference position
+            for (const [op, len] of ops) {
+                switch (op) {
+                    case 'M':
+                    case '=':
+                    case 'X': {
+                        if (currentExonStart === undefined) {
+                            currentExonStart = position;
+                        }
+                        position += len;
+                        break;
+                    }
+                    case 'N': {
+                        if (currentExonStart !== undefined) {
+                            exons.push({
+                                start: currentExonStart,
+                                end: position,
+                            });
+                            currentExonStart = undefined;
+                        }
+                        position += len;
+                        break;
+                    }
+                    case 'D': {
+                        position += len;
+                        break;
+                    }
+                    case 'I':
+                    case 'S':
+                    case 'H':
+                    case 'P': {
+                        // These operations do not affect the position in the reference sequence
+                        break;
+                    }
+                    default: {
+                        throw new Error(`Unknown CIGAR operation: ${op}`);
+                    }
+                }
+            }
+            // If still in exon at end
+            if (currentExonStart !== undefined) {
+                exons.push({
+                    start: currentExonStart,
+                    end: position,
+                });
+            }
+            const newFeature = {
+                _id: ObjectID__default["default"]().toHexString(),
+                refSeq: refSeqId,
+                min: start,
+                max: end,
+                type: 'mRNA',
+                strand,
+                attributes: {
+                    name: [name],
+                },
+            };
+            if (exons.length === 0) {
+                return newFeature;
+            }
+            const children = {};
+            newFeature.children = children;
+            for (const exon of exons) {
+                const newExon = {
+                    _id: ObjectID__default["default"]().toHexString(),
+                    refSeq: refSeqId,
+                    min: exon.start,
+                    max: exon.end,
+                    type: 'exon',
+                    strand,
+                };
+                newFeature.children[newExon._id] = newExon;
+            }
+            return newFeature;
+        },
+    }))
+        .views((self) => {
+        const superContextMenuItems = self.contextMenuItems;
+        return {
+            contextMenuItems() {
+                const session = util.getSession(self);
+                const assembly = self.getAssembly();
+                const region = self.getFirstRegion();
+                const feature = self.contextMenuFeature;
+                if (!feature) {
+                    return superContextMenuItems();
+                }
+                return [
+                    ...superContextMenuItems(),
+                    {
+                        label: 'Create Apollo annotation',
+                        icon: AddIcon__default["default"],
+                        onClick: () => {
+                            session.queueDialog((doneCallback) => [
+                                CreateApolloAnnotation,
+                                {
+                                    session,
+                                    handleClose: () => {
+                                        doneCallback();
+                                    },
+                                    annotationFeature: self.getAnnotationFeature(assembly),
+                                    assembly,
+                                    refSeqId: self.getRefSeqId(assembly),
+                                    region,
+                                },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    });
+    pluggableElement.stateModel = newStateModel;
+    return pluggableElement;
+}
+
 function simpleFeatureToGFF3Feature(feature, refSeqId) {
     // eslint-disable-next-line unicorn/prefer-structured-clone
     const xfeature = JSON.parse(JSON.stringify(feature));
@@ -10159,6 +11984,7 @@ function annotationFromJBrowseFeature(pluggableElement) {
             contextMenuItems() {
                 const session = util.getSession(self);
                 const assembly = self.getAssembly();
+                const region = self.getFirstRegion();
                 const feature = self.contextMenuFeature;
                 if (!feature) {
                     return superContextMenuItems();
@@ -10179,6 +12005,7 @@ function annotationFromJBrowseFeature(pluggableElement) {
                                     annotationFeature: self.getAnnotationFeature(assembly),
                                     assembly,
                                     refSeqId: self.getRefSeqId(assembly),
+                                    region,
                                 },
                             ]);
                         },
@@ -10259,7 +12086,7 @@ const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(prop
                 else {
                     const coord = [event.clientX, event.clientY];
                     setContextCoord(coord);
-                    setContextMenuItems(getContextMenuItems(coord));
+                    setContextMenuItems(getContextMenuItems(event));
                 }
             } },
             loading ? (React__default["default"].createElement("div", { className: classes.loading },
@@ -10331,23 +12158,17 @@ const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(prop
                         : undefined, style: { zIndex: theme.zIndex.tooltip }, menuItems: contextMenuItems }))))));
 });
 
-const TrackLines = mobxReact.observer(function TrackLines({ model, strand, }) {
-    const { apolloRowHeight, highestRow, lastRowTooltipBufferHeight } = model;
-    return strand == 1 ? (React__default["default"].createElement("div", { style: {
+const TrackLines = mobxReact.observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx = 0, }) {
+    const { apolloRowHeight, highestRow, showFeatureLabels } = model;
+    const featureLabelSpacer = showFeatureLabels ? 2 : 1;
+    return (React__default["default"].createElement("div", { style: {
             position: 'absolute',
             left: 0,
-            top: (apolloRowHeight * (highestRow + 1)) / 2 - 2,
+            top: (apolloRowHeight * featureLabelSpacer * (highestRow + 1)) / 2 +
+                idx * featureLabelSpacer * apolloRowHeight,
             width: '100%',
         } },
-        React__default["default"].createElement("hr", { style: { margin: 0, top: 0, color: 'black' } }))) : (React__default["default"].createElement("div", { style: {
-            position: 'absolute',
-            left: 0,
-            bottom: (apolloRowHeight * (highestRow + 1) + lastRowTooltipBufferHeight) /
-                2 +
-                3,
-            width: '100%',
-        } },
-        React__default["default"].createElement("hr", { style: { margin: 0, top: 0, color: 'black' } })));
+        React__default["default"].createElement("hr", { style: hrStyle })));
 });
 
 /* eslint-disable @typescript-eslint/unbound-method */
@@ -10407,8 +12228,9 @@ const LinearApolloSixFrameDisplay = mobxReact.observer(function LinearApolloSixF
         // Promise.resolve() in these 3 callbacks is to avoid infinite rendering loop
         // https://github.com/mobxjs/mobx/issues/3728#issuecomment-1715400931
         React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(TrackLines, { model: model, strand: 1 }),
-            React__default["default"].createElement(TrackLines, { model: model, strand: -1 }),
+            React__default["default"].createElement(TrackLines, { model: model, idx: 0 }),
+            React__default["default"].createElement(TrackLines, { model: model, hrStyle: { margin: 0, top: 0, color: 'grey', opacity: 0.4 }, idx: 1 }),
+            React__default["default"].createElement(TrackLines, { model: model, idx: 2 }),
             React__default["default"].createElement("canvas", { ref: async (node) => {
                     await Promise.resolve();
                     setCollaboratorCanvas(node);
@@ -10756,7 +12578,7 @@ class ChangeManager {
                 jobsManager.abortJob(job.name, String(error));
             }
             console.error(error);
-            session.notify(String(error), 'error');
+            session.notify(`Error encountered in client: ${String(error)}. Data may be out of sync, please refresh the page`, 'error');
             return;
         }
         // post-validate
@@ -10799,10 +12621,10 @@ class ChangeManager {
             if (change.notification) {
                 session.notify(change.notification, 'success');
             }
-        }
-        if (addToRecents) {
-            // Push the change into array
-            this.recentChanges.push(change);
+            if (addToRecents) {
+                // Push the change into array
+                this.recentChanges.push(change);
+            }
         }
         if (updateJobsManager) {
             jobsManager.done(job);
@@ -10810,7 +12632,8 @@ class ChangeManager {
     }
     async revert(change, submitToBackend = true) {
         const inverseChange = change.getInverse();
-        return this.submit(inverseChange, { submitToBackend, addToRecents: false });
+        const opts = { submitToBackend, addToRecents: false };
+        return this.submit(inverseChange, opts);
     }
     /**
      * Undo the last change
@@ -11636,15 +13459,6 @@ function extendSession(pluginManager, sessionModel) {
     }))
         .actions((self) => ({
         afterCreate: mobxStateTree.flow(function* afterCreate() {
-            // When the initial config.json loads, it doesn't include the Apollo
-            // tracks, which would result in a potentially invalid session snapshot
-            // if any tracks are open. Here we copy the session snapshot, apply an
-            // empty session snapshot, and then restore the original session
-            // snapshot after the updated config.json loads.
-            const sessionSnapshot = mobxStateTree.getSnapshot(self);
-            const { id, name } = sessionSnapshot;
-            mobxStateTree.applySnapshot(self, { name, id });
-            const { internetAccounts, jbrowse } = mobxStateTree.getRoot(self);
             mobx.autorun(() => {
                 // broadcastLocations() // **** This is not working and therefore we need to duplicate broadcastLocations() -method code here because autorun() does not observe changes otherwise
                 const locations = [];
@@ -11693,7 +13507,23 @@ function extendSession(pluginManager, sessionModel) {
                     }
                 }
             }, { name: 'ApolloSession' });
-            // END AUTORUN
+            // When the initial config.json loads, it doesn't include the Apollo
+            // tracks, which would result in a potentially invalid session snapshot
+            // if any tracks are open. Here we copy the session snapshot, apply an
+            // empty session snapshot, and then restore the original session
+            // snapshot after the updated config.json loads.
+            // @ts-expect-error type is missing on ApolloRootModel
+            const { internetAccounts, jbrowse, reloadPluginManagerCallback } = mobxStateTree.getRoot(self);
+            const pluginConfiguration = 
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            jbrowse.configuration.ApolloPlugin;
+            const hasRole = configuration.readConfObject(pluginConfiguration, 'hasRole');
+            if (hasRole) {
+                return;
+            }
+            const sessionSnapshot = mobxStateTree.getSnapshot(self);
+            const { id, name } = sessionSnapshot;
+            mobxStateTree.applySnapshot(self, { name, id });
             // fetch and initialize assemblies for each of our Apollo internet accounts
             for (const internetAccount of internetAccounts) {
                 if (internetAccount.type !== 'ApolloInternetAccount') {
@@ -11726,9 +13556,8 @@ function extendSession(pluginManager, sessionModel) {
                     console.error(error);
                     continue;
                 }
-                mobxStateTree.applySnapshot(jbrowse, jbrowseConfig);
-                // @ts-expect-error snapshot seems to get wrong type?
-                mobxStateTree.applySnapshot(self, sessionSnapshot);
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                reloadPluginManagerCallback(jbrowseConfig, sessionSnapshot);
             }
         }),
         beforeDestroy() {