@teselagen/ove 0.7.30-beta.2 → 0.7.30

package/src/redux/sequenceData/upsertDeleteActionGenerator.js

@@ -1,5 +1,5 @@
 import omit from "lodash/omit";
-import { nanoid } from "nanoid";
+import uuid from "shortid";
 
 // ------------------------------------
 // Reducer
@@ -10,7 +10,7 @@ export default function upsertDeleteActionGenerator(
 ) {
   return {
     [upsertAction]: (state, payload) => {
-      const idToUse = payload.id || nanoid();
+      const idToUse = payload.id || uuid();
       return {
         ...state,
         [idToUse]: { ...(state[idToUse] || {}), ...payload, id: idToUse }

package/src/selectors/cutsitesSelector.js

@@ -1,4 +1,4 @@
-import { nanoid } from "nanoid";
+import shortid from "shortid";
 import circularSelector from "./circularSelector";
 import sequenceSelector from "./sequenceSelector";
 import restrictionEnzymesSelector from "./restrictionEnzymesSelector";
@@ -20,7 +20,7 @@ function cutsitesSelector(sequence, circular, enzymeList, cutsiteLabelColors) {
     const cutsitesForEnzyme = cutsitesByName[enzymeName];
     cutsitesForEnzyme.forEach(function (cutsite) {
       const numberOfCuts = cutsitesByName[enzymeName].length;
-      const uniqueId = nanoid();
+      const uniqueId = shortid();
       cutsite.id = uniqueId;
       cutsite.numberOfCuts = numberOfCuts;
       cutsite.annotationType = "cutsite";

package/src/selectors/translationsSelector.js

@@ -1,5 +1,5 @@
 import { reduce } from "lodash-es";
-import { nanoid } from "nanoid";
+import uuid from "shortid";
 import sequenceSelector from "./sequenceSelector";
 import orfsSelector from "./orfsSelector";
 import { createSelector } from "reselect";
@@ -28,7 +28,7 @@ function translationsSelector(
   const translationsToPass = {
     ...translationSearchMatches.reduce((acc, match) => {
       if (!match) return acc;
-      const id = match.id || nanoid();
+      const id = match.id || uuid();
       acc[id] = {
         ...match,
         id,
@@ -79,7 +79,7 @@ function translationsSelector(
       (acc, isActive, frameName) => {
         const frameOffset = Number(frameName);
         if (isActive) {
-          const id = nanoid();
+          const id = uuid();
           acc[id] = {
             id,
             start:

package/src/utils/cleanSequenceData_DEPRECATED/arrayToObjWithIds.js

@@ -1,6 +1,6 @@
 //helper function to make sure any arrays coming in
 
-import { nanoid } from "nanoid";
+import shortid from "shortid";
 
 //get converted to objects with unique ids
 export default function arrayToObjWithIds(array) {
@@ -8,7 +8,7 @@ export default function arrayToObjWithIds(array) {
   array.forEach(function (item) {
     const newItem = {
       ...item,
-      id: item.id || nanoid()
+      id: item.id || shortid()
     };
     newObj[newItem.id] = newItem;
   });

package/src/withEditorInteractions/index.js

@@ -4,6 +4,7 @@ import {
   getAminoAcidStringFromSequenceString
 } from "@teselagen/sequence-utils";
 import { getSequenceWithinRange } from "@teselagen/range-utils";
+import Clipboard from "clipboard";
 import { compose } from "redux";
 import {
   getReverseComplementSequenceAndAnnotations,
@@ -258,7 +259,8 @@ function VectorInteractionHOC(Component /* options */) {
       e.preventDefault();
     };
 
-    handleCutOrCopy = isCut => async e => {
+    handleCutOrCopy = _isCut => async e => {
+      const isCut = _isCut || this.isCut || false;
       e.preventDefault();
       const {
         onCopy = noop,
@@ -313,16 +315,9 @@ function VectorInteractionHOC(Component /* options */) {
             : seqData.sequence;
 
       seqData.textToCopy = textToCopy;
-      await navigator.clipboard.writeText(textToCopy);
-      // application/json is not supported by clipboard api on browser
-      // await navigator.clipboard.write([
-      //   new ClipboardItem({
-      //     "application/json": new Blob([JSON.stringify(seqData)], {
-      //       type: "application/json"
-      //     }),
-      //     "text/plain": new Blob([textToCopy], { type: "text/plain" })
-      //   })
-      // ]);
+      e.clipboardData.setData("text/plain", textToCopy);
+      e.clipboardData.setData("application/json", JSON.stringify(seqData));
+      e.preventDefault();
 
       if (isCut && !(readOnly || disableBpEditing) && !disableBpEditing) {
         this.handleDnaDelete(false);
@@ -337,6 +332,8 @@ function VectorInteractionHOC(Component /* options */) {
       } else {
         onCopy(e, seqData, this.props);
       }
+      document.body.removeEventListener("cut", this.handleCut);
+      document.body.removeEventListener("copy", this.handleCopy);
       window.toastr.success(
         `Selection ${
           isCut && !(readOnly || disableBpEditing) && !disableBpEditing
@@ -518,14 +515,11 @@ function VectorInteractionHOC(Component /* options */) {
     };
 
     annotationClicked = ({ event, annotation }) => {
+      if (event.target) {
+        event.target?.closest(".veVectorInteractionWrapper")?.focus();
+      }
       event.preventDefault && event.preventDefault();
       event.stopPropagation && event.stopPropagation();
-      // if (hoveredAnnEasyStore.selectedAnn?.id === annotation?.id) {
-      //   hoveredAnnEasyStore.selectedAnn = undefined;
-      //   hoveredAnnEasyStore.hoveredAnn = undefined;
-      // } else {
-      //   hoveredAnnEasyStore.selectedAnn = annotation;
-      // }
 
       const {
         annotationSelect,
@@ -608,51 +602,67 @@ function VectorInteractionHOC(Component /* options */) {
       const { sequenceData, readOnly, disableBpEditing, selectionLayer } =
         this.props;
       const { isProtein } = sequenceData;
-      const makeTextCopyable = transformFunc => {
-        return async e => {
-          const { editorName, store } = this.props;
-          const { sequenceData, copyOptions, selectionLayer } =
-            store.getState().VectorEditor[editorName];
+      // Add the appropriate listener
+      document.body.addEventListener("copy", this.handleCopy, { once: true });
+      document.body.addEventListener("cut", this.handleCut, { once: true });
 
-          const selectedSeqData = getSequenceDataBetweenRange(
-            sequenceData,
-            getSelFromWrappedAddon(
-              selectionLayer,
-              sequenceData.sequence.length
-            ),
-            {
-              excludePartial: {
-                features: !copyOptions.partialFeatures,
-                parts: !copyOptions.partialParts
-              },
-              exclude: {
-                features: !copyOptions.features,
-                parts: !copyOptions.parts
+      const makeTextCopyable = (transformFunc, className, action = "copy") => {
+        return new Clipboard(`.${className}`, {
+          action: () => action,
+          text: () => {
+            this.isCut = action === "cut";
+            const { editorName, store } = this.props;
+            const { sequenceData, copyOptions, selectionLayer } =
+              store.getState().VectorEditor[editorName];
+
+            const selectedSeqData = getSequenceDataBetweenRange(
+              sequenceData,
+              getSelFromWrappedAddon(
+                selectionLayer,
+                sequenceData.sequence.length
+              ),
+              {
+                excludePartial: {
+                  features: !copyOptions.partialFeatures,
+                  parts: !copyOptions.partialParts
+                },
+                exclude: {
+                  features: !copyOptions.features,
+                  parts: !copyOptions.parts
+                }
               }
-            }
-          );
-          const sequenceDataToCopy = transformFunc(
-            selectedSeqData,
-            sequenceData
-          );
-          this.sequenceDataToCopy = sequenceDataToCopy;
+            );
+            const sequenceDataToCopy = transformFunc(
+              selectedSeqData,
+              sequenceData
+            );
+            this.sequenceDataToCopy = sequenceDataToCopy;
 
-          if (window.Cypress) {
-            window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
-            window.Cypress.seqDataToCopy = sequenceDataToCopy;
+            if (window.Cypress) {
+              window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
+              window.Cypress.seqDataToCopy = sequenceDataToCopy;
+            }
+            return sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
           }
-          this.handleCopy(e);
-        };
+        });
       };
       const aaCopy = {
         text: "Copy AA Sequence",
         className: "openVeCopyAA",
-        onClick: makeTextCopyable(selectedSeqData => ({
-          ...selectedSeqData,
-          textToCopy: isProtein
-            ? selectedSeqData.proteinSequence.toUpperCase()
-            : getAminoAcidStringFromSequenceString(selectedSeqData.sequence)
-        }))
+        willUnmount: () => {
+          this.openVeCopyAA && this.openVeCopyAA.destroy();
+        },
+        didMount: ({ className }) => {
+          this.openVeCopyAA = makeTextCopyable(selectedSeqData => {
+            const textToCopy = isProtein
+              ? selectedSeqData.proteinSequence.toUpperCase()
+              : getAminoAcidStringFromSequenceString(selectedSeqData.sequence);
+            return {
+              ...selectedSeqData,
+              textToCopy
+            };
+          }, className);
+        }
       };
       return [
         ...(readOnly || disableBpEditing
@@ -665,7 +675,19 @@ function VectorInteractionHOC(Component /* options */) {
               {
                 text: "Cut",
                 className: "openVeCut",
-                onClick: this.handleCut
+                willUnmount: () => {
+                  this.openVeCut && this.openVeCut.destroy();
+                },
+                didMount: ({ className }) => {
+                  this.openVeCut = makeTextCopyable(
+                    s => ({
+                      ...s,
+                      textToCopy: isProtein ? s.proteinSequence : s.sequence
+                    }),
+                    className,
+                    "cut"
+                  );
+                }
               }
             ]),
         {
@@ -678,45 +700,80 @@ function VectorInteractionHOC(Component /* options */) {
             {
               text: isProtein ? "Copy DNA Bps" : "Copy",
               className: "openVeCopy2",
-              onClick: makeTextCopyable(s => ({
-                ...s,
-                textToCopy: s.sequence
-              }))
+              willUnmount: () => {
+                this.openVeCopy2 && this.openVeCopy2.destroy();
+              },
+              didMount: ({ className }) => {
+                this.openVeCopy2 = makeTextCopyable(
+                  s => ({ ...s, textToCopy: s.sequence }),
+                  className
+                );
+              }
             },
 
             {
               text: "Copy Genbank For Selection",
               className: "openVeCopyGenbankForSelection",
-              onClick: makeTextCopyable(getGenbankFromSelection)
+              willUnmount: () => {
+                this.openVeCopyGenbankForSelection &&
+                  this.openVeCopyGenbankForSelection.destroy();
+              },
+              didMount: ({ className }) => {
+                this.openVeCopyGenbankForSelection = makeTextCopyable(
+                  getGenbankFromSelection,
+                  className
+                );
+              }
             },
             {
               text: isProtein
                 ? "Copy Reverse Complement DNA Bps"
                 : "Copy Reverse Complement",
               className: "openVeCopyReverse",
-              onClick: makeTextCopyable(
-                getReverseComplementSequenceAndAnnotations
-              )
+              willUnmount: () => {
+                this.openVeCopyReverse && this.openVeCopyReverse.destroy();
+              },
+              didMount: ({ className }) => {
+                this.openVeCopyReverse = makeTextCopyable(
+                  getReverseComplementSequenceAndAnnotations,
+                  className
+                );
+              }
             },
             ...(isProtein ? [] : [aaCopy]),
             {
               text: "Copy Reverse Complement AA Sequence",
               className: "openVeCopyAAReverse",
-              onClick: makeTextCopyable(selectedSeqData => {
-                const revSeqData =
-                  getReverseComplementSequenceAndAnnotations(selectedSeqData);
-                return {
-                  ...revSeqData,
-                  textToCopy: isProtein
+              willUnmount: () => {
+                this.openVeCopyAAReverse && this.openVeCopyAAReverse.destroy();
+              },
+              didMount: ({ className }) => {
+                this.openVeCopyAAReverse = makeTextCopyable(selectedSeqData => {
+                  const revSeqData =
+                    getReverseComplementSequenceAndAnnotations(selectedSeqData);
+                  const textToCopy = isProtein
                     ? revSeqData.proteinSequence.toUpperCase()
-                    : getAminoAcidStringFromSequenceString(revSeqData.sequence)
-                };
-              })
+                    : getAminoAcidStringFromSequenceString(revSeqData.sequence);
+                  return {
+                    ...revSeqData,
+                    textToCopy
+                  };
+                }, className);
+              }
             },
             {
               text: isProtein ? "Copy Complement DNA Bps" : "Copy Complement",
               className: "openVeCopyComplement",
-              onClick: makeTextCopyable(getComplementSequenceAndAnnotations)
+              willUnmount: () => {
+                this.openVeCopyComplement &&
+                  this.openVeCopyComplement.destroy();
+              },
+              didMount: ({ className }) => {
+                this.openVeCopyComplement = makeTextCopyable(
+                  getComplementSequenceAndAnnotations,
+                  className
+                );
+              }
             },
             copyOptionsMenu
           ]
@@ -753,10 +810,14 @@ function VectorInteractionHOC(Component /* options */) {
     };
     enhanceRightClickAction = (action, key) => {
       return opts => {
-        const lastFocusedEl = document.activeElement;
         const { rightClickOverrides = {} } = this.props;
         const items = action(opts);
         const e = (items && items._event) || opts.event || opts;
+        if (e.target) {
+          e.target?.closest(".veVectorInteractionWrapper")?.focus();
+        }
+        const lastFocusedEl = document.activeElement;
+
         e.preventDefault && e.preventDefault();
         e.stopPropagation && e.stopPropagation();
         //override hook here
@@ -766,15 +827,7 @@ function VectorInteractionHOC(Component /* options */) {
           [this.commandEnhancer],
           e,
           () => {
-            if (
-              lastFocusedEl &&
-              document.activeElement &&
-              (document.activeElement.classList.contains(
-                "bp3-popover-enter-done"
-              ) ||
-                (document.activeElement.type === "textarea" && //this is the clipboard textarea created by clipboardjs
-                  document.activeElement.offsetLeft === -9999))
-            ) {
+            if (lastFocusedEl) {
               lastFocusedEl.focus();
             }
           },

package/src/withEditorProps/index.js

@@ -27,7 +27,7 @@ import {
   invertRange,
   normalizeRange
 } from "@teselagen/range-utils";
-import { nanoid } from "nanoid";
+import shortid from "shortid";
 
 import addMetaToActionCreators from "../redux/utils/addMetaToActionCreators";
 import { actions, editorReducer } from "../redux";
@@ -268,7 +268,7 @@ export const importSequenceFromFile =
       }
 
       if (seqData) {
-        seqData.stateTrackingId = nanoid();
+        seqData.stateTrackingId = shortid();
         updateEditor(
           {
             getState: () => ({ VectorEditor: { [props.editorName]: props } }),

package/fileUtils.d.ts

@@ -1,12 +0,0 @@
-export const allowedCsvFileTypes: string[];
-export function isZipFile(file: any): boolean;
-export function getExt(file: any): any;
-export function isExcelFile(file: any): boolean;
-export function isCsvFile(file: any): boolean;
-export function isTextFile(file: any): boolean;
-export function parseCsvFile(csvFile: any, parserOptions?: {}): Promise<any>;
-export function parseCsvString(csvString: any, parserOptions?: {}): void;
-export function cleanCommaSeparatedCell(cellData: any): any;
-export function cleanCsvExport(rows: any): any;
-export function validateCSVRequiredHeaders(fields: any, requiredHeaders: any, filename: any): string | undefined;
-export function validateCSVRow(row: any, requiredHeaders: any, index: any): string | undefined;