@apollo-annotation/jbrowse-plugin-apollo 1.0.1 → 1.1.1

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

@@ -3107,12 +3107,10 @@
     }, {
       key: "addChild",
       value: function addChild(parentFeature, child) {
-        var _parentFeature$attrib;
+        var _parentFeature$attrib, _parentFeature$childr;
         if (!((_parentFeature$attrib = parentFeature.attributes) !== null && _parentFeature$attrib !== void 0 && _parentFeature$attrib._id)) {
-          var attributes = parentFeature.attributes;
-          if (!attributes) {
-            attributes = {};
-          }
+          var _parentFeature$attrib2 = parentFeature.attributes,
+            attributes = _parentFeature$attrib2 === void 0 ? {} : _parentFeature$attrib2;
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           attributes = _objectSpread2({
             _id: [parentFeature._id.toString()]
@@ -3120,9 +3118,7 @@
           parentFeature.attributes = attributes;
         }
         var _id = child._id;
-        if (!parentFeature.children) {
-          parentFeature.children = new Map();
-        }
+        (_parentFeature$childr = parentFeature.children) !== null && _parentFeature$childr !== void 0 ? _parentFeature$childr : parentFeature.children = new Map();
         parentFeature.children.set(_id, _objectSpread2(_objectSpread2({
           allIds: []
         }, child), {}, {
@@ -4284,10 +4280,9 @@
     }, {
       key: "mergeFeatureIntoTranscriptOnServer",
       value: function mergeFeatureIntoTranscriptOnServer(secondFeatureChild, firstTranscript) {
-        var _this2 = this;
-        if (!firstTranscript.children) {
-          firstTranscript.children = new Map();
-        }
+        var _firstTranscript$chil,
+          _this2 = this;
+        (_firstTranscript$chil = firstTranscript.children) !== null && _firstTranscript$chil !== void 0 ? _firstTranscript$chil : firstTranscript.children = new Map();
         var merged = false;
         var mrgChild;
         var toDelete;
@@ -4304,11 +4299,10 @@
               toDelete = true;
             }
             if (mrgChild.type === secondFeatureChild.type && mrgChild.type === firstFeatureChild.type && util$1.doesIntersect2(secondFeatureChild.min, secondFeatureChild.max, mrgChild.min, mrgChild.max) && util$1.doesIntersect2(firstFeatureChild.min, firstFeatureChild.max, mrgChild.min, mrgChild.max)) {
+              var _mrgChild, _mrgChild$attributes;
               mrgChild.min = Math.min(secondFeatureChild.min, mrgChild.min, firstFeatureChild.min);
               mrgChild.max = Math.max(secondFeatureChild.max, mrgChild.max, firstFeatureChild.max);
-              if (!mrgChild.attributes) {
-                mrgChild.attributes = {};
-              }
+              (_mrgChild$attributes = (_mrgChild = mrgChild).attributes) !== null && _mrgChild$attributes !== void 0 ? _mrgChild$attributes : _mrgChild.attributes = {};
               var mrgChildAttr = JSON.parse(JSON.stringify(mrgChild.attributes));
               if (!Object.keys(mrgChildAttr).includes('merged_with')) {
                 mrgChildAttr.merged_with = [];
@@ -4371,9 +4365,8 @@
     }, {
       key: "mergeFeatureIntoTranscriptOnClient",
       value: function mergeFeatureIntoTranscriptOnClient(secondFeatureChild, firstTranscript) {
-        if (!firstTranscript.children) {
-          firstTranscript.children = new Map();
-        }
+        var _firstTranscript$chil2;
+        (_firstTranscript$chil2 = firstTranscript.children) !== null && _firstTranscript$chil2 !== void 0 ? _firstTranscript$chil2 : firstTranscript.children = new Map();
         var merged = false;
         var mrgChild;
         var toDelete;
@@ -5633,21 +5626,21 @@
     var _feature$attributes, _feature$attributes2;
     var gff_id = (_feature$attributes = feature.attributes) === null || _feature$attributes === void 0 || (_feature$attributes = _feature$attributes.gff_id) === null || _feature$attributes === void 0 ? void 0 : _feature$attributes.join(', ');
     if (gff_id) {
-      return "".concat(gff_id, " (_id: ").concat(feature._id.toString(), ")");
+      return "".concat(gff_id, " (_id: ").concat(feature._id, ")");
     }
     var gff_name = (_feature$attributes2 = feature.attributes) === null || _feature$attributes2 === void 0 || (_feature$attributes2 = _feature$attributes2.gff_name) === null || _feature$attributes2 === void 0 ? void 0 : _feature$attributes2.join(', ');
     if (gff_name) {
-      return "".concat(gff_name, " (_id: ").concat(feature._id.toString(), ")");
+      return "".concat(gff_name, " (_id: ").concat(feature._id, ")");
     }
-    return "_id: ".concat(feature._id.toString());
+    return "_id: ".concat(feature._id);
   }
 
-  var STOP_CODONS;
+  var STOP_CODONS$1;
   (function (STOP_CODONS) {
     STOP_CODONS[STOP_CODONS["TAG"] = 0] = "TAG";
     STOP_CODONS[STOP_CODONS["TAA"] = 1] = "TAA";
     STOP_CODONS[STOP_CODONS["TGA"] = 2] = "TGA";
-  })(STOP_CODONS || (STOP_CODONS = {}));
+  })(STOP_CODONS$1 || (STOP_CODONS$1 = {}));
   var START_CODONS;
   (function (START_CODONS) {
     START_CODONS[START_CODONS["ATG"] = 0] = "ATG";
@@ -5748,8 +5741,8 @@
       return a.min < b.min ? -1 : 1;
     });
     var i = 0;
-    var currentStart = undefined;
-    var currentEnd = undefined;
+    var currentStart;
+    var currentEnd;
     for (var iloc = 0; iloc < sortedLocation.length; iloc++) {
       var loc = sortedLocation[iloc];
       var phase = loc.phase;
@@ -5819,20 +5812,20 @@
                   name: CHECK_NAME$1,
                   cause: CAUSES$1[CAUSES$1.MissingStartCodon],
                   ids: ids,
-                  refSeq: refSeq.toString(),
+                  refSeq: refSeq,
                   start: cdsStart,
                   end: cdsStart,
                   message: "Unexpected start codon \"".concat(start_codon, "\" in feature \"").concat(getPrintableId(feature), "\": ")
                 });
               }
               lastCodon = codons.at(-1); // Last codon is supposed to be a stop
-              if (lastCodon && !(lastCodon.toUpperCase() in STOP_CODONS)) {
+              if (lastCodon && !(lastCodon.toUpperCase() in STOP_CODONS$1)) {
                 checkResults.push({
                   _id: new ObjectID().toHexString(),
                   name: CHECK_NAME$1,
                   cause: CAUSES$1[CAUSES$1.MissingStopCodon],
                   ids: ids,
-                  refSeq: refSeq.toString(),
+                  refSeq: refSeq,
                   start: cdsEnd,
                   end: cdsEnd,
                   message: "Missing stop codon in feature \"".concat(getPrintableId(feature), "\"")
@@ -5844,7 +5837,7 @@
                 name: CHECK_NAME$1,
                 cause: CAUSES$1[CAUSES$1.MissingStopCodon],
                 ids: ids,
-                refSeq: refSeq.toString(),
+                refSeq: refSeq,
                 start: cdsEnd,
                 end: cdsEnd,
                 message: "Missing stop codon in feature \"".concat(getPrintableId(feature), "\"")
@@ -5866,14 +5859,14 @@
             return _context3.a(3, 9);
           case 7:
             location = getOriginalCodonLocation(cdsLocation, strand, idx);
-            if (location && codon.toUpperCase() in STOP_CODONS) {
+            if (location && codon.toUpperCase() in STOP_CODONS$1) {
               _location = _slicedToArray(location, 2), codonStart = _location[0], codonEnd = _location[1];
               checkResults.push({
                 _id: new ObjectID().toHexString(),
                 name: CHECK_NAME$1,
                 cause: CAUSES$1[CAUSES$1.InternalStopCodon],
                 ids: ids,
-                refSeq: refSeq.toString(),
+                refSeq: refSeq,
                 start: codonStart,
                 end: codonEnd,
                 message: "Internal stop codon in feature \"".concat(getPrintableId(feature), "\"")
@@ -6171,7 +6164,7 @@
                     name: CHECK_NAME,
                     cause: CAUSES[CAUSES.NonCanonicalSpliceSiteAtFivePrime],
                     ids: [feature._id],
-                    refSeq: feature.refSeq.toString(),
+                    refSeq: feature.refSeq,
                     start: spliceSequence.fivePrimeMin,
                     end: spliceSequence.fivePrimeMin + 2,
                     message: "Unexpected 5\u2032 splice site in \"".concat(getPrintableId(feature), "\". Expected: ").concat(_toConsumableArray(VALID_FIVE_PRIME_SEQ).join('|'), ", got: ").concat(spliceSequence.fivePrimeSeq)
@@ -6183,7 +6176,7 @@
                     name: CHECK_NAME,
                     cause: CAUSES[CAUSES.NonCanonicalSpliceSiteAtThreePrime],
                     ids: [feature._id],
-                    refSeq: feature.refSeq.toString(),
+                    refSeq: feature.refSeq,
                     start: spliceSequence.threePrimeMin,
                     end: spliceSequence.threePrimeMin + 2,
                     message: "Unexpected 3\u2032 splice site in \"".concat(getPrintableId(feature), "\". Expected: ").concat(_toConsumableArray(VALID_THREE_PRIME_SEQ).join('|'), ", got: ").concat(spliceSequence.threePrimeSeq)
@@ -6351,8 +6344,8 @@
         delete attributes.gff_score;
       }
       return {
-        start: Number(featureLoc.min) + 1,
-        end: Number(featureLoc.max),
+        start: featureLoc.min + 1,
+        end: featureLoc.max,
         seq_id: featureLoc.refSeq,
         source: source,
         type: featureLoc.type,
@@ -6557,7 +6550,7 @@
     return transcriptParts;
   }
   function getCdsLocations(feature) {
-    var transcriptParts = [];
+    var transcriptParts;
     try {
       transcriptParts = getTranscriptParts(feature);
     } catch (_unused) {
@@ -7122,7 +7115,7 @@
     d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
   }), 'Add');
 
-  var version = "1.0.1";
+  var version = "1.1.1";
 
   const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
       baseURL: {
@@ -21815,9 +21808,7 @@
               result = customTermList;
           }
       }
-      if (!result) {
-          result = await ontologyStore.getAllTerms();
-      }
+      result ??= await ontologyStore.getAllTerms();
       return filterTerms ? result.filter((element) => filterTerms(element)) : result;
   }
 
@@ -21998,7 +21989,7 @@
                   setErrorMessage('No assemblies to copy to');
                   return;
               }
-              const assembly = await assemblyManager.waitForAssembly(selectedAssemblyId);
+              const assembly = (await assemblyManager.waitForAssembly(selectedAssemblyId));
               if (!assembly) {
                   return;
               }
@@ -22027,7 +22018,7 @@
           event.preventDefault();
           setErrorMessage('');
           const featureLength = sourceFeature.length;
-          const assembly = await assemblyManager.waitForAssembly(selectedAssemblyId);
+          const assembly = (await assemblyManager.waitForAssembly(selectedAssemblyId));
           if (!assembly) {
               setErrorMessage(`Assembly not found: ${selectedAssemblyId}.`);
               return;
@@ -22365,8 +22356,7 @@
                   locationChanges.push(geneChange);
               }
           }
-          if (featureTypeOntology &&
-              featureTypeOntology.isTypeOf(sourceFeature.type, 'exon')) {
+          if (featureTypeOntology?.isTypeOf(sourceFeature.type, 'exon')) {
               const cdsChange = trimCDS(sourceFeature);
               if (cdsChange) {
                   if (cdsChange.typeName === 'DeleteFeatureChange') {
@@ -22619,7 +22609,7 @@
       return;
   }
   function isSelectedFeature(feature, selectedFeature) {
-      return Boolean(selectedFeature && feature._id === selectedFeature._id);
+      return feature._id === selectedFeature?._id;
   }
   function makeFeatureLabel(feature) {
       let name;
@@ -23225,6 +23215,153 @@
                           }, pageSizeOptions: [5], processRowUpdate: processRowUpdate, disableRowSelectionOnClick: true }) }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
   }
 
+  const START_CODON = 'ATG';
+  const STOP_CODONS = new Set(['TAA', 'TAG', 'TGA']);
+  function findLongestOrf(sequence) {
+      const starts = [
+          null,
+          null,
+          null,
+      ];
+      let longest;
+      for (let start = 0; start < sequence.length - 2; start++) {
+          const codon = sequence.slice(start, start + 3).toUpperCase();
+          const frame = (start % 3);
+          if (codon === START_CODON && starts[frame] === null) {
+              starts[frame] = start;
+          }
+          else if (STOP_CODONS.has(codon)) {
+              const inFrameStart = starts[frame];
+              if (inFrameStart === null) {
+                  continue;
+              }
+              const length = start - inFrameStart;
+              if (!longest || longest[1] - longest[0] < length) {
+                  longest = [inFrameStart, start];
+              }
+              starts[frame] = null;
+          }
+      }
+      return longest;
+  }
+
+  // Returns the genomic half-open boundary for stitched position `pos`.
+  // For strand +1: the inclusive start (min) of the nucleotide.
+  // For strand -1: the exclusive end (max) of the nucleotide.
+  // Symmetric usage:
+  //   plus:  cdsMin = helper(orf[0]), cdsMax = helper(orf[1]+3)
+  //   minus: cdsMax = helper(orf[0]), cdsMin = helper(orf[1]+3)
+  function stitchedToGenomicBound(pos, exons, strand) {
+      let cum = 0;
+      for (const exon of exons) {
+          const len = exon.max - exon.min;
+          if (pos <= cum + len) {
+              const off = pos - cum;
+              return strand === 1 ? exon.min + off : exon.max - off;
+          }
+          cum += len;
+      }
+      const last = exons.at(-1);
+      if (!last) {
+          throw new Error('No exons found');
+      }
+      return strand === 1 ? last.max : last.min;
+  }
+  function AddCodingSequence({ changeManager, handleClose, refName, session, sourceAssemblyId, sourceFeature, }) {
+      const [method, setMethod] = React.useState('longest-orf');
+      const [minInput, setMinInput] = React.useState('');
+      const [maxInput, setMaxInput] = React.useState('');
+      const [errorMessage, setErrorMessage] = React.useState('');
+      async function onSubmit(event) {
+          event.preventDefault();
+          setErrorMessage('');
+          let cdsMin;
+          let cdsMax;
+          try {
+              if (method === 'longest-orf') {
+                  const exonParts = sourceFeature.transcriptExonParts.filter((p) => p.type === 'exon');
+                  if (exonParts.length === 0) {
+                      setErrorMessage('No exons found in this transcript');
+                      return;
+                  }
+                  const backendDriver = session.apolloDataStore.getBackendDriver(sourceAssemblyId);
+                  if (!backendDriver) {
+                      setErrorMessage('No backend driver found for this assembly');
+                      return;
+                  }
+                  let stitchedSequence = '';
+                  for (const exon of exonParts) {
+                      const { seq } = await backendDriver.getSequence({
+                          assemblyName: sourceAssemblyId,
+                          refName,
+                          start: exon.min,
+                          end: exon.max,
+                      });
+                      stitchedSequence += sourceFeature.strand === -1 ? util$1.revcom(seq) : seq;
+                  }
+                  const orf = findLongestOrf(stitchedSequence);
+                  if (!orf) {
+                      ;
+                      session.notify('No open reading frame found in this transcript', 'error');
+                      handleClose();
+                      return;
+                  }
+                  const strand = sourceFeature.strand ?? 1;
+                  if (strand === 1) {
+                      cdsMin = stitchedToGenomicBound(orf[0], exonParts, 1);
+                      cdsMax = stitchedToGenomicBound(orf[1] + 3, exonParts, 1);
+                  }
+                  else {
+                      cdsMax = stitchedToGenomicBound(orf[0], exonParts, -1);
+                      cdsMin = stitchedToGenomicBound(orf[1] + 3, exonParts, -1);
+                  }
+              }
+              else {
+                  cdsMin = Number(minInput) - 1;
+                  cdsMax = Number(maxInput);
+              }
+              const _id = new ObjectID().toHexString();
+              const addedFeature = {
+                  _id,
+                  refSeq: sourceFeature.refSeq,
+                  min: cdsMin,
+                  max: cdsMax,
+                  type: 'CDS',
+              };
+              if (sourceFeature.strand) {
+                  addedFeature.strand = sourceFeature.strand;
+              }
+              const change = new AddFeatureChange({
+                  changedIds: [sourceFeature._id],
+                  typeName: 'AddFeatureChange',
+                  assembly: sourceAssemblyId,
+                  addedFeature,
+                  parentFeatureId: sourceFeature._id,
+              });
+              await changeManager.submit(change);
+              session.apolloSetSelectedFeature(_id);
+              handleClose();
+          }
+          catch (error) {
+              setErrorMessage(error instanceof Error ? error.message : 'An unknown error occurred');
+          }
+      }
+      const manualError = method === 'manual' &&
+          Boolean(minInput) &&
+          Boolean(maxInput) &&
+          Number(maxInput) <= Number(minInput);
+      const submitDisabled = method === 'manual' ? !(minInput && maxInput) || manualError : false;
+      return (jsxRuntime.jsxs(Dialog, { open: true, title: "Add coding sequence", handleClose: handleClose, maxWidth: false, "data-testid": "add-coding-sequence", children: [jsxRuntime.jsxs("form", { onSubmit: (event) => {
+                      void onSubmit(event);
+                  }, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.FormControl, { children: jsxRuntime.jsxs(material.RadioGroup, { value: method, onChange: (e) => {
+                                          setMethod(e.target.value);
+                                      }, children: [jsxRuntime.jsx(material.FormControlLabel, { value: "longest-orf", control: jsxRuntime.jsx(material.Radio, {}), label: "Calculate longest open reading frame" }), jsxRuntime.jsx(material.FormControlLabel, { value: "manual", control: jsxRuntime.jsx(material.Radio, {}), label: "Manual" })] }) }), method === 'manual' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.TextField, { margin: "dense", id: "cds-min", label: "Min", type: "number", fullWidth: true, variant: "outlined", value: minInput, onChange: (e) => {
+                                              setMinInput(e.target.value);
+                                          } }), jsxRuntime.jsx(material.TextField, { margin: "dense", id: "cds-max", label: "Max", type: "number", fullWidth: true, variant: "outlined", value: maxInput, onChange: (e) => {
+                                              setMaxInput(e.target.value);
+                                          }, error: manualError, helperText: manualError ? '"Max" must be greater than "Min"' : null })] })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: submitDisabled, children: "Submit" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "button", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
+  }
+
   class BackendDriver {
       clientStore;
       constructor(clientStore) {
@@ -23297,7 +23434,7 @@
       async getSequence(region) {
           const session = util$1.getSession(this.clientStore);
           const { assemblyManager } = session;
-          const assembly = await assemblyManager.waitForAssembly(region.assemblyName);
+          const assembly = (await assemblyManager.waitForAssembly(region.assemblyName));
           if (!assembly) {
               throw new Error(`Assembly not found: "${region.assemblyName}"`);
           }
@@ -23328,7 +23465,7 @@
       async getRegions(assemblyName) {
           const session = util$1.getSession(this.clientStore);
           const { assemblyManager } = session;
-          const assembly = await assemblyManager.waitForAssembly(assemblyName);
+          const assembly = (await assemblyManager.waitForAssembly(assemblyName));
           if (!assembly) {
               throw new Error(`Assembly not found: "${assemblyName}"`);
           }
@@ -23344,7 +23481,7 @@
       async getRefNameAliases(assemblyName) {
           const session = util$1.getSession(this.clientStore);
           const { assemblyManager } = session;
-          const assembly = await assemblyManager.waitForAssembly(assemblyName);
+          const assembly = (await assemblyManager.waitForAssembly(assemblyName));
           if (!assembly) {
               throw new Error(`Assembly not found: "${assemblyName}"`);
           }
@@ -24003,7 +24140,7 @@
                   const localSessionId = makeUserSessionId(token);
                   const changeManager = new ChangeManager(this.clientStore);
                   // Save server last change sequence into session storage
-                  internetAccount.setLastChangeSequenceNumber(Number(message.changeSequence));
+                  internetAccount.setLastChangeSequenceNumber(message.changeSequence);
                   if (message.userSessionId === localSessionId) {
                       return; // we did this change, no need to apply it again
                   }
@@ -24051,14 +24188,10 @@
               const seq = await inFlightPromise;
               return { seq, refSeq };
           }
-          let apolloAssembly = this.clientStore.assemblies.get(assemblyName);
-          if (!apolloAssembly) {
-              apolloAssembly = this.clientStore.addAssembly(assemblyName);
-          }
-          let apolloRefSeq = apolloAssembly.refSeqs.get(refSeq);
-          if (!apolloRefSeq) {
-              apolloRefSeq = apolloAssembly.addRefSeq(refSeq, refName);
-          }
+          const apolloAssembly = this.clientStore.assemblies.get(assemblyName) ??
+              this.clientStore.addAssembly(assemblyName);
+          const apolloRefSeq = apolloAssembly.refSeqs.get(refSeq) ??
+              apolloAssembly.addRefSeq(refSeq, refName);
           const clientStoreSequence = apolloRefSeq.getSequence(start, end);
           if (clientStoreSequence.length === end - start) {
               return { seq: clientStoreSequence, refSeq };
@@ -24415,7 +24548,7 @@
               setType(NewFeature[value]);
           }
       };
-      let submitDisabled = Boolean(error) || !(start && end && type);
+      let submitDisabled = error || !(start && end && type);
       if ((type === NewFeature.CUSTOM && !customType) ||
           (!strand && type === NewFeature.GENE_AND_SUBFEATURES) ||
           (!strand && type === NewFeature.TRANSCRIPT_AND_SUBFEATURES)) {
@@ -24436,7 +24569,7 @@
   function DeleteAssembly({ changeManager, handleClose, session, }) {
       const { internetAccounts } = mobxStateTree.getRoot(session);
       const [errorMessage, setErrorMessage] = React.useState('');
-      const [confirmDelete, setconfirmDelete] = React.useState(false);
+      const [confirmDelete, setConfirmDelete] = React.useState(false);
       const [submitted, setSubmitted] = React.useState(false);
       const apolloInternetAccounts = internetAccounts.filter((ia) => ia.type === 'ApolloInternetAccount');
       if (apolloInternetAccounts.length === 0) {
@@ -24477,7 +24610,7 @@
           event.preventDefault();
       }
       return (jsxRuntime.jsxs(Dialog, { open: true, title: "Delete Assembly", handleClose: handleClose, maxWidth: false, "data-testid": "delete-assembly", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: submitted && !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx(material.DialogContentText, { children: "Select assembly" }), jsxRuntime.jsx(material.Select, { labelId: "label", value: selectedAssembly?.name ?? '', onChange: handleChangeAssembly, disabled: assemblies.length === 0, children: assemblies.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.name, children: option.displayName }, option.name))) }), jsxRuntime.jsx(material.DialogContentText, { children: jsxRuntime.jsx("strong", { style: { color: 'red' }, children: "NOTE: All assembly data will be deleted and this operation cannot be undone!" }) }), jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: confirmDelete, onChange: () => {
-                                              setconfirmDelete(!confirmDelete);
+                                              setConfirmDelete(!confirmDelete);
                                           } }), label: "I understand that all assembly data will be deleted" }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { disabled: !selectedAssembly || !confirmDelete, variant: "contained", type: "submit", children: "Delete" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
   }
 
@@ -25558,7 +25691,7 @@
       return (jsxRuntime.jsx(material.SvgIcon, { viewBox: "0 0 24 24", ...props, children: jsxRuntime.jsx("path", { d: "M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.9,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3A2,2 0 0,1 1,18Z" }) }));
   }
   function DownloadGFF3({ handleClose, session, assembly: assemblyName, }) {
-      const [includeFASTA, setincludeFASTA] = React.useState(false);
+      const [includeFASTA, setIncludeFASTA] = React.useState(false);
       const [errorMessage, setErrorMessage] = React.useState('');
       const { getInternetAccount } = session.apolloDataStore;
       const { assemblyManager } = session;
@@ -25607,7 +25740,7 @@
           window.open(exportUri, '_blank');
       }
       return (jsxRuntime.jsxs(Dialog, { open: true, title: "Export annotations", handleClose: handleClose, maxWidth: false, "data-testid": "download-gff3", children: [jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsxs(material.DialogContentText, { children: ["Exporting annotations for ", assemblyName] }), jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.FormControlLabel, { "data-testid": "include-fasta-checkbox", control: jsxRuntime.jsx(material.Checkbox, { checked: includeFASTA, onChange: () => {
-                                              setincludeFASTA(!includeFASTA);
+                                              setIncludeFASTA(!includeFASTA);
                                           }, disabled: !internetAccountConfigId }), label: "Include fasta sequence in GFF output" }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", children: "Download" }), jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Cancel" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
   }
   function getAssemblyGFF3Stream(assemblyName) {
@@ -25646,6 +25779,49 @@
       db.close();
   }
 
+  function ImportAnnotations({ assemblyName, handleClose, session, }) {
+      const { changeManager } = session.apolloDataStore;
+      const [file, setFile] = React.useState();
+      const [errorMessage, setErrorMessage] = React.useState('');
+      const [loading, setLoading] = React.useState(false);
+      function handleChangeFile(e) {
+          if (e.target.files) {
+              setFile(e.target.files[0]);
+          }
+      }
+      async function onSubmit(event) {
+          event.preventDefault();
+          if (!file) {
+              return;
+          }
+          setLoading(true);
+          setErrorMessage('');
+          try {
+              const stream = file
+                  .stream()
+                  .pipeThrough(new TransformStream(new esmExports.GFFTransformer({ parseSequences: false })));
+              for await (const value of stream) {
+                  const annotationFeature = gff3ToAnnotationFeature(value);
+                  const change = new AddFeatureChange({
+                      changedIds: [annotationFeature._id],
+                      typeName: 'AddFeatureChange',
+                      assembly: assemblyName,
+                      addedFeature: annotationFeature,
+                  });
+                  await changeManager.submit(change);
+              }
+              handleClose();
+          }
+          catch (error) {
+              setErrorMessage(String(error));
+          }
+          finally {
+              setLoading(false);
+          }
+      }
+      return (jsxRuntime.jsxs(Dialog, { open: true, title: "Import annotations", handleClose: handleClose, children: [loading ? jsxRuntime.jsx(material.LinearProgress, {}) : null, jsxRuntime.jsxs("form", { onSubmit: onSubmit, children: [jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Import annotations from a GFF3 file into the current Apollo track. Features are parsed and stored locally in the browser, so importing very large GFF3 files is not recommended." }), jsxRuntime.jsx("input", { type: "file", accept: ".gff,.gff3", onChange: handleChangeFile, disabled: loading }), errorMessage ? (jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", type: "submit", disabled: !file || loading, children: "Import" }), jsxRuntime.jsx(material.Button, { variant: "outlined", onClick: handleClose, children: "Cancel" })] })] })] }));
+  }
+
   function ImportFeatures({ changeManager, handleClose, session, }) {
       const { apolloDataStore } = session;
       const [file, setFile] = React.useState();
@@ -26049,7 +26225,7 @@
           });
           return newRow;
       }
-      return (jsxRuntime.jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxRuntime.jsxs(material.DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx("div", { style: { height: '100%', width: '100%' }, children: jsxRuntime.jsx(xDataGrid.DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, slots: { toolbar: xDataGrid.GridToolbar }, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
+      return (jsxRuntime.jsxs(Dialog, { open: true, fullScreen: true, title: "Manage users", handleClose: handleClose, "data-testid": "manage-users", children: [jsxRuntime.jsxs(material.DialogContent, { children: [apolloInternetAccounts.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select account" }), jsxRuntime.jsx(material.Select, { value: selectedInternetAccount.internetAccountId, onChange: handleChangeInternetAccount, disabled: !errorMessage, children: internetAccounts.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.internetAccountId, children: option.name }, option.id))) })] })) : null, jsxRuntime.jsx("div", { style: { height: '100%', width: '100%' }, children: jsxRuntime.jsx(xDataGrid.DataGrid, { pagination: true, rows: users, columns: gridColumns, getRowId: (row) => row._id, showToolbar: true, getRowHeight: () => 'auto', isCellEditable: (params) => !isCurrentUser(params.id), processRowUpdate: processRowUpdate, onProcessRowUpdateError: (error) => {
                                   setErrorMessage(String(error));
                               } }) })] }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: handleClose, children: "Close" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
   }
@@ -26359,12 +26535,13 @@
       const [enableSubmit, setEnableSubmit] = React.useState(false);
       const [selectedAssembly, setSelectedAssembly] = React.useState();
       const [selectedRows, setSelectedRows] = React.useState([]);
-      const [refNameAliasMap, setRefNameAliasMap] = React.useState(new Map());
+      const [refNameAliasMap, setRefNameAliasMap] = React.useState(() => new Map());
       const { apolloDataStore } = session;
       const { collaborationServerDriver } = apolloDataStore;
       const assemblies = collaborationServerDriver.getAssemblies();
       React.useEffect(() => {
           if (assemblies.length > 0) {
+              // eslint-disable-next-line @eslint-react/set-state-in-effect
               setSelectedAssembly(assemblies[0]);
               collaborationServerDriver
                   .getRefNameAliases(assemblies[0].name)
@@ -26376,7 +26553,7 @@
                   setErrorMessage('Error fetching refName aliases for assembly');
               });
           }
-          // eslint-disable-next-line react-hooks/exhaustive-deps
+          // eslint-disable-next-line @eslint-react/exhaustive-deps
       }, []);
       const initializeRefNameAliasMap = (refNameAliasesList) => {
           const initialMap = new Map();
@@ -26761,6 +26938,10 @@
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6m0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20"
   }), 'AccountCircle');
 
+  var BusinessIcon = /*#__PURE__*/utils.createSvgIcon(/*#__PURE__*/jsxRuntime.jsx("path", {
+    d: "M12 7V3H2v18h20V7zM6 19H4v-2h2zm0-4H4v-2h2zm0-4H4V9h2zm0-4H4V5h2zm4 12H8v-2h2zm0-4H8v-2h2zm0-4H8V9h2zm0-4H8V5h2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8zm-2-8h-2v2h2zm0 4h-2v2h2z"
+  }), 'Business');
+
   // Icon source: https://developers.google.com/identity/branding-guidelines
   function Google(props) {
       const { color } = props;
@@ -26785,17 +26966,23 @@
   }));
   function GoogleButton(props) {
       const { classes } = useStyles$d();
-      const { disabled } = props;
-      return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Google, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Google" }));
+      const { message } = props;
+      return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Google, {}), ...props, children: message }));
   }
   function MicrosoftButton(props) {
       const { classes } = useStyles$d();
-      const { disabled } = props;
-      return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Microsoft, { color: disabled ? 'disabled' : undefined }), ...props, children: "Sign in with Microsoft" }));
+      const { message } = props;
+      return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(Microsoft, {}), ...props, children: message }));
   }
   function GuestButton(props) {
       const { classes } = useStyles$d();
-      return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: "Continue as Guest" }));
+      const { message } = props;
+      return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(AccountCircleIcon, { fontSize: "small" }), ...props, children: message }));
+  }
+  function GenericButton(props) {
+      const { classes } = useStyles$d();
+      const { message } = props;
+      return (jsxRuntime.jsx(material.Button, { className: classes.loginButton, variant: "outlined", startIcon: jsxRuntime.jsx(BusinessIcon, { fontSize: "small" }), ...props, children: message }));
   }
 
   const useStyles$c = makeStyles()((theme) => ({
@@ -26807,7 +26994,7 @@
   const AuthTypeSelector = ({ baseURL, handleClose, name, }) => {
       const { classes } = useStyles$c();
       const [errorMessage, setErrorMessage] = React.useState('');
-      const [loginTypes, setLoginTypes] = React.useState([]);
+      const [loginTypes, setLoginTypes] = React.useState(null);
       React.useEffect(() => {
           const controller = new AbortController();
           const { signal } = controller;
@@ -26821,6 +27008,9 @@
               }
               const data = (await response.json());
               setLoginTypes(data);
+              if (data.length === 0) {
+                  setErrorMessage('No login types configured');
+              }
           }
           getAuthTypes().catch((error) => {
               if (!isAbortException(error)) {
@@ -26832,26 +27022,35 @@
           };
       }, [baseURL]);
       function handleClick(authType) {
-          if (authType === 'google') {
-              handleClose('google');
-          }
-          else if (authType === 'microsoft') {
-              handleClose('microsoft');
-          }
-          else {
-              handleClose('guest');
-          }
-      }
-      const allowGoogle = loginTypes.includes('google');
-      const allowMicrosoft = loginTypes.includes('microsoft');
-      const allowGuest = loginTypes.includes('guest');
-      return (jsxRuntime.jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsxRuntime.jsxs(material.DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: [allowGoogle ? (jsxRuntime.jsx(GoogleButton, { disabled: !allowGoogle, onClick: () => {
-                              handleClick('google');
-                          } })) : null, allowMicrosoft ? (jsxRuntime.jsx(MicrosoftButton, { disabled: !allowMicrosoft, onClick: () => {
-                              handleClick('microsoft');
-                          } })) : null, allowGuest ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { className: classes.divider }), jsxRuntime.jsx(GuestButton, { onClick: () => {
-                                      handleClick('guest');
-                                  } })] })) : null] }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: () => {
+          handleClose(authType);
+      }
+      if (loginTypes === null) {
+          return 'Loading…';
+      }
+      const firstLoginType = loginTypes.at(0);
+      if (firstLoginType && loginTypes.length === 1 && !firstLoginType.needsPopup) {
+          handleClick(firstLoginType);
+      }
+      return (jsxRuntime.jsxs(Dialog, { open: true, title: `Log in to ${name}`, handleClose: handleClose, maxWidth: false, "data-testid": "login-apollo", children: [jsxRuntime.jsx(material.DialogContent, { style: { display: 'flex', flexDirection: 'column', paddingTop: 8 }, children: loginTypes.map((loginType) => {
+                      if (loginType.name === 'google') {
+                          return (jsxRuntime.jsx(GoogleButton, { message: loginType.message, onClick: () => {
+                                  handleClick(loginType);
+                              } }, loginType.name));
+                      }
+                      if (loginType.name === 'microsoft') {
+                          return (jsxRuntime.jsx(MicrosoftButton, { message: loginType.message, onClick: () => {
+                                  handleClick(loginType);
+                              } }, loginType.name));
+                      }
+                      if (loginType.name === 'guest') {
+                          return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(material.Divider, { className: classes.divider }), jsxRuntime.jsx(GuestButton, { message: loginType.message, onClick: () => {
+                                          handleClick(loginType);
+                                      } })] }, loginType.name));
+                      }
+                      return (jsxRuntime.jsx(GenericButton, { message: loginType.message, onClick: () => {
+                              handleClick(loginType);
+                          } }, loginType.name));
+                  }) }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, { variant: "outlined", type: "submit", onClick: () => {
                           handleClose();
                       }, children: "Cancel" }) }), errorMessage ? (jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, { color: "error", children: errorMessage }) })) : null] }));
   };
