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

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

@@ -122,7 +122,7 @@ var TrackChangesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TrackChangesI
 var UndoIcon__default = /*#__PURE__*/_interopDefaultLegacy(UndoIcon);
 var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
 
-var version = "0.3.9";
+var version = "0.3.11";
 
 const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -557,6 +557,19 @@ function getContextMenuItemsForFeature$2(display, sourceFeature) {
             ]);
         },
     });
+    if (util.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) {
@@ -805,7 +818,7 @@ function AddAssembly({ changeManager, handleClose, session, }) {
                 statusMessage: 'Pre-validating',
                 progressPct: 0,
                 cancelCallback: () => {
-                    controller.abort();
+                    controller.abort('AddAssembly');
                     jobsManager.abortJob(job.name);
                 },
             };
@@ -2203,7 +2216,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             });
         }
         return () => {
-            controller.abort();
+            controller.abort('OntologyTermAutocomplete matcher');
         };
     }, [session, valueString, filterTerms, ontologyStore, needToLoadCurrentTerm]);
     // effect for loading term autocompletions
@@ -2222,7 +2235,7 @@ function OntologyTermAutocomplete({ fetchValidTerms, filterTerms: filterTermsPro
             });
         }
         return () => {
-            controller.abort();
+            controller.abort('OntologyTermAutocomplete loader');
         };
     }, [
         needToLoadTermChoices,
@@ -2374,17 +2387,24 @@ class ChangeManager {
         // pre-validate
         const session = util.getSession(this.dataStore);
         const controller = new AbortController();
-        const { jobsManager, isLocked } = util.getSession(this.dataStore);
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const { jobsManager, isLocked, changeInProgress, setChangeInProgress } = util.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) {
@@ -2397,6 +2417,7 @@ class ChangeManager {
                 jobsManager.abortJob(job.name, msg);
             }
             session.notify(msg, 'error');
+            setChangeInProgress(false);
             return;
         }
         try {
@@ -2409,6 +2430,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
@@ -2439,6 +2461,7 @@ class ChangeManager {
                 console.error(error);
                 session.notify(String(error), 'error');
                 await this.undo(change, false);
+                setChangeInProgress(false);
                 return;
             }
             if (!backendResult.ok) {
@@ -2448,6 +2471,7 @@ class ChangeManager {
                 }
                 session.notify(msg, 'error');
                 await this.undo(change, false);
+                setChangeInProgress(false);
                 return;
             }
             if (change.notification) {
@@ -2461,6 +2485,7 @@ class ChangeManager {
         if (updateJobsManager) {
             jobsManager.done(job);
         }
+        setChangeInProgress(false);
     }
     async undo(change, submitToBackend = true) {
         const inverseChange = change.getInverse();
@@ -2566,17 +2591,22 @@ class CollaborationServerDriver extends BackendDriver {
     checkSocket(assembly, refSeq, internetAccount) {
         const { socket } = internetAccount;
         const token = internetAccount.retrieveToken();
+        if (!token) {
+            return;
+        }
+        const localSessionId = shared.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 = common.Change.fromJSON(message.changeInfo);
-                    if (common.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 = common.Change.fromJSON(message.changeInfo);
+                if (common.isFeatureChange(change) && this.haveDataForChange(change)) {
+                    await changeManager.submit(change, { submitToBackend: false });
                 }
             });
         }
@@ -3989,7 +4019,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);
             },
         };
@@ -5219,7 +5249,7 @@ const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
             }
         });
         return () => {
-            controller.abort();
+            controller.abort('AuthTypeSelector');
         };
     }, [baseURL]);
     function handleClick(authType) {
@@ -5656,8 +5686,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' });
         },
@@ -6932,6 +6967,7 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
     const refData = currentAssembly?.getByRefName(refName);
     const { changeManager } = session.apolloDataStore;
     const seqRef = React.useRef(null);
+    const { changeInProgress } = session;
     if (!refData) {
         return null;
     }
@@ -7379,10 +7415,13 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
             // highlight start codon and stop codons
             if (codonSeq === 'ATG') {
                 elements.push(React__default["default"].createElement(material.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
@@ -7466,20 +7505,21 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
         }
         // 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, () => {
@@ -7505,6 +7545,7 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
                 return;
             }
             let promise;
+            stopCodonGenomicLoc -= 3; // move to end of stop codon
             if (startCodonGenomicLoc !== cdsMax) {
                 promise = new Promise((resolve) => {
                     updateCDSLocation(cdsMax, startCodonGenomicLoc, feature, false, () => {
@@ -7548,27 +7589,29 @@ 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: onCopyClick })),
+                            React__default["default"].createElement("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
+                                React__default["default"].createElement(ContentCopyIcon__default["default"], { style: { fontSize: 15 } }))),
                         React__default["default"].createElement(material.Tooltip, { title: "Trim" },
-                            React__default["default"].createElement(ContentCutIcon__default["default"], { style: { fontSize: 15, cursor: 'pointer' }, onClick: trimTranslationSequence }))))),
+                            React__default["default"].createElement("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress },
+                                React__default["default"].createElement(ContentCutIcon__default["default"], { style: { fontSize: 15 } })))))),
             React__default["default"].createElement(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center', marginTop: 10 } },
                 React__default["default"].createElement(material.Grid, { size: 1 }),
                 strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4 },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))) : (React__default["default"].createElement(material.Grid, { size: 4 },
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))) : (React__default["default"].createElement(material.Grid, { size: 4 },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMax, newLocation, feature, false);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))),
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))),
                 React__default["default"].createElement(material.Grid, { size: 2 },
                     React__default["default"].createElement(material.Typography, { component: 'span' }, "CDS")),
                 strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4 },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMax, newLocation, feature, false);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))) : (React__default["default"].createElement(material.Grid, { size: 4 },
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))) : (React__default["default"].createElement(material.Grid, { size: 4 },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                             return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
-                        }, style: { border: '1px solid black', borderRadius: 5 } }))),
+                        }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }))),
                 React__default["default"].createElement(material.Grid, { size: 1 })))),
         React__default["default"].createElement("div", { style: { marginTop: 5 } }, transcriptExonParts.map((loc, index) => {
             return (React__default["default"].createElement("div", { key: index }, loc.type === 'exon' && (React__default["default"].createElement(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' } },
@@ -7577,19 +7620,19 @@ const TranscriptWidgetEditLocation = mobxReact.observer(function TranscriptWidge
                 strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        } }))) : (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
+                        }, disabled: changeInProgress }))) : (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        } }))),
+                        }, disabled: changeInProgress }))),
                 React__default["default"].createElement(material.Grid, { size: 2 },
                     React__default["default"].createElement(Strand, { strand: feature.strand })),
                 strand === 1 ? (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.max, newLocation, feature, false);
