@teselagen/ove 0.7.3-beta.7 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.3-beta.7",
+  "version": "0.7.4",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -12,7 +12,7 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.27",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.7.3-beta.5",
+    "@teselagen/ui": "0.7.7",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",
@@ -34,6 +34,7 @@
     "buffer": "5.7.1",
     "bufferpack": "0.0.6",
     "classnames": "^2.3.2",
+    "clipboard": "2.0.11",
     "color": "^3.2.1",
     "combokeys": "^3.0.1",
     "copy-to-clipboard": "^3.3.1",

package/src/AlignmentView/index.js

@@ -4,6 +4,7 @@ import {
   Droppable,
   Draggable as DndDraggable
 } from "@hello-pangea/dnd";
+import Clipboard from "clipboard";
 import React from "react";
 import { connect } from "react-redux";
 import {
@@ -1212,30 +1213,16 @@ export class AlignmentView extends React.Component {
                                       this.copyAllAlignmentsFastaClipboardHelper.destroy();
                                   },
                                   didMount: () => {
-                                    const elements = document.querySelectorAll(
-                                      `.copyAllAlignmentsFastaClipboardHelper`
-                                    );
-
-                                    elements.forEach(element => {
-                                      element.addEventListener(
-                                        "click",
-                                        async () => {
-                                          const textToCopy =
-                                            this.getAllAlignmentsFastaText();
-
-                                          try {
-                                            await navigator.clipboard.writeText(
-                                              textToCopy
-                                            );
-                                          } catch (err) {
-                                            console.error(
-                                              "Failed to copy text:",
-                                              err
-                                            );
+                                    this.copyAllAlignmentsFastaClipboardHelper =
+                                      new Clipboard(
+                                        `.copyAllAlignmentsFastaClipboardHelper`,
+                                        {
+                                          action: "copyAllAlignmentsFasta",
+                                          text: () => {
+                                            return this.getAllAlignmentsFastaText();
                                           }
                                         }
                                       );
-                                    });
                                   },
                                   onClick: () => {
                                     window.toastr.success("Selection Copied");
@@ -1251,42 +1238,29 @@ export class AlignmentView extends React.Component {
                                       this.copySpecificAlignmentFastaClipboardHelper.destroy();
                                   },
                                   didMount: () => {
-                                    const elements = document.querySelectorAll(
-                                      `.copySpecificAlignmentFastaClipboardHelper`
-                                    );
-
-                                    elements.forEach(element => {
-                                      element.addEventListener(
-                                        "click",
-                                        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`;
-
-                                          try {
-                                            await navigator.clipboard.writeText(
-                                              seqDataToCopyAsFasta
-                                            );
-                                          } catch (err) {
-                                            console.error(
-                                              "Failed to copy text:",
-                                              err
-                                            );
+                                    this.copySpecificAlignmentFastaClipboardHelper =
+                                      new Clipboard(
+                                        `.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: () => {
                                     window.toastr.success(
                                       "Selection Copied As Fasta"
@@ -1303,40 +1277,28 @@ export class AlignmentView extends React.Component {
                                       this.copySpecificAlignmentAsPlainClipboardHelper.destroy();
                                   },
                                   didMount: () => {
-                                    const elements = document.querySelectorAll(
-                                      `.copySpecificAlignmentAsPlainClipboardHelper`
-                                    );
-
-                                    elements.forEach(element => {
-                                      element.addEventListener(
-                                        "click",
-                                        async () => {
-                                          const { selectionLayer } =
-                                            this.props.store.getState()
-                                              .VectorEditor.__allEditorsOptions
-                                              .alignments[this.props.id] || {};
-
-                                          const seqDataToCopy =
-                                            getSequenceDataBetweenRange(
-                                              alignmentData,
-                                              selectionLayer
-                                            ).sequence;
-
-                                          try {
-                                            await navigator.clipboard.writeText(
-                                              seqDataToCopy
-                                            );
-                                          } catch (err) {
-                                            console.error(
-                                              "Failed to copy text:",
-                                              err
-                                            );
+                                    this.copySpecificAlignmentAsPlainClipboardHelper =
+                                      new Clipboard(
+                                        `.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: () => {
                                     window.toastr.success("Selection Copied");
                                   }

package/src/CreateAnnotationsPage.js

@@ -48,7 +48,7 @@ export default compose(
           }))}
           withCheckboxes
           schema={annotationType === "feature" ? schemaFeatures : schemaOther}
-        ></DataTable>
+        />
       </div>
       <DialogFooter
         hideModal={hideDialog}

package/src/DigestTool/DigestTool.js

@@ -1,13 +1,8 @@
-// import uniqid from "shortid";
-// import Ladder from "./Ladder";
-import { compose, withProps } from "recompose";
-// import selectionLayer from "../redux/selectionLayer";
-import React, { useState } from "react";
-import { DataTable } from "@teselagen/ui";
+import React, { useMemo, useState } from "react";
+import { DataTable, useStableReference } from "@teselagen/ui";
 import { getCutsiteType, getVirtualDigest } from "@teselagen/sequence-utils";
 import CutsiteFilter from "../CutsiteFilter";
 import Ladder from "./Ladder";
-// import getCutsiteType from "./getCutsiteType";
 import {
   Tabs,
   Tab,
@@ -22,23 +17,91 @@ import { pick } from "lodash-es";
 
 const MAX_DIGEST_CUTSITES = 50;
 const MAX_PARTIAL_DIGEST_CUTSITES = 10;
+const onSingleSelectRow = ({ onFragmentSelect }) => {
+  onFragmentSelect();
+};
 
 export const DigestTool = props => {
   const [selectedTab, setSelectedTab] = useState("virtualDigest");
   const {
     editorName,
-    // height = 100,
     dimensions = {},
-    lanes,
     digestTool: { selectedFragment, computePartialDigest },
     onDigestSave,
-    computePartialDigestDisabled,
-    computeDigestDisabled,
     updateComputePartialDigest,
     boxHeight,
     digestLaneRightClicked,
-    ladders
+    ladders,
+    sequenceData,
+    sequenceLength,
+    selectionLayerUpdate: _selectionLayerUpdate,
+    updateSelectedFragment
   } = props;
+
+  const isCircular = sequenceData.circular;
+  const cutsites = sequenceData.cutsites;
+  const computePartialDigestDisabled =
+    cutsites.length > MAX_PARTIAL_DIGEST_CUTSITES;
+  const computeDigestDisabled = cutsites.length > MAX_DIGEST_CUTSITES;
+  // The selection layer update function is memoized to prevent re-renders
+  // It changes triggered by the DataTables below
+  const selectionLayerUpdate = useStableReference(_selectionLayerUpdate);
+
+  // This useMemo might not be necessary once if we figure out
+  // why the DataTables below triggers a re-render outside of them.
+  const lanes = useMemo(() => {
+    const { fragments } = getVirtualDigest({
+      cutsites,
+      sequenceLength,
+      isCircular,
+      computePartialDigest,
+      computePartialDigestDisabled,
+      computeDigestDisabled
+    });
+    const _lanes = [
+      fragments.map(f => ({
+        ...f,
+        onFragmentSelect: () => {
+          selectionLayerUpdate.current({
+            start: f.start,
+            end: f.end,
+            name: f.name
+          });
+          updateSelectedFragment(f.Intentid);
+        }
+      }))
+    ];
+    return _lanes;
+  }, [
+    computeDigestDisabled,
+    computePartialDigest,
+    computePartialDigestDisabled,
+    cutsites,
+    isCircular,
+    selectionLayerUpdate,
+    sequenceLength,
+    updateSelectedFragment
+  ]);
+
+  // Same comment as above
+  const digestInfoLanes = useMemo(
+    () =>
+      lanes[0].map(({ id, cut1, cut2, start, end, size, ...rest }) => {
+        return {
+          ...rest,
+          id,
+          start,
+          end,
+          length: size,
+          leftCutter: cut1.restrictionEnzyme.name,
+          rightCutter: cut2.restrictionEnzyme.name,
+          leftOverhang: getCutsiteType(cut1.restrictionEnzyme),
+          rightOverhang: getCutsiteType(cut2.restrictionEnzyme)
+        };
+      }),
+    [lanes]
+  );
+
   return (
     <div
       style={{
@@ -137,25 +200,9 @@ export const DigestTool = props => {
               maxHeight={400}
               // noFooter
               withSearch={false}
-              onSingleRowSelect={({ onFragmentSelect }) => {
-                onFragmentSelect();
-              }}
+              onSingleRowSelect={onSingleSelectRow}
               formName="digestInfoTable"
-              entities={lanes[0].map(
-                ({ id, cut1, cut2, start, end, size, ...rest }) => {
-                  return {
-                    ...rest,
-                    id,
-                    start,
-                    end,
-                    length: size,
-                    leftCutter: cut1.restrictionEnzyme.name,
-                    rightCutter: cut2.restrictionEnzyme.name,
-                    leftOverhang: getCutsiteType(cut1.restrictionEnzyme),
-                    rightOverhang: getCutsiteType(cut2.restrictionEnzyme)
-                  };
-                }
-              )}
+              entities={digestInfoLanes}
               schema={schema}
             />
           }
@@ -178,48 +225,4 @@ const schema = {
   ]
 };
 
-export default compose(
-  withEditorInteractions,
-  withProps(
-    ({
-      sequenceData,
-      sequenceLength,
-      selectionLayerUpdate,
-      updateSelectedFragment,
-      digestTool: { computePartialDigest }
-    }) => {
-      const isCircular = sequenceData.circular;
-      const cutsites = sequenceData.cutsites;
-      const computePartialDigestDisabled =
-        cutsites.length > MAX_PARTIAL_DIGEST_CUTSITES;
-      const computeDigestDisabled = cutsites.length > MAX_DIGEST_CUTSITES;
-
-      const { fragments, overlappingEnzymes } = getVirtualDigest({
-        cutsites,
-        sequenceLength,
-        isCircular,
-        computePartialDigest,
-        computePartialDigestDisabled,
-        computeDigestDisabled
-      });
-      return {
-        computePartialDigestDisabled,
-        computeDigestDisabled,
-        lanes: [
-          fragments.map(f => ({
-            ...f,
-            onFragmentSelect: () => {
-              selectionLayerUpdate({
-                start: f.start,
-                end: f.end,
-                name: f.name
-              });
-              updateSelectedFragment(f.Intentid);
-            }
-          }))
-        ],
-        overlappingEnzymes
-      };
-    }
-  )
-)(DigestTool);
+export default withEditorInteractions(DigestTool);

package/src/GlobalDialogUtils.js

@@ -43,6 +43,7 @@ export function hideDialog() {
   delete dialogHolder.CustomModalComponent;
   delete dialogHolder.props;
   delete dialogHolder.overrideName;
+  delete dialogHolder.editorName;
   dialogHolder.setUniqKeyToForceRerender();
 }