@@ -27047,13 +27246,13 @@
                       },
                   ]);
               });
-              if (authType !== 'guest') {
+              if (authType.needsPopup) {
                   // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                  self.openAuthWindow(authType, resolve, reject);
+                  self.openAuthWindow(authType.name, resolve, reject);
                   return;
               }
               const url = new URL('auth/login', baseURL);
-              const searchParams = new URLSearchParams({ type: authType });
+              const searchParams = new URLSearchParams({ type: authType.name });
               url.search = searchParams.toString();
               const uri = url.toString();
               const response = await fetch(uri, { signal: self.controller.signal });
@@ -27174,7 +27373,7 @@
               socket.on('COMMON', (message) => {
                   if ('checkResult' in message) {
                       if (message.deleted) {
-                          deleteCheckResult(message.checkResult._id.toString());
+                          deleteCheckResult(message.checkResult._id);
                       }
                       else {
                           addCheckResult(message.checkResult);
@@ -28001,7 +28200,9 @@
               return newValues;
           });
       }
-      return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [newValues.map((value, idx) => (jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
+      return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [newValues.map((value, idx) => (
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(StringTextField, { value: value, onChangeCommitted: (editedValue) => {
                               updateValue(idx, editedValue);
                           }, variant: "outlined", fullWidth: true }), jsxRuntime.jsx(material.IconButton, { "aria-label": "delete", size: "medium", edge: "end", onClick: () => {
                               deleteValue(idx);
@@ -28013,7 +28214,9 @@
   });
 
   function DefaultAttributeViewer({ values }) {
-      return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: values?.map((value, idx) => (jsxRuntime.jsx(material.Typography, { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
+      return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: values?.map((value, idx) => (jsxRuntime.jsx(material.Typography
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          , { variant: "body2", color: "textSecondary", children: value }, `${idx}.${value}`))) }));
   }
 
   const useStyles$a = makeStyles()((theme) => ({
@@ -28319,6 +28522,7 @@
       const { classes } = useStyles$8();
       const [panelState, setPanelState] = React.useState(['attributes']);
       React.useEffect(() => {
+          // eslint-disable-next-line @eslint-react/set-state-in-effect
           setPanelState(['attributes']);
       }, [feature]);
       if (!(feature && currentAssembly)) {
@@ -28405,6 +28609,7 @@
        */
       get minWithChildren() {
         var min = self.min;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
         var children = self.children;
         if (!children) {
           return min;
@@ -28431,6 +28636,7 @@
        */
       get maxWithChildren() {
         var max = self.max;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
         var children = self.children;
         if (!children) {
           return max;
@@ -28539,6 +28745,7 @@
         if (!featureTypeOntology.isTypeOf(self.type, 'transcript') && !featureTypeOntology.isTypeOf(self.type, 'pseudogenic_transcript')) {
           throw new Error('Only features of type "transcript" or equivalent can calculate CDS locations');
         }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
         var children = self.children;
         if (!children) {
           throw new Error('no CDS or exons in transcript');
@@ -29443,7 +29650,7 @@
           else {
               setSequenceOptions(defaultSequenceOptions);
           }
-          // eslint-disable-next-line react-hooks/exhaustive-deps
+          // eslint-disable-next-line @eslint-react/exhaustive-deps
       }, [feature]);
       if (!(currentAssembly && refData)) {
           return null;
@@ -29506,6 +29713,10 @@
                           .join(';'), "(strand=", feature.strand === 1 ? '+' : '-', ";length=", getSequenceLength(sequenceSegments), ")", jsxRuntime.jsx("br", {}), wrapSequence(sequenceSegments, SEQUENCE_WRAP_LENGTH)] })] }));
   });
 
+  var RemoveIcon = /*#__PURE__*/utils.createSvgIcon(/*#__PURE__*/jsxRuntime.jsx("path", {
+    d: "M19 13H5v-2h14z"
+  }), 'Remove');
+
   var ContentCopyIcon = /*#__PURE__*/utils.createSvgIcon(/*#__PURE__*/jsxRuntime.jsx("path", {
     d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
   }), 'ContentCopy');
@@ -29514,23 +29725,6 @@
     d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2m0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2m6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5M19 3l-6 6 2 2 7-7V3z"
   }), 'ContentCut');
 
-  var RemoveIcon = /*#__PURE__*/utils.createSvgIcon(/*#__PURE__*/jsxRuntime.jsx("path", {
-    d: "M19 13H5v-2h14z"
-  }), 'Remove');
-
-  const StyledTextField = newStyled(NumberTextField)(() => ({
-      '&.MuiFormControl-root': {
-          marginTop: 0,
-          marginBottom: 0,
-          width: '100%',
-      },
-      '& .MuiInputBase-input': {
-          fontSize: 12,
-          height: 20,
-          padding: 1,
-          paddingLeft: 10,
-      },
-  }));
   const SequenceContainer = newStyled('div')({
       display: 'flex',
       justifyContent: 'center',
@@ -29552,6 +29746,195 @@
           maxHeight: 30,
       },
   }));
+  function Translation({ changeInProgress, cdsLocations, refData, strand, 
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  updateCDSLocation, cdsMin, cdsMax, feature, session, }) {
+      const seqRef = React.useRef(null);
+      const { notify } = session;
+      const cdsSequences = [];
+      const [firstLocation] = cdsLocations;
+      for (const loc of firstLocation) {
+          const seq = refData.getSequence(loc.min, loc.max);
+          cdsSequences.push(strand === -1 ? util$1.revcom(seq) : seq);
+      }
+      const cdsSequence = cdsSequences.join('');
+      const proteinSequence = [];
+      for (let codonGenomicPos = 0; codonGenomicPos < cdsSequence.length; codonGenomicPos += 3) {
+          const codonSeq = cdsSequence
+              .slice(codonGenomicPos, codonGenomicPos + 3)
+              .toUpperCase();
+          const protein = util$1.defaultCodonTable[codonSeq] || '&';
+          proteinSequence.push(protein);
+      }
+      const onCopyClick = () => {
+          const seqDiv = seqRef.current;
+          if (!seqDiv) {
+              return;
+          }
+          void copyToClipboard(seqDiv);
+      };
+      // 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 getCodonGenomicLocation = (codonGenomicPosition) => {
+          const [firstLocation] = cdsLocations;
+          let cdsLen = 0;
+          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;
+              }
+          }
+          if (strand === 1) {
+              return cdsMin;
+          }
+          return cdsMax;
+      };
+      const trimTranslationSequence = () => {
+          if ((proteinSequence.at(0) === 'M' && proteinSequence.at(-1) === '*') ||
+              proteinSequence.length === 0) {
+              return;
+          }
+          // Trim any sequence before first start codon and after stop codon
+          const startCodonIndex = proteinSequence.indexOf('M');
+          if (startCodonIndex === -1) {
+              notify('Start codon not found', 'error');
+              return;
+          }
+          const stopCodonIndex = proteinSequence.indexOf('*', startCodonIndex);
+          if (stopCodonIndex === -1) {
+              notify('Stop codon not found', 'error');
+              return;
+          }
+          const startCodonPos = startCodonIndex * 3;
+          const stopCodonPos = stopCodonIndex * 3;
+          const startCodonGenomicLoc = getCodonGenomicLocation(startCodonPos);
+          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, () => {
+                          resolve(true);
+                      });
+                  });
+              }
+              if (stopCodonGenomicLoc !== cdsMax) {
+                  if (promise) {
+                      void promise.then(() => {
+                          updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
+                      });
+                  }
+                  else {
+                      updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
+                  }
+              }
+          }
+          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;
+              stopCodonGenomicLoc -= 3; // move to end of stop codon
+              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');
+      };
+      return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(material.Accordion, { children: [jsxRuntime.jsx(StyledAccordionSummary$1, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(SequenceContainer, { children: jsxRuntime.jsx(material.Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: proteinSequence.map((protein, idx) => {
+                                      const codonGenomicPos = idx * 3;
+                                      if (protein === 'M') {
+                                          return (jsxRuntime.jsx(material.Typography, { component: 'span', style: {
+                                                  backgroundColor: changeInProgress
+                                                      ? 'lightgray'
+                                                      : 'yellow',
+                                                  cursor: 'pointer',
+                                                  border: '1px solid black',
+                                              }, 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
+                                                  const startCodonGenomicLocation = getCodonGenomicLocation(codonGenomicPos);
+                                                  if (startCodonGenomicLocation !== cdsMin &&
+                                                      strand === 1) {
+                                                      updateCDSLocation(cdsMin, startCodonGenomicLocation, feature, true);
+                                                  }
+                                                  if (startCodonGenomicLocation !== cdsMax &&
+                                                      strand === -1) {
+                                                      updateCDSLocation(cdsMax, startCodonGenomicLocation, feature, false);
+                                                  }
+                                              }, children: protein }, codonGenomicPos));
+                                      }
+                                      if (protein === '*') {
+                                          return (jsxRuntime.jsx(material.Typography, { style: { backgroundColor: 'red', color: 'white' }, component: 'span', children: protein }, codonGenomicPos));
+                                      }
+                                      // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
+                                      return (jsxRuntime.jsx(material.Typography, { component: 'span', children: protein }, codonGenomicPos));
+                                  }) }) }), jsxRuntime.jsxs("div", { style: {
+                                  marginTop: 10,
+                                  display: 'flex',
+                                  flexDirection: 'row',
+                                  alignItems: 'center',
+                                  gap: 10,
+                              }, children: [jsxRuntime.jsx(material.Tooltip, { title: "Copy", children: jsxRuntime.jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsxRuntime.jsx(material.Tooltip, { title: "Trim", children: jsxRuntime.jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCutIcon, { style: { fontSize: 15 } }) }) })] })] })] }) }));
+  }
+
+  const StyledTextField = newStyled(NumberTextField)(() => ({
+      '&.MuiFormControl-root': {
+          marginTop: 0,
+          marginBottom: 0,
+          width: '100%',
+      },
+      '& .MuiInputBase-input': {
+          fontSize: 12,
+          height: 20,
+          padding: 1,
+          paddingLeft: 10,
+      },
+  }));
   const Strand = (props) => {
       const { strand } = props;
       return (jsxRuntime.jsx("div", { children: strand === 1 ? (jsxRuntime.jsx(AddIcon, {})) : strand === -1 ? (jsxRuntime.jsx(RemoveIcon, {})) : (jsxRuntime.jsx(material.Typography, { component: 'span', children: "N/A" })) }));
@@ -29570,7 +29953,6 @@
       const currentAssembly = session.apolloDataStore.assemblies.get(assembly);
       const refData = currentAssembly?.getByRefName(refName);
       const { changeManager } = session.apolloDataStore;
-      const seqRef = React.useRef(null);
       const { changeInProgress } = session;
       if (!refData) {
           return null;
@@ -29997,184 +30379,6 @@
               },
           ];
       };