-                        } }))) : (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
+                        }, disabled: changeInProgress }))) : (React__default["default"].createElement(material.Grid, { size: 4, style: { padding: 0 } },
                     React__default["default"].createElement(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                             return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
-                        } }))),
+                        }, disabled: changeInProgress }))),
                 React__default["default"].createElement(material.Grid, { size: 1 }, index !== transcriptExonParts.length - 1 &&
                     getThreePrimeSpliceSite(loc, index).map((site, idx) => (React__default["default"].createElement(material.Typography, { key: idx, component: 'span', color: site.color }, site.spliceSite))))))));
         }))));
@@ -9258,8 +9301,8 @@ function getContextMenuItems$2(display, mousePosition) {
                     },
                 });
                 if (util.isSessionModelWithWidgets(session)) {
-                    contextMenuItemsForFeature.push({
-                        label: 'Open transcript details',
+                    contextMenuItemsForFeature.splice(1, 0, {
+                        label: 'Open transcript editor',
                         onClick: () => {
                             const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
                                 feature,
@@ -9607,6 +9650,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) {
@@ -10432,34 +10494,26 @@ function stateModelFactory$2(pluginManager, configSchema) {
 
 const configSchema$1 = configuration.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;
@@ -10481,7 +10535,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;
     }
@@ -10505,7 +10559,7 @@ function drawCDSHighlight(ctx, feature, bpPerPx, offsetPx, rowHeight, block, the
     }
     for (const loc of cdsLocs) {
         const frame = util.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;
@@ -10528,76 +10582,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;
@@ -10605,13 +10654,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) {
@@ -10621,7 +10670,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 : util.revcom(codon);
         const aminoAcidCode = util.defaultCodonTable[codonCode];
         const fillColor = codonColorCode(aminoAcidCode, theme, highContrast);
@@ -10632,8 +10682,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);
         }
     }
@@ -10644,9 +10694,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);
@@ -10656,16 +10707,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 = util.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);
         }
     }
 }
@@ -11729,6 +11784,8 @@ function baseModelFactory(_pluginManager, configSchema) {
         graphical: true,
         table: false,
         showFeatureLabels: true,
+        showStartCodons: false,
+        showStopCodons: true,
         showCheckResults: true,
         zoomThreshold: 200,
         heightPreConfig: mobxStateTree.types.maybe(mobxStateTree.types.refinement('displayHeight', mobxStateTree.types.number, (n) => n >= minDisplayHeight)),
@@ -11857,6 +11914,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;
         },
@@ -11871,7 +11934,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(),
                     {
@@ -11910,6 +11973,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',
@@ -11986,7 +12065,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 }));
@@ -12178,6 +12257,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 = util.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 : util.revcom(codon);
+        const aminoAcidCode = util.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')
@@ -12267,11 +12368,11 @@ function renderingModelFactory(pluginManager, configSchema) {
                 }
             }, { name: 'LinearApolloSixFrameDisplayRenderCollaborators' }));
             mobxStateTree.addDisposer(self, mobx.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;
@@ -12295,6 +12396,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' }));
         },
     }));
@@ -13245,17 +13367,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 = mobxReact.observer(function CheckResultWarnings({ display, }) {
     const { classes } = useStyles$1();
     const { apolloDragging, apolloRowHeight, lgv, session, showCheckResults } = display;
@@ -13587,7 +13698,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 });
@@ -13991,7 +14102,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);
                             },
                         };
@@ -14130,6 +14241,7 @@ function extendSession(pluginManager, sessionModel) {
         apolloSelectedFeature: mobxStateTree.types.safeReference(AnnotationFeatureExtended),
         jobsManager: mobxStateTree.types.optional(ApolloJobModel, {}),
         isLocked: mobxStateTree.types.optional(mobxStateTree.types.boolean, false),
+        changeInProgress: mobxStateTree.types.optional(mobxStateTree.types.boolean, false),
     })
         .volatile(() => ({
         apolloHoveredFeature: undefined,
@@ -14192,6 +14304,9 @@ function extendSession(pluginManager, sessionModel) {
         toggleLocked() {
             self.isLocked = !self.isLocked;
         },
+        setChangeInProgress(changeInProgress) {
+            self.changeInProgress = changeInProgress;
+        },
         getPluginConfiguration() {
             const { jbrowse } = mobxStateTree.getRoot(self);
             const pluginConfiguration =