@teselagen/ove 0.7.35 → 0.7.38

package/README.md

@@ -713,6 +713,6 @@ you can either add your test to an existing cypress file or make a new test file
 
 once you're satisfied, make a pull request back to tg-oss and mention @tnrich
 
-```
+## Running unit tests
 
-```
+Run `bun test` from the root of the repo to execute all unit tests.

package/index.cjs.js

@@ -83139,7 +83139,7 @@ const proteinAlphabet = {
     mass: 0
   }
 };
-const threeLetterSequenceStringToAminoAcidMap = {
+const initThreeLetterSequenceStringToAminoAcidMap = {
   gct: proteinAlphabet.A,
   gcc: proteinAlphabet.A,
   gca: proteinAlphabet.A,
@@ -83238,9 +83238,74 @@ const threeLetterSequenceStringToAminoAcidMap = {
   taa: proteinAlphabet["*"],
   tag: proteinAlphabet["*"],
   tga: proteinAlphabet["*"],
+  uaa: proteinAlphabet["*"],
+  uag: proteinAlphabet["*"],
+  uga: proteinAlphabet["*"],
   "...": proteinAlphabet["."],
   "---": proteinAlphabet["-"]
 };
+const IUPAC = {
+  A: ["A"],
+  C: ["C"],
+  G: ["G"],
+  T: ["T"],
+  U: ["U"],
+  R: ["A", "G"],
+  Y: ["C", "T", "U"],
+  K: ["G", "T", "U"],
+  M: ["A", "C"],
+  S: ["G", "C"],
+  W: ["A", "T", "U"],
+  B: ["C", "G", "T", "U"],
+  D: ["A", "G", "T", "U"],
+  H: ["A", "C", "T", "U"],
+  V: ["A", "C", "G"],
+  N: ["A", "C", "G", "T", "U"],
+  X: ["A", "C", "G", "T", "U"]
+};
+function expandAndResolve(threeLetterCodon) {
+  var _a2, _b2;
+  const chars = threeLetterCodon.toUpperCase().split("");
+  const picks = chars.map((c2) => IUPAC[c2] || [c2]);
+  let allPossibleThreeLetterCodons = [""];
+  for (const set6 of picks) {
+    const next = [];
+    for (const prefix2 of allPossibleThreeLetterCodons) for (const b3 of set6) next.push(prefix2 + b3);
+    allPossibleThreeLetterCodons = next;
+  }
+  let foundAminoAcid = null;
+  for (const codon of allPossibleThreeLetterCodons) {
+    const lowerCodon = codon.toLowerCase();
+    const aminoAcidObj = (_b2 = (_a2 = initThreeLetterSequenceStringToAminoAcidMap[lowerCodon]) != null ? _a2 : initThreeLetterSequenceStringToAminoAcidMap[lowerCodon.replace(/u/g, "t")]) != null ? _b2 : initThreeLetterSequenceStringToAminoAcidMap[lowerCodon.replace(/t/g, "u")];
+    if (aminoAcidObj) {
+      if (!foundAminoAcid) {
+        foundAminoAcid = aminoAcidObj;
+      } else if (foundAminoAcid.value !== aminoAcidObj.value) {
+        return null;
+      }
+    } else {
+      return null;
+    }
+  }
+  return foundAminoAcid;
+}
+__name(expandAndResolve, "expandAndResolve");
+function getCodonToAminoAcidMap() {
+  const map3 = initThreeLetterSequenceStringToAminoAcidMap;
+  const codes = Object.keys(IUPAC);
+  for (const a2 of codes)
+    for (const b3 of codes)
+      for (const c2 of codes) {
+        const codon = a2 + b3 + c2;
+        const lowerCodon = codon.toLowerCase();
+        if (map3[lowerCodon]) continue;
+        const aminoAcidObj = expandAndResolve(codon);
+        if (aminoAcidObj) map3[lowerCodon] = aminoAcidObj;
+      }
+  return map3;
+}
+__name(getCodonToAminoAcidMap, "getCodonToAminoAcidMap");
+const threeLetterSequenceStringToAminoAcidMap = getCodonToAminoAcidMap();
 const degenerateDnaToAminoAcidMap = invert(aminoAcidToDegenerateDnaMap);
 function getAminoAcidFromSequenceTriplet(sequenceString) {
   sequenceString = sequenceString.toLowerCase();
@@ -83353,7 +83418,7 @@ function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optio
   const aminoAcidDataForEachBaseOfDNA = [];
   for (let index2 = 0; index2 < sequenceStringLength; index2 += 3) {
     let aminoAcid;
-    const aminoAcidIndex = index2 / 3;
+    const aminoAcidIndex = Math.floor(index2 / 3);
     let codonPositionsInCDS;
     let basesRead;
     if (isProteinSequence) {
@@ -124895,7 +124960,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.7.34";
+const version = "0.7.37";
 const packageJson = {
   version
 };
@@ -130061,6 +130126,8 @@ function VectorInteractionHOC(Component) {
             [this.commandEnhancer],
             e,
             () => {
+              document.body.removeEventListener("cut", this.handleCut);
+              document.body.removeEventListener("copy", this.handleCopy);
               if (lastFocusedEl) {
                 lastFocusedEl.focus();
               }
@@ -150179,19 +150246,13 @@ const _FindBar = class _FindBar extends React.Component {
           minWidth: 300
         } : {
           position: "fixed",
-          top: 0,
+          top: 120,
           right: 25,
           padding: 10,
           display: "flex",
-          alignItems: "center",
+          alignItems: "start",
           paddingBottom: 5,
-          background: "white",
-          zIndex: "20000",
-          borderBottom: "1px solid lightgrey",
-          borderLeft: "1px solid lightgrey",
-          borderRight: "1px solid lightgrey",
-          borderBottomLeftRadius: "5px",
-          borderBottomRightRadius: "5px"
+          zIndex: 2e4
         },
         className: "veFindBar"
       },
@@ -150206,7 +150267,10 @@ const _FindBar = class _FindBar extends React.Component {
               autoFocus: true,
               style: __spreadValues({
                 resize: "vertical"
-              }, !isInline && { width: 350, minHeight: 70 }),
+              }, !isInline && {
+                width: 350,
+                height: 190
+              }),
               className: "tg-find-tool-input",
               inputRef: /* @__PURE__ */ __name((n2) => {
                 if (n2) this.inputEl = n2;
@@ -150252,12 +150316,10 @@ const _FindBar = class _FindBar extends React.Component {
         "div",
         {
           style: {
+            marginLeft: 10,
             display: "flex",
-            maxWidth: "400px",
-            flexWrap: "wrap",
-            justifyContent: "space-around",
-            alignItems: "stretch",
-            height: "76px"
+            flexDirection: "column",
+            gap: 5
           }
         },
         rightEl,
@@ -150267,7 +150329,7 @@ const _FindBar = class _FindBar extends React.Component {
         core.Button,
         {
           minimal: true,
-          style: { position: "absolute", bottom: 0, right: -10 },
+          style: { position: "absolute", bottom: 0, right: 0 },
           onClick: toggleFindTool2,
           icon: "cross"
         }

package/index.es.js

@@ -83121,7 +83121,7 @@ const proteinAlphabet = {
     mass: 0
   }
 };
-const threeLetterSequenceStringToAminoAcidMap = {
+const initThreeLetterSequenceStringToAminoAcidMap = {
   gct: proteinAlphabet.A,
   gcc: proteinAlphabet.A,
   gca: proteinAlphabet.A,
@@ -83220,9 +83220,74 @@ const threeLetterSequenceStringToAminoAcidMap = {
   taa: proteinAlphabet["*"],
   tag: proteinAlphabet["*"],
   tga: proteinAlphabet["*"],
+  uaa: proteinAlphabet["*"],
+  uag: proteinAlphabet["*"],
+  uga: proteinAlphabet["*"],
   "...": proteinAlphabet["."],
   "---": proteinAlphabet["-"]
 };
+const IUPAC = {
+  A: ["A"],
+  C: ["C"],
+  G: ["G"],
+  T: ["T"],
+  U: ["U"],
+  R: ["A", "G"],
+  Y: ["C", "T", "U"],
+  K: ["G", "T", "U"],
+  M: ["A", "C"],
+  S: ["G", "C"],
+  W: ["A", "T", "U"],
+  B: ["C", "G", "T", "U"],
+  D: ["A", "G", "T", "U"],
+  H: ["A", "C", "T", "U"],
+  V: ["A", "C", "G"],
+  N: ["A", "C", "G", "T", "U"],
+  X: ["A", "C", "G", "T", "U"]
+};
+function expandAndResolve(threeLetterCodon) {
+  var _a2, _b2;
+  const chars = threeLetterCodon.toUpperCase().split("");
+  const picks = chars.map((c2) => IUPAC[c2] || [c2]);
+  let allPossibleThreeLetterCodons = [""];
+  for (const set6 of picks) {
+    const next = [];
+    for (const prefix2 of allPossibleThreeLetterCodons) for (const b3 of set6) next.push(prefix2 + b3);
+    allPossibleThreeLetterCodons = next;
+  }
+  let foundAminoAcid = null;
+  for (const codon of allPossibleThreeLetterCodons) {
+    const lowerCodon = codon.toLowerCase();
+    const aminoAcidObj = (_b2 = (_a2 = initThreeLetterSequenceStringToAminoAcidMap[lowerCodon]) != null ? _a2 : initThreeLetterSequenceStringToAminoAcidMap[lowerCodon.replace(/u/g, "t")]) != null ? _b2 : initThreeLetterSequenceStringToAminoAcidMap[lowerCodon.replace(/t/g, "u")];
+    if (aminoAcidObj) {
+      if (!foundAminoAcid) {
+        foundAminoAcid = aminoAcidObj;
+      } else if (foundAminoAcid.value !== aminoAcidObj.value) {
+        return null;
+      }
+    } else {
+      return null;
+    }
+  }
+  return foundAminoAcid;
+}
+__name(expandAndResolve, "expandAndResolve");
+function getCodonToAminoAcidMap() {
+  const map3 = initThreeLetterSequenceStringToAminoAcidMap;
+  const codes = Object.keys(IUPAC);
+  for (const a2 of codes)
+    for (const b3 of codes)
+      for (const c2 of codes) {
+        const codon = a2 + b3 + c2;
+        const lowerCodon = codon.toLowerCase();
+        if (map3[lowerCodon]) continue;
+        const aminoAcidObj = expandAndResolve(codon);
+        if (aminoAcidObj) map3[lowerCodon] = aminoAcidObj;
+      }
+  return map3;
+}
+__name(getCodonToAminoAcidMap, "getCodonToAminoAcidMap");
+const threeLetterSequenceStringToAminoAcidMap = getCodonToAminoAcidMap();
 const degenerateDnaToAminoAcidMap = invert(aminoAcidToDegenerateDnaMap);
 function getAminoAcidFromSequenceTriplet(sequenceString) {
   sequenceString = sequenceString.toLowerCase();
@@ -83335,7 +83400,7 @@ function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optio
   const aminoAcidDataForEachBaseOfDNA = [];
   for (let index2 = 0; index2 < sequenceStringLength; index2 += 3) {
     let aminoAcid;
-    const aminoAcidIndex = index2 / 3;
+    const aminoAcidIndex = Math.floor(index2 / 3);
     let codonPositionsInCDS;
     let basesRead;
     if (isProteinSequence) {
@@ -124877,7 +124942,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.7.34";
+const version = "0.7.37";
 const packageJson = {
   version
 };
@@ -130043,6 +130108,8 @@ function VectorInteractionHOC(Component2) {
             [this.commandEnhancer],
             e,
             () => {
+              document.body.removeEventListener("cut", this.handleCut);
+              document.body.removeEventListener("copy", this.handleCopy);
               if (lastFocusedEl) {
                 lastFocusedEl.focus();
               }
@@ -150161,19 +150228,13 @@ const _FindBar = class _FindBar extends React__default.Component {
           minWidth: 300
         } : {
           position: "fixed",
-          top: 0,
+          top: 120,
           right: 25,
           padding: 10,
           display: "flex",
-          alignItems: "center",
+          alignItems: "start",
           paddingBottom: 5,
-          background: "white",
-          zIndex: "20000",
-          borderBottom: "1px solid lightgrey",
-          borderLeft: "1px solid lightgrey",
-          borderRight: "1px solid lightgrey",
-          borderBottomLeftRadius: "5px",
-          borderBottomRightRadius: "5px"
+          zIndex: 2e4
         },
         className: "veFindBar"
       },
@@ -150188,7 +150249,10 @@ const _FindBar = class _FindBar extends React__default.Component {
               autoFocus: true,
               style: __spreadValues({
                 resize: "vertical"
-              }, !isInline && { width: 350, minHeight: 70 }),
+              }, !isInline && {
+                width: 350,
+                height: 190
+              }),
               className: "tg-find-tool-input",
               inputRef: /* @__PURE__ */ __name((n2) => {
                 if (n2) this.inputEl = n2;
@@ -150234,12 +150298,10 @@ const _FindBar = class _FindBar extends React__default.Component {
         "div",
         {
           style: {
+            marginLeft: 10,
             display: "flex",
-            maxWidth: "400px",
-            flexWrap: "wrap",
-            justifyContent: "space-around",
-            alignItems: "stretch",
-            height: "76px"
+            flexDirection: "column",
+            gap: 5
           }
         },
         rightEl,
@@ -150249,7 +150311,7 @@ const _FindBar = class _FindBar extends React__default.Component {
         Button,
         {
           minimal: true,
-          style: { position: "absolute", bottom: 0, right: -10 },
+          style: { position: "absolute", bottom: 0, right: 0 },
           onClick: toggleFindTool2,
           icon: "cross"
         }

package/index.umd.js

@@ -112042,7 +112042,7 @@ ${latestSubscriptionCallbackError.current.stack}
       mass: 0
     }
   };
-  const threeLetterSequenceStringToAminoAcidMap = {
+  const initThreeLetterSequenceStringToAminoAcidMap = {
     gct: proteinAlphabet.A,
     gcc: proteinAlphabet.A,
     gca: proteinAlphabet.A,
@@ -112141,9 +112141,74 @@ ${latestSubscriptionCallbackError.current.stack}
     taa: proteinAlphabet["*"],
     tag: proteinAlphabet["*"],
     tga: proteinAlphabet["*"],
+    uaa: proteinAlphabet["*"],
+    uag: proteinAlphabet["*"],
+    uga: proteinAlphabet["*"],
     "...": proteinAlphabet["."],
     "---": proteinAlphabet["-"]
   };
+  const IUPAC = {
+    A: ["A"],
+    C: ["C"],
+    G: ["G"],
+    T: ["T"],
+    U: ["U"],
+    R: ["A", "G"],
+    Y: ["C", "T", "U"],
+    K: ["G", "T", "U"],
+    M: ["A", "C"],
+    S: ["G", "C"],
+    W: ["A", "T", "U"],
+    B: ["C", "G", "T", "U"],
+    D: ["A", "G", "T", "U"],
+    H: ["A", "C", "T", "U"],
+    V: ["A", "C", "G"],
+    N: ["A", "C", "G", "T", "U"],
+    X: ["A", "C", "G", "T", "U"]
+  };
+  function expandAndResolve(threeLetterCodon) {
+    var _a2, _b2;
+    const chars2 = threeLetterCodon.toUpperCase().split("");
+    const picks = chars2.map((c2) => IUPAC[c2] || [c2]);
+    let allPossibleThreeLetterCodons = [""];
+    for (const set2 of picks) {
+      const next = [];
+      for (const prefix2 of allPossibleThreeLetterCodons) for (const b3 of set2) next.push(prefix2 + b3);
+      allPossibleThreeLetterCodons = next;
+    }
+    let foundAminoAcid = null;
+    for (const codon of allPossibleThreeLetterCodons) {
+      const lowerCodon = codon.toLowerCase();
+      const aminoAcidObj = (_b2 = (_a2 = initThreeLetterSequenceStringToAminoAcidMap[lowerCodon]) != null ? _a2 : initThreeLetterSequenceStringToAminoAcidMap[lowerCodon.replace(/u/g, "t")]) != null ? _b2 : initThreeLetterSequenceStringToAminoAcidMap[lowerCodon.replace(/t/g, "u")];
+      if (aminoAcidObj) {
+        if (!foundAminoAcid) {
+          foundAminoAcid = aminoAcidObj;
+        } else if (foundAminoAcid.value !== aminoAcidObj.value) {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    }
+    return foundAminoAcid;
+  }
+  __name(expandAndResolve, "expandAndResolve");
+  function getCodonToAminoAcidMap() {
+    const map2 = initThreeLetterSequenceStringToAminoAcidMap;
+    const codes = Object.keys(IUPAC);
+    for (const a2 of codes)
+      for (const b3 of codes)
+        for (const c2 of codes) {
+          const codon = a2 + b3 + c2;
+          const lowerCodon = codon.toLowerCase();
+          if (map2[lowerCodon]) continue;
+          const aminoAcidObj = expandAndResolve(codon);
+          if (aminoAcidObj) map2[lowerCodon] = aminoAcidObj;
+        }
+    return map2;
+  }
+  __name(getCodonToAminoAcidMap, "getCodonToAminoAcidMap");
+  const threeLetterSequenceStringToAminoAcidMap = getCodonToAminoAcidMap();
   const degenerateDnaToAminoAcidMap = invert(aminoAcidToDegenerateDnaMap);
   function getAminoAcidFromSequenceTriplet(sequenceString) {
     sequenceString = sequenceString.toLowerCase();
@@ -112256,7 +112321,7 @@ ${latestSubscriptionCallbackError.current.stack}
     const aminoAcidDataForEachBaseOfDNA = [];
     for (let index2 = 0; index2 < sequenceStringLength; index2 += 3) {
       let aminoAcid;
-      const aminoAcidIndex = index2 / 3;
+      const aminoAcidIndex = Math.floor(index2 / 3);
       let codonPositionsInCDS;
       let basesRead;
       if (isProteinSequence) {
@@ -152993,7 +153058,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.7.34";
+  const version = "0.7.37";
   const packageJson = {
     version
   };
@@ -156557,6 +156622,8 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
               [this.commandEnhancer],
               e2,
               () => {
+                document.body.removeEventListener("cut", this.handleCut);
+                document.body.removeEventListener("copy", this.handleCopy);
                 if (lastFocusedEl) {
                   lastFocusedEl.focus();
                 }
@@ -176675,19 +176742,13 @@ ${seqDataToCopy}\r
             minWidth: 300
           } : {
             position: "fixed",
-            top: 0,
+            top: 120,
             right: 25,
             padding: 10,
             display: "flex",
-            alignItems: "center",
+            alignItems: "start",
             paddingBottom: 5,
-            background: "white",
-            zIndex: "20000",
-            borderBottom: "1px solid lightgrey",
-            borderLeft: "1px solid lightgrey",
-            borderRight: "1px solid lightgrey",
-            borderBottomLeftRadius: "5px",
-            borderBottomRightRadius: "5px"
+            zIndex: 2e4
           },
           className: "veFindBar"
         },
@@ -176702,7 +176763,10 @@ ${seqDataToCopy}\r
                 autoFocus: true,
                 style: __spreadValues({
                   resize: "vertical"
-                }, !isInline && { width: 350, minHeight: 70 }),
+                }, !isInline && {
+                  width: 350,
+                  height: 190
+                }),
                 className: "tg-find-tool-input",
                 inputRef: /* @__PURE__ */ __name((n2) => {
                   if (n2) this.inputEl = n2;
@@ -176748,12 +176812,10 @@ ${seqDataToCopy}\r
           "div",
           {
             style: {
+              marginLeft: 10,
               display: "flex",
-              maxWidth: "400px",
-              flexWrap: "wrap",
-              justifyContent: "space-around",
-              alignItems: "stretch",
-              height: "76px"
+              flexDirection: "column",
+              gap: 5
             }
           },
           rightEl,
@@ -176763,7 +176825,7 @@ ${seqDataToCopy}\r
           Button,
           {
             minimal: true,
-            style: { position: "absolute", bottom: 0, right: -10 },
+            style: { position: "absolute", bottom: 0, right: 0 },
             onClick: toggleFindTool2,
             icon: "cross"
           }

package/ove.css

@@ -11520,22 +11520,30 @@ path.partWithSelectedTag {
   overflow: auto;
   max-height: 50vh;
 }
-/* .veFindBar {
-  z-index: 20000;
+.veFindBar {
+  background: #ffffff;
   border-bottom: 1px solid lightgrey;
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-} */
+}
+
 .veFindBar > .bp3-control {
   margin-bottom: 0px;
 }
 .veFindBar > * {
-  margin-right: 10px;
   width: fit-content;
 }
 
+.bp3-dark .veFindBar {
+  border-radius: 5px;
+  background: #30404d !important;
+  border-bottom: 1px solid #202b33 !important;
+  border-left: 1px solid #202b33 !important;
+  border-right: 1px solid #202b33 !important;
+}
+
 .ve-find-options-popover > * {
   margin: 10px 5px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.35",
+  "version": "0.7.38",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -19,7 +19,7 @@
     "@teselagen/range-utils": "0.3.13",
     "@teselagen/react-list": "0.8.18",
     "@teselagen/sequence-utils": "0.3.32",
-    "@teselagen/ui": "0.9.5",
+    "@teselagen/ui": "0.9.6",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",

package/src/FindBar/index.js

@@ -270,19 +270,13 @@ export class FindBar extends React.Component {
               }
             : {
                 position: "fixed",
-                top: 0,
+                top: 120,
                 right: 25,
                 padding: 10,
                 display: "flex",
-                alignItems: "center",
+                alignItems: "start",
                 paddingBottom: 5,
-                background: "white",
-                zIndex: "20000",
-                borderBottom: "1px solid lightgrey",
-                borderLeft: "1px solid lightgrey",
-                borderRight: "1px solid lightgrey",
-                borderBottomLeftRadius: "5px",
-                borderBottomRightRadius: "5px"
+                zIndex: 20000
               }
         }
         className="veFindBar"
@@ -295,7 +289,10 @@ export class FindBar extends React.Component {
               autoFocus
               style={{
                 resize: "vertical",
-                ...(!isInline && { width: 350, minHeight: 70 })
+                ...(!isInline && {
+                  width: 350,
+                  height: 190
+                })
               }}
               className="tg-find-tool-input"
               inputRef={n => {
@@ -347,12 +344,10 @@ export class FindBar extends React.Component {
         {!isInline && (
           <div
             style={{
+              marginLeft: 10,
               display: "flex",
-              maxWidth: "400px",
-              flexWrap: "wrap",
-              justifyContent: "space-around",
-              alignItems: "stretch",
-              height: "76px"
+              flexDirection: "column",
+              gap: 5
             }}
           >
             {rightEl}
@@ -362,7 +357,7 @@ export class FindBar extends React.Component {
         {!isInline && (
           <Button
             minimal
-            style={{ position: "absolute", bottom: 0, right: -10 }}
+            style={{ position: "absolute", bottom: 0, right: 0 }}
             onClick={toggleFindTool}
             icon="cross"
           />

package/src/FindBar/style.css

@@ -1,19 +1,27 @@
-/* .veFindBar {
-  z-index: 20000;
+.veFindBar {
+  background: #ffffff;
   border-bottom: 1px solid lightgrey;
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-} */
+}
+
 .veFindBar > .bp3-control {
   margin-bottom: 0px;
 }
 .veFindBar > * {
-  margin-right: 10px;
   width: fit-content;
 }
 
+.bp3-dark .veFindBar {
+  border-radius: 5px;
+  background: #30404d !important;
+  border-bottom: 1px solid #202b33 !important;
+  border-left: 1px solid #202b33 !important;
+  border-right: 1px solid #202b33 !important;
+}
+
 .ve-find-options-popover > * {
   margin: 10px 5px;
 }

package/src/withEditorInteractions/index.js

@@ -242,7 +242,11 @@ function VectorInteractionHOC(Component /* options */) {
         seqDataToInsert.proteinSequence = seqDataToInsert.sequence;
       }
 
-      if (maxInsertSize && (seqDataToInsert.proteinSequence || seqDataToInsert.sequence).length > maxInsertSize) {
+      if (
+        maxInsertSize &&
+        (seqDataToInsert.proteinSequence || seqDataToInsert.sequence).length >
+          maxInsertSize
+      ) {
         return window.toastr.error(
           `Sorry, the pasted sequence exceeds the maximum allowed length of ${maxInsertSize}`
         );
@@ -395,7 +399,7 @@ function VectorInteractionHOC(Component /* options */) {
         sequenceData = { sequence: "" },
         readOnly,
         disableBpEditing,
-        maxInsertSize,
+        maxInsertSize
         // updateSequenceData,
         // wrappedInsertSequenceDataAtPositionOrRange
         // handleInsert
@@ -611,6 +615,7 @@ function VectorInteractionHOC(Component /* options */) {
       const { sequenceData, readOnly, disableBpEditing, selectionLayer } =
         this.props;
       const { isProtein } = sequenceData;
+
       // Add the appropriate listener
       document.body.addEventListener("copy", this.handleCopy, { once: true });
       document.body.addEventListener("cut", this.handleCut, { once: true });
@@ -836,6 +841,8 @@ function VectorInteractionHOC(Component /* options */) {
           [this.commandEnhancer],
           e,
           () => {
+            document.body.removeEventListener("cut", this.handleCut);
+            document.body.removeEventListener("copy", this.handleCopy);
             if (lastFocusedEl) {
               lastFocusedEl.focus();
             }