-      const getTranslationSequence = () => {
-          let wholeSequence = '';
-          const [firstLocation] = cdsLocations;
-          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$1.revcom(wholeSequence);
-          }
-          const elements = [];
-          for (let codonGenomicPos = 0; codonGenomicPos < wholeSequence.length; codonGenomicPos += 3) {
-              const codonSeq = wholeSequence
-                  .slice(codonGenomicPos, codonGenomicPos + 3)
-                  .toUpperCase();
-              const protein = util$1.defaultCodonTable[codonSeq] || '&';
-              // highlight start codon and stop codons
-              if (codonSeq === 'ATG') {
-                  elements.push(jsxRuntime.jsx(material.Typography, { component: 'span', style: {
-                          backgroundColor: changeInProgress ? 'lightgray' : 'yellow',
-                          cursor: 'pointer',
-                          border: '1px solid black',
-                      }, 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
-                          const startCodonGenomicLocation = getCodonGenomicLocation(codonGenomicPos);
-                          if (startCodonGenomicLocation !== cdsMin && strand === 1) {
-                              updateCDSLocation(cdsMin, startCodonGenomicLocation, feature, true);
-                          }
-                          if (startCodonGenomicLocation !== cdsMax && strand === -1) {
-                              updateCDSLocation(cdsMax, startCodonGenomicLocation, feature, false);
-                          }
-                      }, children: protein }, codonGenomicPos));
-              }
-              else if (['TAA', 'TAG', 'TGA'].includes(codonSeq)) {
-                  elements.push(jsxRuntime.jsx(material.Typography, { style: { backgroundColor: 'red', color: 'white' }, component: 'span', children: protein }, codonGenomicPos));
-              }
-              else {
-                  elements.push(
-                  // Pass the codonGenomicPos as the key to maintain the genomic position of the codon
-                  jsxRuntime.jsx(material.Typography, { component: 'span', children: protein }, codonGenomicPos));
-              }
-          }
-          return elements;
-      };
-      // Codon position is the index of the start codon in the CDS genomic sequence
-      // Calculate the genomic location of the start codon based on the codon position in the CDS
-      const getCodonGenomicLocation = (codonGenomicPosition) => {
-          const [firstLocation] = cdsLocations;
-          let cdsLen = 0;
-          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;
-              }
-          }
-          if (strand === 1) {
-              return cdsMin;
-          }
-          return cdsMax;
-      };
-      const trimTranslationSequence = () => {
-          const sequenceElements = getTranslationSequence();
-          const translationSequence = sequenceElements
-              .map((el) => el.props.children)
-              .join('');
-          if (translationSequence.startsWith('M') &&
-              translationSequence.endsWith('*')) {
-              return;
-          }
-          // NOTE: We are maintaining the genomic location of the codon start as the "key"
-          // in typography elements. See getTranslationSequence function
-          const translSeqCodonStartGenomicPosArr = [];
-          for (const el of sequenceElements) {
-              translSeqCodonStartGenomicPosArr.push({
-                  codonGenomicPos: el.key,
-                  sequenceLetter: el.props.children,
-              });
-          }
-          if (translSeqCodonStartGenomicPosArr.length === 0) {
-              return;
-          }
-          // Trim any sequence before first start codon and after stop codon
-          const startCodonIndex = translationSequence.indexOf('M');
-          const stopCodonIndex = translationSequence.indexOf('*');
-          const startCodonPos = translSeqCodonStartGenomicPosArr[startCodonIndex].codonGenomicPos;
-          const stopCodonPos = translSeqCodonStartGenomicPosArr[stopCodonIndex].codonGenomicPos;
-          if (!startCodonPos || !stopCodonPos) {
-              return;
-          }
-          const startCodonGenomicLoc = getCodonGenomicLocation(startCodonPos);
-          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, () => {
-                          resolve(true);
-                      });
-                  });
-              }
-              if (stopCodonGenomicLoc !== cdsMax) {
-                  if (promise) {
-                      void promise.then(() => {
-                          updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
-                      });
-                  }
-                  else {
-                      updateCDSLocation(cdsMax, stopCodonGenomicLoc, feature, false);
-                  }
-              }
-          }
-          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;
-              stopCodonGenomicLoc -= 3; // move to end of stop codon
-              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 onCopyClick = () => {
-          const seqDiv = seqRef.current;
-          if (!seqDiv) {
-              return;
-          }
-          void copyToClipboard(seqDiv);
-      };
       return (jsxRuntime.jsxs("div", { children: [cdsPresent && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsxRuntime.jsx(material.Grid, { size: 1 }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                                       return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
                                   }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMax, onChangeCommitted: (newLocation) => {
@@ -30184,8 +30388,12 @@
                                   }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: cdsMin + 1, onChangeCommitted: (newLocation) => {
                                       return updateCDSLocation(cdsMin, newLocation - 1, feature, true);
                                   }, style: { border: '1px solid black', borderRadius: 5 }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 1 })] }) })), jsxRuntime.jsxs("div", { style: { marginTop: 5, marginBottom: 10 }, children: [jsxRuntime.jsx("div", { style: { textAlign: 'center' }, children: jsxRuntime.jsx(material.Typography, { children: "Exons" }) }), transcriptExonParts.map((loc, index) => {
-                          return (jsxRuntime.jsx("div", { children: loc.type === 'exon' && (jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsxRuntime.jsx(material.Grid, { size: 1, children: index !== 0 &&
-                                              getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
+                          return (
+                          // eslint-disable-next-line @eslint-react/no-array-index-key
+                          jsxRuntime.jsx("div", { children: loc.type === 'exon' && (jsxRuntime.jsxs(material.Grid, { container: true, justifyContent: "center", alignItems: "center", style: { textAlign: 'center' }, children: [jsxRuntime.jsx(material.Grid, { size: 1, children: index !== 0 &&
+                                              getFivePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography
+                                              // eslint-disable-next-line @eslint-react/no-array-index-key
+                                              , { component: 'span', color: site.color, children: site.spliceSite }, idx))) }), strand === 1 ? (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                                                   return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
                                               }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.max, onChangeCommitted: (newLocation) => {
                                                   return handleExonLocationChange(loc.max, newLocation, feature, false);
@@ -30194,14 +30402,10 @@
                                               }, disabled: changeInProgress }) })) : (jsxRuntime.jsx(material.Grid, { size: 4, style: { padding: 0 }, children: jsxRuntime.jsx(StyledTextField, { margin: "dense", variant: "outlined", value: loc.min + 1, onChangeCommitted: (newLocation) => {
                                                   return handleExonLocationChange(loc.min, newLocation - 1, feature, true);
                                               }, disabled: changeInProgress }) })), jsxRuntime.jsx(material.Grid, { size: 1, children: index !== transcriptExonParts.length - 1 &&
-                                              getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography, { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
-                      })] }), cdsPresent && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(material.Accordion, { children: [jsxRuntime.jsx(StyledAccordionSummary$1, { expandIcon: jsxRuntime.jsx(ExpandMoreIcon, { style: { color: 'white' } }), "aria-controls": "panel1-content", id: "panel1-header", children: jsxRuntime.jsx(material.Typography, { component: "span", fontWeight: 'bold', children: "Translation" }) }), jsxRuntime.jsxs(material.AccordionDetails, { children: [jsxRuntime.jsx(SequenceContainer, { children: jsxRuntime.jsx(material.Typography, { component: 'span', ref: seqRef, style: { maxHeight: 120, overflowY: 'scroll' }, children: getTranslationSequence() }) }), jsxRuntime.jsxs("div", { style: {
-                                          marginTop: 10,
-                                          display: 'flex',
-                                          flexDirection: 'row',
-                                          alignItems: 'center',
-                                          gap: 10,
-                                      }, children: [jsxRuntime.jsx(material.Tooltip, { title: "Copy", children: jsxRuntime.jsx("button", { onClick: onCopyClick, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCopyIcon, { style: { fontSize: 15 } }) }) }), jsxRuntime.jsx(material.Tooltip, { title: "Trim", children: jsxRuntime.jsx("button", { onClick: trimTranslationSequence, style: { border: 'none', background: 'none', padding: 0 }, disabled: changeInProgress, children: jsxRuntime.jsx(ContentCutIcon, { style: { fontSize: 15 } }) }) })] })] })] }) }))] }));
+                                              getThreePrimeSpliceSite(loc, index).map((site, idx) => (jsxRuntime.jsx(material.Typography
+                                              // eslint-disable-next-line @eslint-react/no-array-index-key
+                                              , { component: 'span', color: site.color, children: site.spliceSite }, idx))) })] })) }, index));
+                      })] }), cdsPresent && (jsxRuntime.jsx(Translation, { changeInProgress: changeInProgress, cdsLocations: cdsLocations, refData: refData, strand: strand, updateCDSLocation: updateCDSLocation, cdsMin: cdsMin, cdsMax: cdsMax, feature: feature, session: session }))] }));
   });
 
   const HeaderTableCell = newStyled(material.TableCell)(() => ({
@@ -30238,7 +30442,7 @@
       const { assembly, feature, refName } = model;
       React.useEffect(() => {
           setPanelState(DEFAULT_PANELS);
-          // eslint-disable-next-line react-hooks/exhaustive-deps
+          // eslint-disable-next-line @eslint-react/exhaustive-deps
       }, [feature]);
       const session = util$1.getSession(model);
       const { pluginManager } = util$1.getEnv(session);
@@ -30297,8 +30501,8 @@
           typeName: 'TypeChange',
           changedIds: [featureId],
           featureId,
-          oldType: String(oldType),
-          newType: String(newType),
+          oldType,
+          newType,
           assembly: feature.assemblyId,
       });
       return changeManager.submit(change);
@@ -30394,7 +30598,7 @@
           if (initialValue !== value) {
               setValue(initialValue);
           }
-          // eslint-disable-next-line react-hooks/exhaustive-deps
+          // eslint-disable-next-line @eslint-react/exhaustive-deps
       }, [initialValue]);
       React.useEffect(() => {
           if (blur) {
@@ -31243,8 +31447,9 @@
       const [top, left, width] = getFeatureBox(display, gene, row, block);
       const height = getRowCount$2(display, gene) * apolloRowHeight;
       if (width > 2) {
-          let selectedColor = configuration.readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', { featureType: gene.type });
-          selectedColor = material.alpha(theme.palette.background.paper, 0.6);
+          const selectedColor = configuration.readConfObject(session.getPluginConfiguration(), 'geneBackgroundColor', {
+              featureType: gene.type,
+          }) ?? material.alpha(theme.palette.background.paper, 0.6);
           ctx.fillStyle = selectedColor;
           ctx.fillRect(left, top, width, height);
       }
@@ -31517,7 +31722,7 @@
       }
       return layout;
   }
-  function getContextMenuItems$1(display, feature) {
+  function getContextMenuItems$1(display, transcript) {
       const { changeManager, regions, selectedFeature, session } = display;
       const [region] = regions;
       const currentAssemblyId = display.getAssemblyId(region.assemblyName);
@@ -31527,7 +31732,7 @@
               label: 'Open transcript editor',
               onClick: () => {
                   const apolloTranscriptWidget = session.addWidget('ApolloTranscriptDetails', 'apolloTranscriptDetails', {
-                      feature,
+                      feature: transcript,
                       assembly: currentAssemblyId,
                       changeManager,
                       refName: region.refName,
@@ -31547,7 +31752,7 @@
                           doneCallback();
                       },
                       changeManager,
-                      sourceFeature: feature,
+                      sourceFeature: transcript,
                       sourceAssemblyId: currentAssemblyId,
                       selectedFeature,
                       setSelectedFeature: (feature) => {
@@ -31567,7 +31772,7 @@
                           doneCallback();
                       },
                       changeManager,
-                      sourceFeature: feature,
+                      sourceFeature: transcript,
                       sourceAssemblyId: currentAssemblyId,
                       selectedFeature,
                       setSelectedFeature: (feature) => {
@@ -31577,6 +31782,31 @@
               ]);
           },
       });
+      const { children } = transcript;
+      if (!children) {
+          return [];
+      }
+      const cdsChildren = [...children.values()].filter((child) => isCDSFeature(child, session));
+      if (cdsChildren.length === 0) {
+          menuItems.push({
+              label: 'Add coding sequence',
+              onClick: () => {
+                  session.queueDialog((doneCallback) => [
+                      AddCodingSequence,
+                      {
+                          session,
+                          handleClose: () => {
+                              doneCallback();
+                          },
+                          changeManager,
+                          sourceFeature: transcript,
+                          sourceAssemblyId: currentAssemblyId,
+                          refName: region.refName,
+                      },
+                  ]);
+              },
+          });
+      }
       return menuItems;
   }
   // False positive here, none of these functions use "this"
