@teselagen/ove 0.7.6-beta.3 → 0.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.6-beta.3",
+  "version": "0.7.6",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -12,10 +12,12 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.27",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.7.10-beta.3",
+    "@teselagen/ui": "0.7.10",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",
+    "@blueprintjs/core": "3.54.0",
+    "@blueprintjs/datetime": "^3.24.1",
     "@blueprintjs/icons": "3.33.0",
     "@blueprintjs/select": "3.18.11",
     "@dnd-kit/core": "^6.1.0",
@@ -69,6 +71,7 @@
     "react-dom": "^18.3.1",
     "react-draggable": "4.4.5",
     "react-dropzone": "^11.4.2",
+    "react-markdown": "9.0.1",
     "react-measure": "^2.5.2",
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
@@ -80,6 +83,7 @@
     "redux-act": "^1.8.0",
     "redux-form": "^8.3.10",
     "redux-thunk": "2.4.1",
+    "remark-gfm": "^4.0.0",
     "reselect": "^4.1.7",
     "shortid": "^2.2.16",
     "tg-use-local-storage-state": "^16.0.3",

package/src/AlignmentView/index.js

@@ -4,7 +4,6 @@ import {
   Droppable,
   Draggable as DndDraggable
 } from "@hello-pangea/dnd";
-import ClipboardJS from "clipboard";
 import React from "react";
 import { connect } from "react-redux";
 import {
@@ -104,6 +103,7 @@ export class AlignmentView extends React.Component {
       this.handleAlignmentCopy
     );
   }
