@apollo-annotation/jbrowse-plugin-apollo 0.3.9 → 0.3.10

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import { checkRegistry, isAssemblySpecificChange, Change, isFeatureChange, changeRegistry } from '@apollo-annotation/common';
-import { gff3ToAnnotationFeature, AddAssemblyFromExternalChange, AddAssemblyAndFeaturesFromFileChange, AddAssemblyFromFileChange, AddAssemblyAliasesChange, AddFeatureChange, validationRegistry, ValidationResultSet, annotationFeatureToGFF3, splitStringIntoChunks, DeleteAssemblyChange, DeleteFeatureChange, LocationStartChange, LocationEndChange, AddFeaturesFromFileChange, UserChange, DeleteUserChange, MergeExonsChange, MergeTranscriptsChange, AddRefSeqAliasesChange, SplitExonChange, getDecodedToken, makeUserSessionId, isGFFInternalAttribute, isGFFColumnInternal, internalToGFF, gffInternalToColumn, gffToInternal, gffColumnToInternal, FeatureAttributeChange, TypeChange, StrandChange, filterJBrowseConfig, ImportJBrowseConfigChange, changes, CDSCheck, TranscriptCheck, CoreValidation, ParentChildValidation } from '@apollo-annotation/shared';
+import { gff3ToAnnotationFeature, AddAssemblyFromExternalChange, AddAssemblyAndFeaturesFromFileChange, AddAssemblyFromFileChange, AddAssemblyAliasesChange, AddFeatureChange, validationRegistry, makeUserSessionId, ValidationResultSet, annotationFeatureToGFF3, splitStringIntoChunks, DeleteAssemblyChange, DeleteFeatureChange, LocationStartChange, LocationEndChange, AddFeaturesFromFileChange, UserChange, DeleteUserChange, MergeExonsChange, MergeTranscriptsChange, AddRefSeqAliasesChange, SplitExonChange, getDecodedToken, isGFFInternalAttribute, isGFFColumnInternal, internalToGFF, gffInternalToColumn, gffToInternal, gffColumnToInternal, FeatureAttributeChange, TypeChange, StrandChange, filterJBrowseConfig, ImportJBrowseConfigChange, changes, CDSCheck, TranscriptCheck, CoreValidation, ParentChildValidation } from '@apollo-annotation/shared';
 import Plugin from '@jbrowse/core/Plugin';
 import { ConfigurationSchema, readConfObject, getConf, ConfigurationReference } from '@jbrowse/core/configuration';
 import { BaseInternetAccountConfig, InternetAccount, TextSearchAdapterType, BaseDisplay, WidgetType, createBaseTrackConfig, TrackType, createBaseTrackModel, InternetAccountType, DisplayType } from '@jbrowse/core/pluggableElementTypes';
-import { getContainingView, isUriLocation, isLocalPathLocation, getSession, isElectron, isAbstractMenuManager, getEnv, revcom, defaultCodonTable, isSessionModelWithWidgets, getFrame, intersection2, doesIntersect2, measureText } from '@jbrowse/core/util';
+import { isSessionModelWithWidgets, getContainingView, isUriLocation, isLocalPathLocation, getSession, isElectron, isAbstractMenuManager, getEnv, revcom, defaultCodonTable, getFrame, intersection2, doesIntersect2, measureText } from '@jbrowse/core/util';
 import AddIcon from '@mui/icons-material/Add';
 import { DialogTitle, IconButton, DialogContent, LinearProgress, TextField, Accordion, AccordionSummary, Typography, AccordionDetails, FormGroup, FormControlLabel, Checkbox, Box, Tooltip, Table, TableBody, TableRow, TableCell, InputAdornment, DialogActions, Button, DialogContentText, Autocomplete, FormControl, InputLabel, Select, MenuItem, RadioGroup, Radio, TableContainer, Paper, TableHead, useTheme, FormHelperText, Grid, SvgIcon, Divider, Chip, List, ListItem, ListItemText, Menu, ListItemIcon, alpha, createTheme, Alert, Badge, Avatar, CircularProgress } from '@mui/material';
 import { autorun, entries, observable } from 'mobx';
@@ -69,7 +69,7 @@ import TrackChangesIcon from '@mui/icons-material/TrackChanges';
 import UndoIcon from '@mui/icons-material/Undo';
 import SaveIcon from '@mui/icons-material/Save';
 
-var version = "0.3.9";
+var version = "0.3.10";
 
 const ApolloConfigSchema = ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -504,6 +504,19 @@ function getContextMenuItemsForFeature$2(display, sourceFeature) {
             ]);
         },
     });