@@ -31763,7 +31993,7 @@
           letterUpper === 'C' ||
           letterUpper === 'G' ||
           letterUpper === 'T') {
-          return theme.palette.bases[letterUpper].main.toString();
+          return theme.palette.bases[letterUpper].main;
       }
       return 'lightgray';
   }
@@ -31860,8 +32090,7 @@
               return internetAccounts.find((ia) => configuration.getConf(ia, 'internetAccountId') === internetAccountConfigId);
           },
           get changeManager() {
-              return self.session.apolloDataStore
-                  .changeManager;
+              return self.session.apolloDataStore.changeManager;
           },
           getAssemblyId(assemblyName) {
               const { assemblyManager } = self.session;
@@ -31872,12 +32101,10 @@
               return assembly.name;
           },
           get selectedFeature() {
-              return self.session
-                  .apolloSelectedFeature;
+              return self.session.apolloSelectedFeature;
           },
           get hoveredFeature() {
-              return self.session
-                  .apolloHoveredFeature;
+              return self.session.apolloHoveredFeature;
           },
       }))
           .actions((self) => ({
@@ -31922,8 +32149,11 @@
           const { filteredFeatureTypes, trackMenuItems: superTrackMenuItems } = self;
           return {
               trackMenuItems() {
-                  const { graphical, table, showCheckResults } = self;
-                  return [
+                  const { graphical, table, showCheckResults, session } = self;
+                  const [region] = self.regions;
+                  const { assemblyName } = region;
+                  const backendDriver = session.apolloDataStore.getBackendDriver(assemblyName);
+                  const items = [
                       ...superTrackMenuItems(),
                       {
                           type: 'subMenu',
@@ -31975,7 +32205,7 @@
                       {
                           label: 'Filter features by type',
                           onClick: () => {
-                              const session = self.session;
+                              const { session } = self;
                               self.session.queueDialog((doneCallback) => [
                                   FilterFeatures,
                                   {
@@ -31991,76 +32221,93 @@
                               ]);
                           },
                       },
-                      {
-                          label: 'Export annotations',
-                          icon: Export,
+                  ];
+                  if (backendDriver instanceof LocalDriver) {
+                      items.push({
+                          label: 'Import annotations',
+                          icon: InputIcon,
                           onClick: () => {
-                              const [region] = self.regions;
-                              const { assemblyName } = region;
-                              const assembly = self.getAssemblyId(assemblyName);
-                              if (!assembly) {
-                                  return;
-                              }
-                              const session = self.session;
                               session.queueDialog((doneCallback) => [
-                                  DownloadGFF3,
+                                  ImportAnnotations,
                                   {
                                       session,
+                                      assemblyName,
                                       handleClose: () => {
                                           doneCallback();
                                       },
-                                      assembly,
                                   },
                               ]);
                           },
+                      });
+                  }
+                  items.push({
+                      label: 'Export annotations',
+                      icon: Export,
+                      onClick: () => {
+                          const [region] = self.regions;
+                          const { assemblyName } = region;
+                          const assembly = self.getAssemblyId(assemblyName);
+                          if (!assembly) {
+                              return;
+                          }
+                          const { session } = self;
+                          session.queueDialog((doneCallback) => [
+                              DownloadGFF3,
+                              {
+                                  session,
+                                  handleClose: () => {
+                                      doneCallback();
+                                  },
+                                  assembly,
+                              },
+                          ]);
                       },
-                      {
-                          label: 'View Change Log',
-                          icon: TrackChangesIcon,
-                          onClick: () => {
-                              const [region] = self.regions;
-                              const { assemblyName } = region;
-                              const assembly = self.getAssemblyId(assemblyName);
-                              if (!assembly) {
-                                  return;
-                              }
-                              const session = self.session;
-                              session.queueDialog((doneCallback) => [
-                                  ViewChangeLog,
-                                  {
-                                      session,
-                                      handleClose: () => {
-                                          doneCallback();
-                                      },
-                                      assembly,
+                  }, {
+                      label: 'View Change Log',
+                      icon: TrackChangesIcon,
+                      onClick: () => {
+                          const [region] = self.regions;
+                          const { assemblyName } = region;
+                          const assembly = self.getAssemblyId(assemblyName);
+                          if (!assembly) {
+                              return;
+                          }
+                          const { session } = self;
+                          session.queueDialog((doneCallback) => [
+                              ViewChangeLog,
+                              {
+                                  session,
+                                  handleClose: () => {
+                                      doneCallback();
                                   },
-                              ]);
-                          },
+                                  assembly,
+                              },
+                          ]);
                       },
-                      {
-                          label: 'View Check Results',
-                          icon: FactCheckIcon,
-                          onClick: () => {
-                              const [region] = self.regions;
-                              const { assemblyName } = region;
-                              const assembly = self.getAssemblyId(assemblyName);
-                              if (!assembly) {
-                                  return;
-                              }
-                              const session = self.session;
-                              session.queueDialog((doneCallback) => [
-                                  ViewCheckResults,
-                                  {
-                                      session,
-                                      handleClose: () => {
-                                          doneCallback();
-                                      },
-                                      assembly,
+                  }, {
+                      label: 'View Check Results',
+                      icon: FactCheckIcon,
+                      onClick: () => {
+                          const [region] = self.regions;
+                          const { assemblyName } = region;
+                          const assembly = self.getAssemblyId(assemblyName);
+                          if (!assembly) {
+                              return;
+                          }
+                          const { session } = self;
+                          session.queueDialog((doneCallback) => [
+                              ViewCheckResults,
+                              {
+                                  session,
+                                  handleClose: () => {
+                                      doneCallback();
                                   },
-                              ]);
-                          },
+                                  assembly,
+                              },
+                          ]);
                       },
-                  ];
+                  });
+                  return items;
               },
           };
       })
@@ -33126,8 +33373,7 @@
               return internetAccounts.find((ia) => configuration.getConf(ia, 'internetAccountId') === internetAccountConfigId);
           },
           get changeManager() {
-              return self.session.apolloDataStore
-                  .changeManager;
+              return self.session.apolloDataStore.changeManager;
           },
           getAssemblyId(assemblyName) {
               const { assemblyManager } = self.session;
@@ -33138,12 +33384,10 @@
               return assembly.name;
           },
           get selectedFeature() {
-              return self.session
-                  .apolloSelectedFeature;
+              return self.session.apolloSelectedFeature;
           },
           get hoveredFeature() {
-              return self.session
-                  .apolloHoveredFeature;
+              return self.session.apolloHoveredFeature;
           },
           get height() {
               const { sequenceRowHeight } = self;
@@ -33355,11 +33599,9 @@
           onUpdate(newForms);
           setExcludedTranscripts(newForms);
       };
-      return (jsxRuntime.jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsxRuntime.jsx(material.Grid, { container: true, spacing: 2, children: jsxRuntime.jsx(material.Grid, { size: 8, children: jsxRuntime.jsx(material.FormGroup, { children: allTranscripts.map((item) => (
-                              // eslint-disable-next-line react/jsx-key
-                              jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
+      return (jsxRuntime.jsx(Dialog, { open: true, maxWidth: false, "data-testid": "filter-transcripts-dialog", title: "Filter transcripts by ID", handleClose: handleClose, children: jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { children: "Select the alternate transcripts you want to display in the apollo track" }), jsxRuntime.jsx(material.Grid, { container: true, spacing: 2, children: jsxRuntime.jsx(material.Grid, { size: 8, children: jsxRuntime.jsx(material.FormGroup, { children: allTranscripts.map((item) => (jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: !excludedTranscripts.includes(item), onChange: () => {
                                           handleChange(item);
-                                      }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item }))) }) }) })] }) }));
+                                      }, slotProps: { input: { 'aria-label': 'controlled' } } }), label: item }, item))) }) }) })] }) }));
   });
 
   let forwardFillLight = null;