+
   getMaxLength = () => {
     const { alignmentTracks } = this.props;
     const { sequenceData = { sequence: "" }, alignmentData } =
@@ -175,6 +175,7 @@ export class AlignmentView extends React.Component {
     this.onShortcutCopy &&
       document.removeEventListener("keydown", this.handleAlignmentCopy);
   }
+
   handleAlignmentCopy = event => {
     if (
       event.key === "c" &&
@@ -196,6 +197,7 @@ export class AlignmentView extends React.Component {
       event.preventDefault();
     }
   };
+
   getAllAlignmentsFastaText = () => {
     const selectionLayer =
       this.props.store.getState().VectorEditor.__allEditorsOptions.alignments[
@@ -214,6 +216,7 @@ export class AlignmentView extends React.Component {
     });
     return seqDataOfAllTracksToCopy.join("");
   };
+
   state = {
     alignmentName: this.props.alignmentName,
     isTrackDragging: false,
@@ -222,6 +225,7 @@ export class AlignmentView extends React.Component {
     width: 0,
     nameDivWidth: 140
   };
+
   easyStore = store({
     selectionLayer: { start: -1, end: -1 },
     caretPosition: -1,
@@ -280,6 +284,7 @@ export class AlignmentView extends React.Component {
       }, 5000);
     }
   }
+
   componentDidMount() {
     const updateAlignmentSelection = newRangeOrCaret => {
       this.updateSelectionOrCaret(false, newRangeOrCaret, {
@@ -1194,6 +1199,44 @@ export class AlignmentView extends React.Component {
 
                             const alignmentData = track.alignmentData;
                             const { name } = alignmentData;
+
+                            const copySpecificAlignmentFasta = async () => {
+                              const { selectionLayer } =
+                                this.props.store.getState().VectorEditor
+                                  .__allEditorsOptions.alignments[
+                                  this.props.id
+                                ] || {};
+                              const seqDataToCopy = getSequenceDataBetweenRange(
+                                alignmentData,
+                                selectionLayer
+                              ).sequence;
+                              const seqDataToCopyAsFasta = `>${name}\r\n${seqDataToCopy}\r\n`;
+                              await navigator.clipboard.writeText(
+                                seqDataToCopyAsFasta
+                              );
+                            };
+
+                            const copySpecificAlignment = async () => {
+                              const { selectionLayer } =
+                                this.props.store.getState().VectorEditor
+                                  .__allEditorsOptions.alignments[
+                                  this.props.id
+                                ] || {};
+                              const seqDataToCopy = getSequenceDataBetweenRange(
+                                alignmentData,
+                                selectionLayer
+                              ).sequence;
+                              await navigator.clipboard.writeText(
+                                seqDataToCopy
+                              );
+                            };
+
+                            const getAllAlignmentsFastaText = async () => {
+                              await navigator.clipboard.writeText(
+                                this.getAllAlignmentsFastaText()
+                              );
+                            };
+
                             showContextMenu(
                               [
                                 ...(additionalSelectionLayerRightClickedOptions
@@ -1207,24 +1250,8 @@ export class AlignmentView extends React.Component {
                                   className:
                                     "copyAllAlignmentsFastaClipboardHelper",
                                   hotkey: "cmd+c",
-                                  willUnmount: () => {
-                                    this
-                                      .copyAllAlignmentsFastaClipboardHelper &&
-                                      this.copyAllAlignmentsFastaClipboardHelper.destroy();
-                                  },
-                                  didMount: () => {
-                                    this.copyAllAlignmentsFastaClipboardHelper =
-                                      new ClipboardJS(
-                                        `.copyAllAlignmentsFastaClipboardHelper`,
-                                        {
-                                          action: "copyAllAlignmentsFasta",
-                                          text: () => {
-                                            return this.getAllAlignmentsFastaText();
-                                          }
-                                        }
-                                      );
-                                  },
                                   onClick: () => {
+                                    getAllAlignmentsFastaText();
                                     window.toastr.success("Selection Copied");
                                   }
                                 },
@@ -1232,36 +1259,8 @@ export class AlignmentView extends React.Component {
                                   text: `Copy Selection of ${name} as Fasta`,
                                   className:
                                     "copySpecificAlignmentFastaClipboardHelper",
-                                  willUnmount: () => {
-                                    this
-                                      .copySpecificAlignmentFastaClipboardHelper &&
-                                      this.copySpecificAlignmentFastaClipboardHelper.destroy();
-                                  },
-                                  didMount: () => {
-                                    this.copySpecificAlignmentFastaClipboardHelper =
-                                      new ClipboardJS(
-                                        `.copySpecificAlignmentFastaClipboardHelper`,
-                                        {
-                                          action: "copySpecificAlignmentFasta",
-                                          text: () => {
-                                            const { selectionLayer } =
-                                              this.props.store.getState()
-                                                .VectorEditor
-                                                .__allEditorsOptions.alignments[
-                                                this.props.id
-                                              ] || {};
-                                            const seqDataToCopy =
-                                              getSequenceDataBetweenRange(
-                                                alignmentData,
-                                                selectionLayer
-                                              ).sequence;
-                                            const seqDataToCopyAsFasta = `>${name}\r\n${seqDataToCopy}\r\n`;
-                                            return seqDataToCopyAsFasta;
-                                          }
-                                        }
-                                      );
-                                  },
                                   onClick: () => {
+                                    copySpecificAlignmentFasta();
                                     window.toastr.success(
                                       "Selection Copied As Fasta"
                                     );
@@ -1271,35 +1270,8 @@ export class AlignmentView extends React.Component {
                                   text: `Copy Selection of ${name}`,
                                   className:
                                     "copySpecificAlignmentAsPlainClipboardHelper",
-                                  willUnmount: () => {
-                                    this
-                                      .copySpecificAlignmentAsPlainClipboardHelper &&
-                                      this.copySpecificAlignmentAsPlainClipboardHelper.destroy();
-                                  },
-                                  didMount: () => {
-                                    this.copySpecificAlignmentAsPlainClipboardHelper =
-                                      new ClipboardJS(
-                                        `.copySpecificAlignmentAsPlainClipboardHelper`,
-                                        {
-                                          action: "copySpecificAlignmentFasta",
-                                          text: () => {
-                                            const { selectionLayer } =
-                                              this.props.store.getState()
-                                                .VectorEditor
-                                                .__allEditorsOptions.alignments[
-                                                this.props.id
-                                              ] || {};
-                                            const seqDataToCopy =
-                                              getSequenceDataBetweenRange(
-                                                alignmentData,
-                                                selectionLayer
-                                              ).sequence;
-                                            return seqDataToCopy;
-                                          }
-                                        }
-                                      );
-                                  },
                                   onClick: () => {
+                                    copySpecificAlignment();
                                     window.toastr.success("Selection Copied");
                                   }
                                 }
@@ -1313,7 +1285,7 @@ export class AlignmentView extends React.Component {
                     sequenceLength={sequenceLength}
                     charWidth={this.getCharWidthInLinearView()}
                     row={{ start: 0, end: sequenceLength - 1 }}
-                  ></PerformantSelectionLayer>
+                  />
                   <PerformantCaret
                     leftMargin={this.state.nameDivWidth}
                     className="veAlignmentSelectionLayer"
@@ -1679,7 +1651,7 @@ export class AlignmentView extends React.Component {
                           sequenceLength={sequenceLength}
                           charWidth={this.getMinCharWidth(true)}
                           row={{ start: 0, end: sequenceLength - 1 }}
-                        ></PerformantSelectionLayer>
+                        />
                         <PerformantCaret
                           style={{
                             opacity: 0.2

package/src/withEditorInteractions/index.js

@@ -4,7 +4,6 @@ import {
   getAminoAcidStringFromSequenceString
 } from "@teselagen/sequence-utils";
 import { getSequenceWithinRange } from "@teselagen/range-utils";
-import ClipboardJS from "clipboard";
 import { compose } from "redux";
 import {
   getReverseComplementSequenceAndAnnotations,
@@ -93,6 +92,7 @@ function VectorInteractionHOC(Component /* options */) {
         return <ConnectedMenu {...props} {...p} />;
       };
     }
+
     componentWillUnmount() {
       this.combokeys && this.combokeys.detach();
     }
@@ -183,6 +183,7 @@ function VectorInteractionHOC(Component /* options */) {
         omitIcons: true
       });
     }
+
     updateSelectionOrCaret = (shiftHeld, newRangeOrCaret) => {
       const {
         selectionLayer,
@@ -257,7 +258,8 @@ function VectorInteractionHOC(Component /* options */) {
       e.preventDefault();
     };
 
-    handleCutOrCopy = isCut => e => {
+    handleCutOrCopy = isCut => async e => {
+      e.preventDefault();
       const {
         onCopy = noop,
         sequenceData,
@@ -303,7 +305,6 @@ function VectorInteractionHOC(Component /* options */) {
           }`
         );
 
-      const clipboardData = e.clipboardData;
       const textToCopy =
         (this.sequenceDataToCopy || {}).textToCopy !== undefined
           ? this.sequenceDataToCopy.textToCopy
@@ -312,9 +313,16 @@ function VectorInteractionHOC(Component /* options */) {
             : seqData.sequence;
 
       seqData.textToCopy = textToCopy;
-      clipboardData.setData("text/plain", textToCopy);
-      clipboardData.setData("application/json", JSON.stringify(seqData));
-      e.preventDefault();
+      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" })
+      //   })
+      // ]);
 
       if (isCut && !(readOnly || disableBpEditing) && !disableBpEditing) {
         this.handleDnaDelete(false);
@@ -326,10 +334,8 @@ function VectorInteractionHOC(Component /* options */) {
           }),
           this.props
         );
-        document.body.removeEventListener("cut", this.handleCut);
       } else {
         onCopy(e, seqData, this.props);
-        document.body.removeEventListener("copy", this.handleCopy);
       }
       window.toastr.success(
         `Selection ${
@@ -340,6 +346,7 @@ function VectorInteractionHOC(Component /* options */) {
       );
       this.sequenceDataToCopy = undefined;
     };
+
     handleCut = this.handleCutOrCopy(true);
 
     handleCopy = this.handleCutOrCopy();
@@ -358,6 +365,7 @@ function VectorInteractionHOC(Component /* options */) {
         }
       };
     };
+
     createDisableBpEditingMsg = () => {
       window.toastr.warning(
         typeof this.props.disableBpEditing === "string"
@@ -366,6 +374,7 @@ function VectorInteractionHOC(Component /* options */) {
         this.getDuplicateAction()
       );
     };
+
     createReadOnlyMsg = () => {
       window.toastr.warning(
         this.props.readOnly === "string"
@@ -486,6 +495,7 @@ function VectorInteractionHOC(Component /* options */) {
       //we only call caretPositionUpdate if we're actually changing something
       this.props.caretPositionUpdate(position);
     };
+
     selectionLayerUpdate = newSelection => {
       const { selectionLayer = { start: -1, end: -1 }, ignoreGapsOnHighlight } =
         this.props;
@@ -582,6 +592,7 @@ function VectorInteractionHOC(Component /* options */) {
       annotationDeselectAll(undefined);
       annotationSelect(annotation);
     };
+
     insertHelper = {
       onClick: (e, ctxInfo) => {
         this.handleDnaInsert({
@@ -593,75 +604,55 @@ function VectorInteractionHOC(Component /* options */) {
       }
     };
 
-    // eslint-disable-next-line no-unused-vars
     getCopyOptions = annotation => {
       const { sequenceData, readOnly, disableBpEditing, selectionLayer } =
         this.props;
       const { isProtein } = sequenceData;
-      const makeTextCopyable = (transformFunc, className, action = "copy") => {
-        return new ClipboardJS(`.${className}`, {
-          action: () => action,
-          text: () => {
-            if (action === "copy") {
-              document.body.addEventListener("copy", this.handleCopy);
-            } else {
-              document.body.addEventListener("cut", this.handleCut);
-            }
-            const { editorName, store } = this.props;
-            const { sequenceData, copyOptions, selectionLayer } =
-              store.getState().VectorEditor[editorName];
+      const makeTextCopyable = transformFunc => {
+        return async () => {
+          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 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;
-
-            if (window.Cypress) {
-              window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
-              window.Cypress.seqDataToCopy = sequenceDataToCopy;
             }
-            return sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
+          );
+          const sequenceDataToCopy = transformFunc(
+            selectedSeqData,
+            sequenceData
+          );
+          this.sequenceDataToCopy = sequenceDataToCopy;
+
+          if (window.Cypress) {
+            window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
+            window.Cypress.seqDataToCopy = sequenceDataToCopy;
           }
-        });
+        };
       };
       const aaCopy = {
         text: "Copy AA Sequence",
         className: "openVeCopyAA",
-        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);
-        }
+        onClick: makeTextCopyable(selectedSeqData => ({
+          ...selectedSeqData,
+          textToCopy: isProtein
+            ? selectedSeqData.proteinSequence.toUpperCase()
+            : getAminoAcidStringFromSequenceString(selectedSeqData.sequence)
+        }))
       };
-      // TODO: maybe stop using Clipboard.js and unify clipboard handling with
-      // a more versatile approach
       return [
         ...(readOnly || disableBpEditing
           ? []
@@ -673,20 +664,7 @@ function VectorInteractionHOC(Component /* options */) {
               {
                 text: "Cut",
                 className: "openVeCut",
-                willUnmount: () => {
-                  this.openVeCut && this.openVeCut.destroy();
-                },
-                didMount: ({ className }) => {
-                  // TODO: Maybe use a cut action instead
-                  this.openVeCut = makeTextCopyable(
-                    s => ({
-                      ...s,
-                      textToCopy: isProtein ? s.proteinSequence : s.sequence
-                    }),
-                    className,
-                    "cut"
-                  );
-                }
+                onClick: this.handleCut
               }
             ]),
         {
@@ -699,80 +677,45 @@ function VectorInteractionHOC(Component /* options */) {
             {
               text: isProtein ? "Copy DNA Bps" : "Copy",
               className: "openVeCopy2",
-              willUnmount: () => {
-                this.openVeCopy2 && this.openVeCopy2.destroy();
-              },
-              didMount: ({ className }) => {
-                this.openVeCopy2 = makeTextCopyable(
-                  s => ({ ...s, textToCopy: s.sequence }),
-                  className
-                );
-              }
+              onClick: makeTextCopyable(s => ({
+                ...s,
+                textToCopy: s.sequence
+              }))
             },
 
             {
               text: "Copy Genbank For Selection",
               className: "openVeCopyGenbankForSelection",
-              willUnmount: () => {
-                this.openVeCopyGenbankForSelection &&
-                  this.openVeCopyGenbankForSelection.destroy();
-              },
-              didMount: ({ className }) => {
-                this.openVeCopyGenbankForSelection = makeTextCopyable(
-                  getGenbankFromSelection,
-                  className
-                );
-              }
+              onClick: makeTextCopyable(getGenbankFromSelection)
             },
             {
               text: isProtein
                 ? "Copy Reverse Complement DNA Bps"
                 : "Copy Reverse Complement",
               className: "openVeCopyReverse",
-              willUnmount: () => {
-                this.openVeCopyReverse && this.openVeCopyReverse.destroy();
-              },
-              didMount: ({ className }) => {
-                this.openVeCopyReverse = makeTextCopyable(
-                  getReverseComplementSequenceAndAnnotations,
-                  className
-                );
-              }
+              onClick: makeTextCopyable(
+                getReverseComplementSequenceAndAnnotations
+              )
             },
             ...(isProtein ? [] : [aaCopy]),
             {
               text: "Copy Reverse Complement AA Sequence",
               className: "openVeCopyAAReverse",
-              willUnmount: () => {
-                this.openVeCopyAAReverse && this.openVeCopyAAReverse.destroy();
-              },
-              didMount: ({ className }) => {
-                this.openVeCopyAAReverse = makeTextCopyable(selectedSeqData => {
-                  const revSeqData =
-                    getReverseComplementSequenceAndAnnotations(selectedSeqData);
-                  const textToCopy = isProtein
+              onClick: makeTextCopyable(selectedSeqData => {
+                const revSeqData =
+                  getReverseComplementSequenceAndAnnotations(selectedSeqData);
+                return {
+                  ...revSeqData,
+                  textToCopy: isProtein
                     ? revSeqData.proteinSequence.toUpperCase()
-                    : getAminoAcidStringFromSequenceString(revSeqData.sequence);
-                  return {
-                    ...revSeqData,
-                    textToCopy
-                  };
-                }, className);
-              }
+                    : getAminoAcidStringFromSequenceString(revSeqData.sequence)
+                };
+              })
             },
             {
               text: isProtein ? "Copy Complement DNA Bps" : "Copy Complement",
               className: "openVeCopyComplement",
-              willUnmount: () => {
-                this.openVeCopyComplement &&
-                  this.openVeCopyComplement.destroy();
-              },
-              didMount: ({ className }) => {
-                this.openVeCopyComplement = makeTextCopyable(
-                  getComplementSequenceAndAnnotations,
-                  className
-                );
-              }
+              onClick: makeTextCopyable(getComplementSequenceAndAnnotations)
             },
             copyOptionsMenu
           ]