+    if (isSessionModelWithWidgets(session)) {
+        menuItems.push({
+            label: 'Open feature details',
+            onClick: () => {
+                const apolloGeneWidget = session.addWidget('ApolloFeatureDetailsWidget', 'apolloFeatureDetailsWidget', {
+                    feature: sourceFeature,
+                    assembly: currentAssemblyId,
+                    refName: region.refName,
+                });
+                session.showWidget(apolloGeneWidget);
+            },
+        });
+    }
     return menuItems;
 }
 function navToFeatureCenter(feature, paddingPct, refSeqLength) {
@@ -752,7 +765,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
                 statusMessage: 'Pre-validating',
                 progressPct: 0,
                 cancelCallback: () => {
-                    controller.abort();
+                    controller.abort('AddAssembly');
                     jobsManager.abortJob(job.name);
                 },
             };
@@ -2150,7 +2163,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             });
         }
         return () => {
-            controller.abort();
+            controller.abort('OntologyTermAutocomplete matcher');
         };
     }, [session, valueString, filterTerms, ontologyStore, needToLoadCurrentTerm]);
     // effect for loading term autocompletions
@@ -2169,7 +2182,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             });
         }
         return () => {
-            controller.abort();
+            controller.abort('OntologyTermAutocomplete loader');
         };
     }, [
         needToLoadTermChoices,
@@ -2321,17 +2334,24 @@ class ChangeManager {
         // pre-validate
         const session = getSession(this.dataStore);
         const controller = new AbortController();
-        const { jobsManager, isLocked } = getSession(this.dataStore);
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const { jobsManager, isLocked, changeInProgress, setChangeInProgress } = getSession(this.dataStore);
         if (isLocked) {
             session.notify('Cannot submit changes in locked mode');
+            setChangeInProgress(false);
             return;
         }
+        if (changeInProgress) {
+            session.notify('Could not submit change, there is another change still in progress');
+            return;
+        }
+        setChangeInProgress(true);
         const job = {
             name: change.typeName,
             statusMessage: 'Pre-validating',
             progressPct: 0,
             cancelCallback: () => {
-                controller.abort();
+                controller.abort('ChangeManager');
             },
         };
         if (updateJobsManager) {
@@ -2344,6 +2364,7 @@ class ChangeManager {
                 jobsManager.abortJob(job.name, msg);
             }
             session.notify(msg, 'error');
+            setChangeInProgress(false);
             return;
         }
         try {
@@ -2356,6 +2377,7 @@ class ChangeManager {
             }
             console.error(error);
             session.notify(`Error encountered in client: ${String(error)}. Data may be out of sync, please refresh the page`, 'error');
+            setChangeInProgress(false);
             return;
         }
         // post-validate
@@ -2386,6 +2408,7 @@ class ChangeManager {
                 console.error(error);
                 session.notify(String(error), 'error');
                 await this.undo(change, false);
+                setChangeInProgress(false);
                 return;
             }
             if (!backendResult.ok) {
@@ -2395,6 +2418,7 @@ class ChangeManager {
                 }
                 session.notify(msg, 'error');
                 await this.undo(change, false);
+                setChangeInProgress(false);
                 return;
             }
             if (change.notification) {
@@ -2408,6 +2432,7 @@ class ChangeManager {
         if (updateJobsManager) {
             jobsManager.done(job);
         }
+        setChangeInProgress(false);
     }
     async undo(change, submitToBackend = true) {
         const inverseChange = change.getInverse();
@@ -2513,17 +2538,22 @@ class CollaborationServerDriver extends BackendDriver {
     checkSocket(assembly, refSeq, internetAccount) {
         const { socket } = internetAccount;
         const token = internetAccount.retrieveToken();
+        if (!token) {
+            return;
+        }
+        const localSessionId = makeUserSessionId(token);
         const channel = `${assembly}-${refSeq}`;
         const changeManager = new ChangeManager(this.clientStore);
         if (!socket.hasListeners(channel)) {
             socket.on(channel, async (message) => {
                 // Save server last change sequence into session storage
                 internetAccount.setLastChangeSequenceNumber(Number(message.changeSequence));
-                if (message.userSessionId !== token && message.channel === channel) {
-                    const change = Change.fromJSON(message.changeInfo);
-                    if (isFeatureChange(change) && this.haveDataForChange(change)) {
-                        await changeManager.submit(change, { submitToBackend: false });
-                    }
+                if (message.userSessionId === localSessionId) {
+                    return; // we did this change, no need to apply it again
+                }
+                const change = Change.fromJSON(message.changeInfo);
+                if (isFeatureChange(change) && this.haveDataForChange(change)) {
+                    await changeManager.submit(change, { submitToBackend: false });
                 }
             });
         }
@@ -3936,7 +3966,7 @@ function ImportFeatures({ changeManager, handleClose, session, }) {
             statusMessage: 'Uploading file, this may take awhile',
             progressPct: 0,
             cancelCallback: () => {
-                controller.abort();
+                controller.abort('ImportFeatures');
                 jobsManager.abortJob(job.name);
             },
         };
@@ -5166,7 +5196,7 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
             }
         });
         return () => {
-            controller.abort();
+            controller.abort('AuthTypeSelector');
         };
     }, [baseURL]);
     function handleClick(authType) {
@@ -5603,8 +5633,13 @@ const stateModelFactory$3 = (configSchema) => {
                     return;
                 }
                 if (self.role) {
-                    await self.initialize(self.role);
-                    reaction.dispose();
+                    try {
+                        await self.initialize(self.role);
+                        reaction.dispose();
+                    }
+                    catch {
+                        // if initialize fails, do nothing so the autorun runs again
+                    }
                 }
             }, { name: 'ApolloInternetAccount' });
         },