@@ -34205,8 +34447,7 @@
               return internetAccounts.find((ia) => configuration.getConf(ia, 'internetAccountId') === internetAccountConfigId);
           },
           get changeManager() {
-              return self.session.apolloDataStore
-                  .changeManager;
+              return self.session.apolloDataStore.changeManager;
           },
           getAssemblyId(assemblyName) {
               const { assemblyManager } = self.session;
@@ -34217,12 +34458,10 @@
               return assembly.name;
           },
           get selectedFeature() {
-              return self.session
-                  .apolloSelectedFeature;
+              return self.session.apolloSelectedFeature;
           },
           get hoveredFeature() {
-              return self.session
-                  .apolloHoveredFeature;
+              return self.session.apolloHoveredFeature;
           },
       }))
           .actions((self) => ({
@@ -34350,7 +34589,7 @@
                       {
                           label: 'Filter features by type',
                           onClick: () => {
-                              const session = self.session;
+                              const { session } = self;
                               self.session.queueDialog((doneCallback) => [
                                   FilterFeatures,
                                   {
@@ -34788,17 +35027,12 @@
               if (!featureTypeOntology) {
                   throw new Error('featureTypeOntology is undefined');
               }
-              let foundFeature;
-              if (self.geneTrackRowNums.includes(row)) {
-                  foundFeature = layoutRow.find((f) => f.feature.type == 'exon' &&
+              const foundFeature = self.geneTrackRowNums.includes(row)
+                  ? layoutRow.find((f) => f.feature.type == 'exon' &&
                       bp >= f.feature.min &&
-                      bp <= f.feature.max);
-                  if (!foundFeature) {
-                      foundFeature = layoutRow.find((f) => bp >= f.feature.min && bp <= f.feature.max);
-                  }
-              }
-              else {
-                  foundFeature = layoutRow.find((f) => {
+                      bp <= f.feature.max) ??
+                      layoutRow.find((f) => bp >= f.feature.min && bp <= f.feature.max)
+                  : layoutRow.find((f) => {
                       const { feature } = f;
                       const featureID = feature.attributes.get('gff_id')?.toString();
                       const isTranscript = featureTypeOntology.isTypeOf(feature.type, 'transcript');
@@ -34820,7 +35054,6 @@
                       }
                       return false;
                   });
-              }
               if (!foundFeature) {
                   return mousePosition;
               }
@@ -35143,27 +35376,33 @@
       const [selectedDestinationFeature, setSelectedDestinationFeature] = React.useState();
       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.min > region.end || f.max < region.start) {
-                  continue;
-              }
-              // Destination feature should be of type gene
-              if (featureTypeOntology?.isTypeOf(f.type, 'gene')) {
-                  const featureSnapshot = mobxStateTree.getSnapshot(f);
-                  filteredFeatures.push(featureSnapshot);
-              }
-          }
-          return filteredFeatures;
-      };
+      const features = React.useMemo(() => refSeq?.getFeatures(region.start, region.end), [refSeq, region.start, region.end]);
       React.useEffect(() => {
+          const getDestinationFeatures = () => {
+              const filteredFeatures = [];
+              for (const f of features ?? []) {
+                  if (f.min > region.end || f.max < region.start) {
+                      continue;
+                  }
+                  // Destination feature should be of type gene
+                  if (featureTypeOntology?.isTypeOf(f.type, 'gene')) {
+                      const featureSnapshot = mobxStateTree.getSnapshot(f);
+                      filteredFeatures.push(featureSnapshot);
+                  }
+              }
+              return filteredFeatures;
+          };
           setErrorMessage('');
-          const features = getDestinationFeatures();
-          setDestinationFeatures(features);
-          setSelectedDestinationFeature(features[0]);
-      }, [checkedChildrens, parentFeatureChecked, region]);
+          const destinationFeatures = getDestinationFeatures();
+          setDestinationFeatures(destinationFeatures);
+          setSelectedDestinationFeature(destinationFeatures[0]);
+      }, [
+          checkedChildrens,
+          featureTypeOntology,
+          features,
+          parentFeatureChecked,
+          region,
+      ]);
       const handleParentFeatureCheck = (event) => {
           const isChecked = event.target.checked;
           setParentFeatureChecked(isChecked);
@@ -35443,8 +35682,21 @@
           getAnnotationFeature(jbrowseFeature, refSeqId) {
               const start = jbrowseFeature.get('start');
               const end = jbrowseFeature.get('end');
-              const strand = jbrowseFeature.get('strand');
               const name = jbrowseFeature.get('name');
+              let strand;
+              const tags = jbrowseFeature.get('tags');
+              const { ts, TS, XS } = tags;
+              for (const tag of [ts, TS, XS]) {
+                  if (!strand && tag) {
+                      if ([1, '1', '+'].includes(tag)) {
+                          strand = 1;
+                      }
+                      else if ([-1, '-1', '-'].includes(tag)) {
+                          strand = -1;
+                      }
+                  }
+              }
+              strand ??= jbrowseFeature.get('strand');
               const cigarData = jbrowseFeature.get('CIGAR');
               const ops = parseCigar(cigarData);
               let position = start;
@@ -35460,9 +35712,7 @@
                       case 'M':
                       case '=':
                       case 'X': {
-                          if (currentExonStart === undefined) {
-                              currentExonStart = position;
-                          }
+                          currentExonStart ??= position;
                           position += len;
                           break;
                       }
@@ -35888,7 +36138,7 @@
                               : undefined, menuItems: contextMenuItems })] }))] }));
   });
 