@@ -6879,6 +6914,7 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
     const refData = currentAssembly?.getByRefName(refName);
     const { changeManager } = session.apolloDataStore;
     const seqRef = useRef(null);
+    const { changeInProgress } = session;
     if (!refData) {
         return null;
     }
@@ -7326,10 +7362,13 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
             // highlight start codon and stop codons
             if (codonSeq === 'ATG') {
                 elements.push(React.createElement(Typography, { component: 'span', style: {
-                        backgroundColor: 'yellow',
+                        backgroundColor: changeInProgress ? 'lightgray' : 'yellow',
                         cursor: 'pointer',
                         border: '1px solid black',
                     }, key: codonGenomicPos, onClick: () => {
+                        if (changeInProgress) {
+                            return;
+                        }
                         // NOTE: codonGenomicPos is important here for calculating the genomic location
                         // of the start codon. We are using the codonGenomicPos as the key in the typography
                         // elements to maintain the genomic postion of the codon start
@@ -7413,20 +7452,21 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
         }
         // Trim any sequence before first start codon and after stop codon
         const startCodonIndex = translationSequence.indexOf('M');
-        const stopCodonIndex = translationSequence.indexOf('*') + 1;
+        const stopCodonIndex = translationSequence.indexOf('*');
         const startCodonPos = translSeqCodonStartGenomicPosArr[startCodonIndex].codonGenomicPos;
         const stopCodonPos = translSeqCodonStartGenomicPosArr[stopCodonIndex].codonGenomicPos;
         if (!startCodonPos || !stopCodonPos) {
             return;
         }
         const startCodonGenomicLoc = getCodonGenomicLocation(startCodonPos);
-        const stopCodonGenomicLoc = getCodonGenomicLocation(stopCodonPos);
+        let stopCodonGenomicLoc = getCodonGenomicLocation(stopCodonPos);
         if (strand === 1) {
             if (startCodonGenomicLoc > stopCodonGenomicLoc) {
                 notify('Start codon genomic location should be less than stop codon genomic location', 'error');
                 return;
             }
             let promise;
+            stopCodonGenomicLoc += 3; // move to end of stop codon
             if (startCodonGenomicLoc !== cdsMin) {
                 promise = new Promise((resolve) => {
                     updateCDSLocation(cdsMin, startCodonGenomicLoc, feature, true, () => {
@@ -7452,6 +7492,7 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
                 return;
             }
             let promise;
+            stopCodonGenomicLoc -= 3; // move to end of stop codon
             if (startCodonGenomicLoc !== cdsMax) {
                 promise = new Promise((resolve) => {
                     updateCDSLocation(cdsMax, startCodonGenomicLoc, feature, false, () => {
@@ -7495,27 +7536,29 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
                             gap: 10,
                         } },
                         React.createElement(Tooltip, { title: "Copy" },
-                            React.createElement(ContentCopyIcon, { style: { fontSize: 15, cursor: 'pointer' }, onClick: onCopyClick })),
+                            React.createElement("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
+                                React.createElement(ContentCopyIcon, { style: { fontSize: 15 } }))),
                         React.createElement(Tooltip, { title: "Trim" },
-                            React.createElement(ContentCutIcon, { style: { fontSize: 15, cursor: 'pointer' }, onClick: trimTranslationSequence }))))),
+                            React.createElement("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
+                                React.createElement(ContentCutIcon, { style: { fontSize: 15 } })))))),
             React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 } },
                 React.createElement(Grid, { size: 1 }),
                 strand === 1 ? (React.createElement(Grid, { size: 4 },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))) : (React.createElement(Grid, { size: 4 },
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))) : (React.createElement(Grid, { size: 4 },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMax, newLocation, feature, false);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))),
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))),
                 React.createElement(Grid, { size: 2 },
                     React.createElement(Typography, { component: 'span' }, "CDS")),
                 strand === 1 ? (React.createElement(Grid, { size: 4 },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMax, newLocation, feature, false);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))) : (React.createElement(Grid, { size: 4 },
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))) : (React.createElement(Grid, { size: 4 },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))),
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))),
                 React.createElement(Grid, { size: 1 })))),
         React.createElement("div", { style: { marginTop: 5 } }, transcriptExonParts.map((loc, index) => {
             return (React.createElement("div", { key: index }, loc.type === 'exon' && (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' } },
@@ -7524,19 +7567,19 @@ const TranscriptWidgetEditLocation = observer(function TranscriptWidgetEditLocat
                 strand === 1 ? (React.createElement(Grid, { size: 4, style: { padding: 0 } },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        } }))) : (React.createElement(Grid, { size: 4, style: { padding: 0 } },
+                        }, disabled: changeInProgress }))) : (React.createElement(Grid, { size: 4, style: { padding: 0 } },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        } }))),
+                        }, disabled: changeInProgress }))),
                 React.createElement(Grid, { size: 2 },
                     React.createElement(Strand, { strand: feature.strand })),
                 strand === 1 ? (React.createElement(Grid, { size: 4, style: { padding: 0 } },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        } }))) : (React.createElement(Grid, { size: 4, style: { padding: 0 } },
+                        }, disabled: changeInProgress }))) : (React.createElement(Grid, { size: 4, style: { padding: 0 } },
                     React.createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        } }))),
+                        }, disabled: changeInProgress }))),
                 React.createElement(Grid, { size: 1 }, index !== transcriptExonParts.length - 1 &&
                     getThreePrimeSpliceSite(loc, index).map((site, idx) => (React.createElement(Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite))))))));
         }))));
@@ -9205,8 +9248,8 @@ function getContextMenuItems$2(display, mousePosition) {
                     },
                 });
                 if (isSessionModelWithWidgets(session)) {
-                    contextMenuItemsForFeature.push({
-                        label: 'Open transcript details',
+                    contextMenuItemsForFeature.splice(1, 0, {
+                        label: 'Open transcript editor',
                         onClick: () => {
                             const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
                                 feature,
@@ -9554,6 +9597,25 @@ function clusterResultByMessage(items, width, touchesAsOverlap) {
     clusters.sort((a, b) => a.message.localeCompare(b.message) || a.start - b.start);
     return clusters;
 }
+function codonColorCode(letter, theme, highContrast) {
+    if (letter === 'M') {
+        return theme.palette.startCodon;
+    }
+    if (letter === '*') {
+        return highContrast ? theme.palette.text.primary : theme.palette.stopCodon;
+    }
+    return;
+}
+function colorCode(letter, theme) {
+    const letterUpper = letter.toUpperCase();
+    if (letterUpper === 'A' ||
+        letterUpper === 'C' ||
+        letterUpper === 'G' ||
+        letterUpper === 'T') {
+        return theme.palette.bases[letterUpper].main.toString();
+    }
+    return 'lightgray';
+}
 
 const minDisplayHeight$2 = 20;
 function baseModelFactory$2(_pluginManager, configSchema) {
@@ -10379,34 +10441,26 @@ function stateModelFactory$2(pluginManager, configSchema) {
 
 const configSchema$1 = ConfigurationSchema('LinearApolloReferenceSequenceDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
 
-function getSeqRow(strand, bpPerPx) {
+function getSeqRow(strand, bpPerPx, reversed) {
     if (bpPerPx > 1 || strand === undefined) {
         return;
     }
+    if (reversed) {
+        return strand === 1 ? 4 : 3;
+    }
     return strand === 1 ? 3 : 4;
 }
-function getTranslationRow(frame, bpPerPx) {
-    const offset = bpPerPx <= 1 ? 2 : 0;
-    switch (frame) {
-        case 3: {
-            return 0;
-        }
-        case 2: {
-            return 1;
-        }
-        case 1: {
-            return 2;
-        }
-        case -1: {
-            return 3 + offset;
-        }
-        case -2: {
-            return 4 + offset;
-        }
-        case -3: {
-            return 5 + offset;
-        }
+function getTranslationRow(frame, bpPerPx, reversed) {
+    const frameRows = bpPerPx <= 1 ? [2, 1, 0, 7, 6, 5] : [2, 1, 0, 5, 4, 3];
+    if (reversed) {
+        frameRows.reverse();
     }
+    frameRows.unshift(0);
+    const row = frameRows.at(frame);
+    if (row === undefined) {
+        throw new Error('could not find row');
+    }
+    return row;
 }
 function getLeftPx$1(feature, bpPerPx, offsetPx, block) {
     const blockLeftPx = block.offsetPx - offsetPx;
@@ -10428,7 +10482,7 @@ function fillAndStrokeRect(ctx, left, top, width, height, theme, selected = fals
     ctx.strokeRect(left, top, width, height);
 }
 function drawHighlight(ctx, feature, bpPerPx, offsetPx, rowHeight, block, theme, selected = false) {
-    const row = getSeqRow(feature.strand, bpPerPx);
+    const row = getSeqRow(feature.strand, bpPerPx, block.reversed);
     if (!row) {
         return;
     }
@@ -10452,7 +10506,7 @@ function drawCDSHighlight(ctx, feature, bpPerPx, offsetPx, rowHeight, block, the
     }
     for (const loc of cdsLocs) {
         const frame = getFrame(loc.min, loc.max, feature.strand ?? 1, loc.phase);
-        const row = getTranslationRow(frame, bpPerPx);
+        const row = getTranslationRow(frame, bpPerPx, block.reversed);
         const left = getLeftPx$1(loc, bpPerPx, offsetPx, block);
         const top = row * rowHeight;
         const width = (loc.max - loc.min) / bpPerPx;
@@ -10475,76 +10529,71 @@ function drawSequenceOverlay(canvas, ctx, hoveredFeature, selectedFeature, rowHe
             hoveredFeature?.feature,
         ].filter((f) => f !== undefined)) {
             if (featureTypeOntology.isTypeOf(feature.type, 'CDS')) {
-                drawCDSHighlight(ctx, feature, bpPerPx, offsetPx, rowHeight, block, theme, true);
+                drawCDSHighlight(ctx, feature, bpPerPx, offsetPx, rowHeight, block, theme, feature._id === selectedFeature?._id);
             }
             else {
-                drawHighlight(ctx, feature, bpPerPx, offsetPx, rowHeight, block, theme, true);
+                drawHighlight(ctx, feature, bpPerPx, offsetPx, rowHeight, block, theme, feature._id === selectedFeature?._id);
             }
         }
         ctx.restore();
     }
 }
 
-function colorCode(letter, theme) {
-    const letterUpper = letter.toUpperCase();
-    if (letterUpper === 'A' ||
-        letterUpper === 'C' ||
-        letterUpper === 'G' ||
-        letterUpper === 'T') {
-        return theme.palette.bases[letterUpper].main.toString();
-    }
-    return 'lightgray';
+function getLeftPx(display, feature, block) {
+    const { lgv } = display;
+    const { bpPerPx, offsetPx } = lgv;
+    const blockLeftPx = block.offsetPx - offsetPx;
+    const featureLeftBpDistanceFromBlockLeftBp = block.reversed
+        ? block.end - feature.max
+        : feature.min - block.start;
+    const featureLeftPxDistanceFromBlockLeftPx = featureLeftBpDistanceFromBlockLeftBp / bpPerPx;
+    return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx;
 }
-function codonColorCode(letter, theme, highContrast) {
-    if (letter === 'M') {
-        return theme.palette.startCodon;
-    }
-    if (letter === '*') {
-        return highContrast ? theme.palette.text.primary : theme.palette.stopCodon;
-    }
-    return;
+/**
+ * Perform a canvas strokeRect, but have the stroke be contained within the
+ * given rect instead of centered on it.
+ */
+function strokeRectInner(ctx, left, top, width, height, color) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.strokeRect(left + 0.5, top + 0.5, width - 1, height - 1);
 }
+
 function drawLetter(seqTrackctx, left, top, width, letter) {
     const fontSize = Math.min(width, 10);
     seqTrackctx.fillStyle = '#000';
     seqTrackctx.font = `${fontSize}px`;
     const textWidth = seqTrackctx.measureText(letter).width;
-    const textX = left + (width - textWidth) / 2;
+    const textX = Math.round(left + (width - textWidth) / 2);
     seqTrackctx.fillText(letter, textX, top + 10);
 }
-function drawTranslationFrameBackgrounds(canvas, ctx, bpPerPx, theme, dynamicBlocks, highContrast, sequenceRowHeight) {
+function drawTranslationFrameBackgrounds(ctx, bpPerPx, theme, highContrast, left, width, sequenceRowHeight, reversed) {
     const frames = bpPerPx <= 1 ? [3, 2, 1, 0, 0, -1, -2, -3] : [3, 2, 1, -1, -2, -3];
+    if (reversed) {
+        frames.reverse();
+    }
     for (const [idx, frame] of frames.entries()) {
         const frameColor = theme.palette.framesCDS.at(frame)?.main;
         if (!frameColor) {
             continue;
         }
         const top = idx * sequenceRowHeight;
-        const { offsetPx } = dynamicBlocks;
-        const left = Math.max(0, -offsetPx);
-        const width = dynamicBlocks.totalWidthPx;
         ctx.fillStyle = highContrast ? theme.palette.background.default : frameColor;
         ctx.fillRect(left, top, width, sequenceRowHeight);
         if (highContrast) {
             // eslint-disable-next-line prefer-destructuring
-            ctx.strokeStyle = theme.palette.grey[200];
-            ctx.strokeRect(left, top, width, sequenceRowHeight);
-        }
-    }
-    // allows inter-region padding lines to show through
-    for (const block of dynamicBlocks.getBlocks()) {
-        if (block.type === 'InterRegionPaddingBlock') {
-            const left = block.offsetPx - dynamicBlocks.offsetPx;
-            ctx.clearRect(left, 0, block.widthPx, canvas.height);
+            const strokeStyle = theme.palette.grey[200];
+            strokeRectInner(ctx, left, top, width, sequenceRowHeight, strokeStyle);
         }
     }
 }
 function drawBase(ctx, base, index, leftPx, bpPerPx, rowHeight, theme) {
-    const width = 1 / bpPerPx;
-    if (width < 1) {
+    if (1 / bpPerPx < 1) {
         return;
     }
-    const left = leftPx + index / bpPerPx;
+    const left = Math.round(leftPx + index / bpPerPx);
+    const nextLeft = Math.round(leftPx + (index + 1) / bpPerPx);
+    const width = nextLeft - left;
     const strands = [-1, 1];
     for (const strand of strands) {
         const top = (strand === 1 ? 3 : 4) * rowHeight;
@@ -10552,13 +10601,13 @@ function drawBase(ctx, base, index, leftPx, bpPerPx, rowHeight, theme) {
         ctx.fillStyle = colorCode(baseCode, theme);
         ctx.fillRect(left, top, width, rowHeight);
         if (1 / bpPerPx >= 12) {
-            ctx.strokeStyle = theme.palette.text.disabled;
-            ctx.strokeRect(left, top, width, rowHeight);
+            const strokeStyle = theme.palette.text.disabled;
+            strokeRectInner(ctx, left, top, width, rowHeight, strokeStyle);
             drawLetter(ctx, left, top, width, baseCode);
         }
     }
 }
-function drawCodon(ctx, codon, leftPx, index, theme, highContrast, bpPerPx, bp, rowHeight, showStartCodons, showStopCodons) {
+function drawCodon$1(ctx, codon, leftPx, index, theme, highContrast, bpPerPx, bp, rowHeight, showStartCodons, showStopCodons) {
     const frameOffsets = (bpPerPx <= 1 ? [0, 2, 1, 0, 7, 6, 5] : [0, 2, 1, 0, 5, 4, 3]).map((b) => b * rowHeight);
     const strands = [-1, 1];
     for (const strand of strands) {
@@ -10568,7 +10617,8 @@ function drawCodon(ctx, codon, leftPx, index, theme, highContrast, bpPerPx, bp,
             continue;
         }
         const left = Math.round(leftPx + index / bpPerPx);
-        const width = Math.round(3 / bpPerPx);
+        const nextLeft = Math.round(leftPx + (index + 3) / bpPerPx);
+        const width = nextLeft - left;
         const codonCode = strand === 1 ? codon : revcom(codon);
         const aminoAcidCode = defaultCodonTable[codonCode];
         const fillColor = codonColorCode(aminoAcidCode, theme, highContrast);
@@ -10579,8 +10629,8 @@ function drawCodon(ctx, codon, leftPx, index, theme, highContrast, bpPerPx, bp,
             ctx.fillRect(left, top, width, rowHeight);
         }
         if (1 / bpPerPx >= 4) {
-            ctx.strokeStyle = theme.palette.text.disabled;
-            ctx.strokeRect(left, top, width, rowHeight);
+            const strokeStyle = theme.palette.text.disabled;
+            strokeRectInner(ctx, left, top, width, rowHeight, strokeStyle);
             drawLetter(ctx, left, top, width, aminoAcidCode);
         }
     }
@@ -10591,9 +10641,10 @@ function drawSequenceTrack(canvas, theme, bpPerPx, offsetPx, dynamicBlocks, high
         return;
     }
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawTranslationFrameBackgrounds(canvas, ctx, bpPerPx, theme, dynamicBlocks, highContrast, sequenceRowHeight);
     const { apolloDataStore } = session;
     for (const block of dynamicBlocks.contentBlocks) {
+        const totalOffsetPx = block.offsetPx - offsetPx;
+        drawTranslationFrameBackgrounds(ctx, bpPerPx, theme, highContrast, totalOffsetPx, block.widthPx, sequenceRowHeight, block.reversed);
         const assembly = apolloDataStore.assemblies.get(block.assemblyName);
         const ref = assembly?.getByRefName(block.refName);
         const roundedStart = Math.floor(block.start);
@@ -10603,16 +10654,20 @@ function drawSequenceTrack(canvas, theme, bpPerPx, offsetPx, dynamicBlocks, high
             return;
         }
         seq = seq.toUpperCase();
-        const baseOffsetPx = (block.start - roundedStart) / bpPerPx;
-        const seqLeftPx = Math.round(block.offsetPx - offsetPx - baseOffsetPx);
+        if (block.reversed) {
+            seq = revcom(seq);
+        }
+        const baseOffsetPx = (block.reversed ? roundedEnd - block.end : block.start - roundedStart) /
+            bpPerPx;
+        const seqLeftPx = totalOffsetPx - baseOffsetPx;
         for (let i = 0; i < seq.length; i++) {
-            const bp = roundedStart + i;
+            const bp = block.reversed ? roundedEnd - i : roundedStart + i;
             const codon = seq.slice(i, i + 3);
             drawBase(ctx, seq[i], i, seqLeftPx, bpPerPx, sequenceRowHeight, theme);
             if (codon.length !== 3) {
                 continue;
             }
-            drawCodon(ctx, codon, seqLeftPx, i, theme, highContrast, bpPerPx, bp, sequenceRowHeight, showStartCodons, showStopCodons);
+            drawCodon$1(ctx, codon, seqLeftPx, i, theme, highContrast, bpPerPx, bp, sequenceRowHeight, showStartCodons, showStopCodons);
         }
     }
 }
@@ -11676,6 +11731,8 @@ function baseModelFactory(_pluginManager, configSchema) {
         graphical: true,
         table: false,
         showFeatureLabels: true,
+        showStartCodons: false,
+        showStopCodons: true,
         showCheckResults: true,
         zoomThreshold: 200,
         heightPreConfig: types.maybe(types.refinement('displayHeight', types.number, (n) => n >= minDisplayHeight)),
@@ -11804,6 +11861,12 @@ function baseModelFactory(_pluginManager, configSchema) {
         toggleShowFeatureLabels() {
             self.showFeatureLabels = !self.showFeatureLabels;
         },
+        toggleShowStartCodons() {
+            self.showStartCodons = !self.showStartCodons;
+        },
+        toggleShowStopCodons() {
+            self.showStopCodons = !self.showStopCodons;
+        },
         toggleShowCheckResults() {
             self.showCheckResults = !self.showCheckResults;
         },
@@ -11818,7 +11881,7 @@ function baseModelFactory(_pluginManager, configSchema) {
         const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
         return {
             trackMenuItems() {
-                const { graphical, table, showFeatureLabels, showCheckResults } = self;
+                const { graphical, table, showFeatureLabels, showStartCodons, showStopCodons, showCheckResults, } = self;
                 return [
                     ...superTrackMenuItems(),
                     {
@@ -11857,6 +11920,22 @@ function baseModelFactory(_pluginManager, configSchema) {
                                     self.toggleShowFeatureLabels();
                                 },
                             },
+                            {
+                                label: 'Show start codons',
+                                type: 'checkbox',
+                                checked: showStartCodons,
+                                onClick: () => {
+                                    self.toggleShowStartCodons();
+                                },
+                            },
+                            {
+                                label: 'Show stop codons',
+                                type: 'checkbox',
+                                checked: showStopCodons,
+                                onClick: () => {
+                                    self.toggleShowStopCodons();
+                                },
+                            },
                             {
                                 label: 'Check Results',
                                 type: 'checkbox',
@@ -11933,7 +12012,7 @@ function baseModelFactory(_pluginManager, configSchema) {
                     return;
                 }
                 void self.session.apolloDataStore.loadFeatures(self.regions);
-                if (self.lgv.bpPerPx <= 3) {
+                if (self.lgv.bpPerPx <= self.zoomThreshold) {
                     void self.session.apolloDataStore.loadRefSeq(self.regions);
                 }
             }, { name: 'LinearApolloSixFrameDisplayLoadFeatures', delay: 1000 }));
@@ -12125,6 +12204,28 @@ function layoutsModelFactory(pluginManager, configSchema) {
     }));
 }
 
+function drawCodon(ctx, codon, leftPx, index, theme, highContrast, bpPerPx, bp, rowHeight, showFeatureLabels, showStartCodons, showStopCodons) {
+    const frameOffsets = (showFeatureLabels ? [0, 4, 2, 0, 14, 12, 10] : [0, 2, 1, 0, 7, 6, 5]).map((b) => b * rowHeight);
+    const strands = [-1, 1];
+    for (const strand of strands) {
+        const frame = getFrame(bp, bp + 3, strand, 0);
+        const top = frameOffsets.at(frame);
+        if (top === undefined) {
+            continue;
+        }
+        const left = Math.round(leftPx + index / bpPerPx);
+        const width = Math.round(3 / bpPerPx) === 0 ? 1 : Math.round(3 / bpPerPx);
+        const codonCode = strand === 1 ? codon : revcom(codon);
+        const aminoAcidCode = defaultCodonTable[codonCode];
+        const fillColor = codonColorCode(aminoAcidCode, theme, highContrast);
+        if (fillColor &&
+            ((showStopCodons && aminoAcidCode == '*') ||
+                (showStartCodons && aminoAcidCode != '*'))) {
+            ctx.fillStyle = fillColor;
+            ctx.fillRect(left, top, width, rowHeight);
+        }
+    }
+}
 function renderingModelFactory(pluginManager, configSchema) {
     const LinearApolloSixFrameDisplayLayouts = layoutsModelFactory(pluginManager, configSchema);
     return LinearApolloSixFrameDisplayLayouts.named('LinearApolloSixFrameDisplayRendering')
@@ -12214,11 +12315,11 @@ function renderingModelFactory(pluginManager, configSchema) {
                 }
             }, { name: 'LinearApolloSixFrameDisplayRenderCollaborators' }));
             addDisposer(self, autorun(() => {
-                const { canvas, featureLayouts, featuresHeight, lgv } = self;
+                const { apolloRowHeight, canvas, featureLayouts, featuresHeight, lgv, session, theme, showFeatureLabels, showStartCodons, showStopCodons, } = self;
                 if (!lgv.initialized || self.regionCannotBeRendered()) {
                     return;
                 }
-                const { displayedRegions, dynamicBlocks } = lgv;
+                const { bpPerPx, offsetPx, displayedRegions, dynamicBlocks } = lgv;
                 const ctx = canvas?.getContext('2d');
                 if (!ctx) {
                     return;
@@ -12242,6 +12343,27 @@ function renderingModelFactory(pluginManager, configSchema) {
                         }
                     }
                 }
+                if (showStartCodons || showStopCodons) {
+                    const { apolloDataStore } = session;
+                    for (const block of dynamicBlocks.contentBlocks) {
+                        const assembly = apolloDataStore.assemblies.get(block.assemblyName);
+                        const ref = assembly?.getByRefName(block.refName);
+                        const roundedStart = Math.floor(block.start);
+                        const roundedEnd = Math.ceil(block.end);
+                        let seq = ref?.getSequence(roundedStart, roundedEnd);
+                        if (!seq) {
+                            break;
+                        }
+                        seq = seq.toUpperCase();
+                        const baseOffsetPx = (block.start - roundedStart) / bpPerPx;
+                        const seqLeftPx = Math.round(block.offsetPx - offsetPx - baseOffsetPx);
+                        for (let i = 0; i < seq.length; i++) {
+                            const bp = roundedStart + i;
+                            const codon = seq.slice(i, i + 3);
+                            drawCodon(ctx, codon, seqLeftPx, i, theme, true, bpPerPx, bp, apolloRowHeight, showFeatureLabels, showStartCodons, showStopCodons);
+                        }
+                    }
+                }
             }, { name: 'LinearApolloSixFrameDisplayRenderFeatures' }));
         },
     }));
@@ -13192,17 +13314,6 @@ function annotationFromJBrowseFeature(pluggableElement) {
     return pluggableElement;
 }
 
-function getLeftPx(display, feature, block) {
-    const { lgv } = display;
-    const { bpPerPx, offsetPx } = lgv;
-    const blockLeftPx = block.offsetPx - offsetPx;
-    const featureLeftBpDistanceFromBlockLeftBp = block.reversed
-        ? block.end - feature.max
-        : feature.min - block.start;
-    const featureLeftPxDistanceFromBlockLeftPx = featureLeftBpDistanceFromBlockLeftBp / bpPerPx;
-    return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx;
-}
-
 const CheckResultWarnings = observer(function CheckResultWarnings({ display, }) {
     const { classes } = useStyles$1();
     const { apolloDragging, apolloRowHeight, lgv, session, showCheckResults } = display;
@@ -13534,7 +13645,7 @@ const ResizeHandle = ({ onResize, }) => {
             const controller = new AbortController();
             const { signal } = controller;
             function abortDrag() {
-                controller.abort();
+                controller.abort('makeDisplayComponent');
             }
             globalThis.addEventListener('mousemove', mouseMove, { signal });
             globalThis.addEventListener('mouseup', abortDrag, { signal });
@@ -13938,7 +14049,7 @@ function clientDataStoreFactory(AnnotationFeatureExtended) {
                             statusMessage: `Loading ontology "${name}", version "${version}", this may take a while`,
                             progressPct: 0,
                             cancelCallback: () => {
-                                controller.abort();
+                                controller.abort('ClientDataStore');
                                 jobsManager.abortJob(job.name);
                             },
                         };
@@ -14077,6 +14188,7 @@ function extendSession(pluginManager, sessionModel) {
         apolloSelectedFeature: types.safeReference(AnnotationFeatureExtended),
         jobsManager: types.optional(ApolloJobModel, {}),
         isLocked: types.optional(types.boolean, false),
+        changeInProgress: types.optional(types.boolean, false),
     })
         .volatile(() => ({
         apolloHoveredFeature: undefined,
@@ -14139,6 +14251,9 @@ function extendSession(pluginManager, sessionModel) {
         toggleLocked() {
             self.isLocked = !self.isLocked;
         },
+        setChangeInProgress(changeInProgress) {
+            self.changeInProgress = changeInProgress;
+        },
         getPluginConfiguration() {
             const { jbrowse } = getRoot(self);
             const pluginConfiguration =