-  const TrackLines = mobxReact.observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx = 0, }) {
+  const TrackLines = mobxReact.observer(function TrackLines({ model, hrStyle = { margin: 0, top: 0, color: 'black' }, idx, }) {
       const { apolloRowHeight, highestRow, showFeatureLabels } = model;
       const featureLabelSpacer = showFeatureLabels ? 2 : 1;
       return (jsxRuntime.jsx("div", { style: {
@@ -35960,8 +36210,7 @@
                                           regionNumber: idx,
                                       })?.offsetPx ?? 0) - lgv.offsetPx;
                                       const [feature] = checkResult.featureIds;
-                                      if (!feature ||
-                                          !feature.parent ||
+                                      if (!feature?.parent ||
                                           !looksLikeGene(feature.parent, session)) {
                                           return null;
                                       }
@@ -36229,18 +36478,15 @@
     d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z"
   }), 'Save');
 
-  /* eslint-disable @typescript-eslint/no-unsafe-assignment */
   /* eslint-disable @typescript-eslint/no-confusing-void-expression */
   const ApolloJobModel = mobxStateTree.types
       .model('JobsManager', {})
       .views((self) => ({
       get jobStatusWidget() {
           const { widgets } = util$1.getSession(self);
-          let jobStatusWidget = widgets.get('JobsList');
-          if (!jobStatusWidget) {
+          const jobStatusWidget = widgets.get('JobsList') ??
               // @ts-expect-error: addWidget function not detected on the session
-              jobStatusWidget = util$1.getSession(self).addWidget('JobsListWidget', 'JobsList');
-          }
+              util$1.getSession(self).addWidget('JobsListWidget', 'JobsList');
           return jobStatusWidget;
       },
   }))
@@ -36519,19 +36765,15 @@
                       continue;
                   }
                   const { assemblyName, refName } = region;
-                  let assembly = self.assemblies.get(assemblyName);
-                  if (!assembly) {
-                      assembly = self.assemblies.put({ _id: assemblyName, refSeqs: {} });
-                  }
+                  const assembly = self.assemblies.get(assemblyName) ??
+                      self.assemblies.put({ _id: assemblyName, refSeqs: {} });
                   const [firstFeature] = features;
-                  let ref = assembly.refSeqs.get(firstFeature.refSeq);
-                  if (!ref) {
-                      ref = assembly.refSeqs.put({
+                  const ref = assembly.refSeqs.get(firstFeature.refSeq) ??
+                      assembly.refSeqs.put({
                           _id: firstFeature.refSeq,
                           name: refName,
                           features: {},
                       });
-                  }
                   for (const feature of features) {
                       if (!ref.features.has(feature._id)) {
                           ref.features.put(feature);
@@ -36548,24 +36790,153 @@
                   }
                   const { refSeq, seq } = yield backendDriver.getSequence(region);
                   const { assemblyName, end, refName, start } = region;
-                  let assembly = self.assemblies.get(assemblyName);
-                  if (!assembly) {
-                      assembly = self.assemblies.put({ _id: assemblyName, refSeqs: {} });
-                  }
-                  let ref = assembly.refSeqs.get(refSeq);
-                  if (!ref) {
-                      ref = assembly.refSeqs.put({
-                          _id: refSeq,
-                          name: refName,
-                          sequence: [],
-                      });
-                  }
+                  const assembly = self.assemblies.get(assemblyName) ??
+                      self.assemblies.put({ _id: assemblyName, refSeqs: {} });
+                  const ref = assembly.refSeqs.get(refSeq) ??
+                      assembly.refSeqs.put({ _id: refSeq, name: refName, sequence: [] });
                   ref.addSequence({ start, stop: end, sequence: seq });
               }
           }),
       }));
   }
 
+  function reassignIds(feature) {
+      const newChildren = {};
+      if (feature.children) {
+          for (const child of Object.values(feature.children)) {
+              const newChild = reassignIds(child);
+              newChildren[newChild._id] = newChild;
+          }
+      }
+      return {
+          ...feature,
+          _id: new ObjectID().toHexString(),
+          children: feature.children ? newChildren : undefined,
+      };
+  }
+  function DuplicateFeatureDialog({ assemblyName, changeManager, existingFeature, featureSnapshot, handleClose, }) {
+      const [choice, setChoice] = React.useState('keepExisting');
+      const [errorMessage, setErrorMessage] = React.useState('');
+      const [submitted, setSubmitted] = React.useState(false);
+      const handleSubmit = async () => {
+          setErrorMessage('');
+          setSubmitted(true);
+          try {
+              if (choice === 'useNew') {
+                  const deleteChange = new DeleteFeatureChange({
+                      typeName: 'DeleteFeatureChange',
+                      assembly: assemblyName,
+                      changedIds: [existingFeature._id],
+                      deletedFeature: existingFeature,
+                  });
+                  await changeManager.submit(deleteChange);
+                  const addChange = new AddFeatureChange({
+                      typeName: 'AddFeatureChange',
+                      assembly: assemblyName,
+                      changedIds: [featureSnapshot._id],
+                      addedFeature: featureSnapshot,
+                  });
+                  await changeManager.submit(addChange);
+              }
+              else if (choice === 'keepBoth') {
+                  const newSnapshot = reassignIds(featureSnapshot);
+                  const addChange = new AddFeatureChange({
+                      typeName: 'AddFeatureChange',
+                      assembly: assemblyName,
+                      changedIds: [newSnapshot._id],
+                      addedFeature: newSnapshot,
+                  });
+                  await changeManager.submit(addChange);
+              }
+              handleClose();
+          }
+          catch (error) {
+              setErrorMessage(String(error));
+              setSubmitted(false);
+          }
+      };
+      return (jsxRuntime.jsxs(Dialog, { open: true, title: "Duplicate Feature Detected", handleClose: handleClose, maxWidth: "sm", fullWidth: true, children: [jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsxs(material.DialogContentText, { children: ["A feature with ID \u201C", featureSnapshot._id, "\u201D already exists. How would you like to resolve this conflict?"] }), jsxRuntime.jsxs(material.FormControl, { component: "fieldset", sx: { mt: 2 }, children: [jsxRuntime.jsx(material.FormLabel, { component: "legend", children: "Resolution" }), jsxRuntime.jsxs(material.RadioGroup, { value: choice, onChange: (e) => {
+                                      setChoice(e.target.value);
+                                  }, children: [jsxRuntime.jsx(material.FormControlLabel, { value: "keepExisting", control: jsxRuntime.jsx(material.Radio, {}), label: "Keep the existing feature" }), jsxRuntime.jsx(material.FormControlLabel, { value: "useNew", control: jsxRuntime.jsx(material.Radio, {}), label: "Replace with the new feature" }), jsxRuntime.jsx(material.FormControlLabel, { value: "keepBoth", control: jsxRuntime.jsx(material.Radio, {}), label: "Keep both (assign new IDs to the incoming feature)" })] })] }), errorMessage ? (jsxRuntime.jsx(material.DialogContentText, { color: "error", sx: { mt: 1 }, children: errorMessage })) : null] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { variant: "contained", onClick: handleSubmit, disabled: submitted, children: "Confirm" }), jsxRuntime.jsx(material.Button, { onClick: handleClose, disabled: submitted, children: "Cancel" })] })] }));
+  }
+
+  function fromUrlSafeBase64(urlSafeBase64) {
+      let base64 = urlSafeBase64.replaceAll('-', '+').replaceAll('_', '/');
+      const pad = base64.length % 4;
+      if (pad) {
+          base64 += '='.repeat(4 - pad);
+      }
+      return base64;
+  }
+  // Base64 decode + decompress
+  async function decompress(encoded) {
+      const binaryString = atob(encoded);
+      // eslint-disable-next-line unicorn/prefer-code-point
+      const bytes = Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
+      const stream = new Blob([bytes]).stream();
+      const decompressionStream = new DecompressionStream('gzip');
+      const decompressedStream = stream.pipeThrough(decompressionStream);
+      const response = new Response(decompressedStream);
+      const decompressed = await response.arrayBuffer();
+      return JSON.parse(new TextDecoder().decode(decompressed));
+  }
+  async function handleApolloFeaturesUrlParam(encodedFeatures, apolloDataStore, assemblyManager, session) {
+      const base64 = fromUrlSafeBase64(encodedFeatures);
+      const decompressed = await decompress(base64);
+      const featuresData = decompressed;
+      for (const [assemblyName, featureSnapshots] of Object.entries(featuresData)) {
+          const backendDriver = apolloDataStore.getBackendDriver(assemblyName);
+          if (!(backendDriver instanceof LocalDriver)) {
+              continue;
+          }
+          const assembly = (await assemblyManager.waitForAssembly(assemblyName));
+          if (!assembly) {
+              throw new Error(`Assembly not found: "${assemblyName}"`);
+          }
+          const { regions } = assembly;
+          if (!regions) {
+              throw new Error(`Assembly not found: "${assemblyName}"`);
+          }
+          const refNames = regions.map((r) => r.refName);
+          const db = await openDb(assemblyName, refNames);
+          for (const featureSnapshot of featureSnapshots) {
+              const storeName = `features-${featureSnapshot.refSeq}`;
+              const existing = (await db.get(storeName, featureSnapshot._id));
+              if (existing === undefined) {
+                  const change = new AddFeatureChange({
+                      typeName: 'AddFeatureChange',
+                      assembly: assemblyName,
+                      changedIds: [featureSnapshot._id],
+                      addedFeature: featureSnapshot,
+                  });
+                  await apolloDataStore.changeManager.submit(change);
+              }
+              else {
+                  // get rid of undefined values in JSON
+                  // eslint-disable-next-line unicorn/prefer-structured-clone
+                  const existingFeature = JSON.parse(JSON.stringify(existing));
+                  if (!equal(featureSnapshot, existingFeature)) {
+                      await new Promise((resolve) => {
+                          session.queueDialog((doneCallback) => [
+                              DuplicateFeatureDialog,
+                              {
+                                  featureSnapshot,
+                                  existingFeature,
+                                  assemblyName,
+                                  changeManager: apolloDataStore.changeManager,
+                                  handleClose: () => {
+                                      doneCallback();
+                                      resolve();
+                                  },
+                              },
+                          ]);
+                      });
+                  }
+              }
+          }
+      }
+  }
+
   /* eslint-disable @typescript-eslint/no-unnecessary-condition */
   /* eslint-disable @typescript-eslint/no-unsafe-assignment */
   function extendSession(pluginManager, sessionModel) {
@@ -36651,8 +37022,7 @@
                       for (const block of dynamicBlocks.contentBlocks) {
                           const { assemblyName, end, refName, start } = block;
                           const assembly = self.apolloDataStore.assemblies.get(assemblyName);
-                          if (assembly &&
-                              assembly.backendDriverType === 'CollaborationServerDriver') {
+                          if (assembly?.backendDriverType === 'CollaborationServerDriver') {
                               locations.push({ assemblyName, refName, start, end });
                           }
                       }
@@ -36711,8 +37081,8 @@
                           for (const block of dynamicBlocks.contentBlocks) {
                               const { assemblyName, end, refName, start } = block;
                               const assembly = self.apolloDataStore.assemblies.get(assemblyName);
-                              if (assembly &&
-                                  assembly.backendDriverType === 'CollaborationServerDriver') {
+                              if (assembly?.backendDriverType ===
+                                  'CollaborationServerDriver') {
                                   locations.push({ assemblyName, refName, start, end });
                               }
                           }
@@ -36832,6 +37202,37 @@
           beforeDestroy() {
               self.abortController.abort(new DOMException('Clean up Apollo session', 'AbortError'));
           },
+      }))
+          .actions((self) => ({
+          async afterCreate() {
+              if (util$1.isElectron) {
+                  return;
+              }
+              const url = new URL(globalThis.location.href);
+              const apolloFeatures = url.searchParams.get('apolloFeatures');
+              if (!apolloFeatures) {
+                  return;
+              }
+              const { assemblyManager } = self;
+              await handleApolloFeaturesUrlParam(apolloFeatures, self.apolloDataStore, assemblyManager, self);
+              await new Promise((resolve) => setTimeout(resolve, 2000));
+              const updatedURL = new URL(globalThis.location.href);
+              updatedURL.searchParams.delete('apolloFeatures');
+              globalThis.history.replaceState(null, '', updatedURL.toString());
+          },
+          afterAttach() {
+              mobxStateTree.addDisposer(self, mobx.autorun((reaction) => {
+                  const { focusedViewId, activeWidgets } = self;
+                  if (!(focusedViewId && activeWidgets)) {
+                      return;
+                  }
+                  const trackSelector = activeWidgets.get('hierarchicalTrackSelector');
+                  // @ts-expect-error Don't have type for track selector
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                  trackSelector?.setView(focusedViewId);
+                  reaction.dispose();
+              }));
+          },
       }))
           .views((self) => {
           const superTrackActions = self
@@ -36963,7 +37364,6 @@
   }
 
   /* eslint-disable @typescript-eslint/unbound-method */
-  /* eslint-disable @typescript-eslint/no-unnecessary-condition */
   /* eslint-disable @typescript-eslint/no-misused-promises */
   /* eslint-disable @typescript-eslint/no-explicit-any */
   function isApolloMessageData(data) {
@@ -37151,10 +37551,10 @@
           });
           if (!inWebWorker) {
               pluginManager.addToExtensionPoint('Core-extendWorker', (handle) => {
-                  if (!('on' in handle && handle.on)) {
+                  if (!('on' in handle.client && handle.client.on)) {
                       return handle;
                   }
-                  handle.on('apollo', async (event) => {
+                  handle.client.on('apollo', async (event) => {
                       if (!isApolloMessageData(event)) {
                           return;
                       }
@@ -37172,7 +37572,7 @@
                                   break;
                               }
                               const { seq: sequence } = await backendDriver.getSequence(region);
-                              handle.workers[0].postMessage({
+                              handle.worker.postMessage({
                                   apollo,
                                   messageId,
                                   sequence,
@@ -37190,7 +37590,7 @@
                                   break;
                               }
                               const regions = await backendDriver.getRegions(assembly);
-                              handle.workers[0].postMessage({
+                              handle.worker.postMessage({
                                   apollo,
                                   messageId,
                                   regions,
@@ -37208,7 +37608,7 @@
                                   break;
                               }
                               const refNameAliases = await backendDriver.getRefNameAliases(assembly);
-                              handle.workers[0].postMessage({
+                              handle.worker.postMessage({
                                   apollo,
                                   messageId,
                                   refNameAliases,