@teselagen/ove 0.6.1-beta.1 → 0.7.2

package/src/helperComponents/RemoveDuplicates/index.js

@@ -1,194 +1,178 @@
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { reduxForm } from "redux-form";
-
 import {
   wrapDialog,
   DataTable,
-  withSelectedEntities,
   SwitchField,
-  tgFormValues
+  useTableEntities
 } from "@teselagen/ui";
 import { compose } from "redux";
 import { Button, Classes, Popover } from "@blueprintjs/core";
 import classNames from "classnames";
-
 import withEditorProps from "../../withEditorProps";
 import { forEach, camelCase, startCase } from "lodash-es";
 import { sizeSchema } from "../PropertiesDialog/utils";
 import { getRangeLength } from "@teselagen/range-utils";
+import { useFormValue } from "../../utils/useFormValue";
 
-const schema = {
-  fields: [
-    // ...(noColor
-    //   ? []
-    //   : [
-    //       {
-    //         path: "color",
-    //         type: "string",
-    //         render: color => {
-    //           return (
-    //             <ColorPickerPopover>
-    //               <div style={{ height: 20, width: 20, background: color }} />
-    //             </ColorPickerPopover>
-    //           );
-    //         }
-    //       }
-    //     ]),
-    { path: "name", type: "string" },
-    // ...(noType ? [] : [{ path: "type", type: "string" }]),
-    sizeSchema,
-    { path: "strand", type: "string" }
-  ]
-};
+const dialogFormName = "RemoveDuplicatesDialog";
+const dataTableFormName = "duplicatesToRemove";
+const checkboxStyle = { marginTop: 0, marginBottom: 0 };
+
+const RemoveDuplicatesDialog = props => {
+  const {
+    type,
+    sequenceData = { sequence: "" },
+    sequenceLength,
+    isProtein,
+    hideModal
+  } = props;
+
+  const { selectedEntities } = useTableEntities(dataTableFormName);
 
-class RemoveDuplicatesDialog extends React.Component {
-  state = {
-    dups: []
-  };
-  componentDidMount() {
-    this.recomputeDups();
-  }
+  const ignoreName = useFormValue(dialogFormName, "ignoreName");
+  const ignoreStartAndEnd = useFormValue(dialogFormName, "ignoreStartAndEnd");
+  const ignoreStrand = useFormValue(dialogFormName, "ignoreStrand");
 
-  checkboxStyle = { marginTop: 0, marginBottom: 0 };
+  const recomputeDups = useCallback(
+    values => {
+      const ignoreName = values?.ignoreName;
+      const ignoreStartAndEnd = values?.ignoreStartAndEnd;
+      const ignoreStrand = values?.ignoreStrand;
+      const annotations = sequenceData[type];
+      const newDups = [];
+      const seqsHashByStartEndStrandName = {};
+      forEach(annotations, a => {
+        const hash = `${ignoreStartAndEnd ? "" : a.start}&${
+          ignoreStartAndEnd ? "" : a.end
+        }&${ignoreStrand ? "" : a.strand}&${ignoreName ? "" : a.name}`;
+        if (seqsHashByStartEndStrandName[hash]) {
+          newDups.push({ ...a, size: getRangeLength(a, sequenceLength) });
+        } else {
+          seqsHashByStartEndStrandName[hash] = true;
+        }
+      });
+      return newDups;
+    },
+    [sequenceData, sequenceLength, type]
+  );
 
-  delayedRecomputeDups = () => {
-    setTimeout(() => {
-      this.recomputeDups();
-    });
-  };
-  recomputeDups = () => {
-    const {
-      // hideModal,
-      type,
-      sequenceData = { sequence: "" },
-      // handleSubmit,
-      sequenceLength,
-      ignoreName,
-      ignoreStrand,
-      ignoreStartAndEnd
-      // circular,
-      // upsertFeature
-    } = this.props;
+  const [dups, setDups] = useState(recomputeDups);
+  const selectedIds = useMemo(() => dups.map(d => d.id), [dups]);
 
-    const annotations = sequenceData[type];
-    const dups = [];
-    const seqsHashByStartEndStrandName = {};
-    forEach(annotations, a => {
-      const hash = `${ignoreStartAndEnd ? "" : a.start}&${
-        ignoreStartAndEnd ? "" : a.end
-      }&${ignoreStrand ? "" : a.strand}&${ignoreName ? "" : a.name}`;
-      if (seqsHashByStartEndStrandName[hash]) {
-        dups.push({ ...a, size: getRangeLength(a, sequenceLength) });
-      } else {
-        seqsHashByStartEndStrandName[hash] = true;
-      }
-    });
-    this.setState({ dups });
-  };
-  render() {
-    const { duplicatesToRemoveSelectedEntities, hideModal, type } = this.props;
+  const fieldSubmit = useCallback(
+    (newVal, field) => {
+      const values = {
+        ignoreName,
+        ignoreStartAndEnd,
+        ignoreStrand,
+        [field]: newVal
+      };
+      const newDups = recomputeDups(values);
+      setDups(newDups);
+    },
+    [ignoreName, ignoreStartAndEnd, ignoreStrand, recomputeDups]
+  );
 
-    const selectedIds = this.state.dups.map(d => d.id);
-    // const sequenceLength = sequenceData.sequence.length;
-    // const isCirc = (this.state || {}).circular;
-    return (
-      <div className={classNames(Classes.DIALOG_BODY, "tg-min-width-dialog")}>
-        {/* {dups.map((d) => {
-          return <div>
+  const schema = useMemo(
+    () => ({
+      fields: [
+        { path: "name", type: "string" },
+        // ...(noType ? [] : [{ path: "type", type: "string" }]),
+        sizeSchema(isProtein),
+        { path: "strand", type: "string" }
+      ]
+    }),
+    [isProtein]
+  );
 
-          </div>
-        })} */}
-        <DataTable
-          noPadding
-          withCheckboxes
-          noFullscreenButton
-          // onRowSelect={this.onRowSelect}
-          maxHeight={400}
-          selectedIds={selectedIds}
-          formName="duplicatesToRemove"
-          noRouter
-          noRowsFoundMessage="No duplicates found"
-          compact
-          noHeader
-          noFooter
-          withSearch={false}
-          hideSelectedCount
-          isInfinite
-          schema={schema}
-          entities={this.state.dups}
+  return (
+    <div className={classNames(Classes.DIALOG_BODY, "tg-min-width-dialog")}>
+      <DataTable
+        noPadding
+        withCheckboxes
+        noFullscreenButton
+        maxHeight={400}
+        selectedIds={selectedIds}
+        formName={dataTableFormName}
+        noRouter
+        noRowsFoundMessage="No duplicates found"
+        compact
+        noHeader
+        noFooter
+        withSearch={false}
+        hideSelectedCount
+        isInfinite
+        schema={schema}
+        entities={dups}
+      />
+      <div
+        style={{
+          marginTop: 10,
+          display: "flex",
+          justifyContent: "space-between"
+        }}
+      >
+        <Popover
+          target={<Button icon="settings" />}
+          content={
+            <div style={{ padding: 20, maxWidth: 250 }}>
+              <div>Ignore These Fields While Finding Duplicates:</div>
+              <br />
+              <SwitchField
+                containerStyle={{ marginBottom: 2 }}
+                //delay the call to recompute dups until redux has had time to update
+                onFieldSubmit={newVal => fieldSubmit(newVal, "ignoreName")}
+                style={checkboxStyle}
+                name="ignoreName"
+                label="Name"
+              />
+              <SwitchField
+                containerStyle={{ marginBottom: 2 }}
+                //delay the call to recompute dups until redux has had time to update
+                onFieldSubmit={newVal => fieldSubmit(newVal, "ignoreStrand")}
+                style={checkboxStyle}
+                name="ignoreStrand"
+                label="Strand"
+              />
+              <SwitchField
+                containerStyle={{ marginBottom: 2 }}
+                //delay the call to recompute dups until redux has had time to update
+                onFieldSubmit={newVal =>
+                  fieldSubmit(newVal, "ignoreStartAndEnd")
+                }
+                style={checkboxStyle}
+                name="ignoreStartAndEnd"
+                label="Start and End"
+              />
+            </div>
+          }
         />
-        <div
-          style={{
-            marginTop: 10,
-            display: "flex",
-            justifyContent: "space-between"
+
+        <Button
+          intent="primary"
+          onClick={() => {
+            props[camelCase(`delete_${type}`).slice(0, -1)](
+              Object.keys(selectedEntities || {})
+            );
+            window.toastr.success(
+              `Successfully Deleted ${
+                Object.keys(selectedEntities || {}).length
+              } ${startCase(type)}`
+            );
+            hideModal();
           }}
+          disabled={!Object.keys(selectedEntities || {}).length}
         >
-          <Popover
-            target={<Button icon="settings" />}
-            content={
-              <div style={{ padding: 20, maxWidth: 250 }}>
-                <div>Ignore These Fields While Finding Duplicates:</div>
-                <br></br>
-                <SwitchField
-                  containerStyle={{ marginBottom: 2 }}
-                  //delay the call to recompute dups until redux has had time to update
-                  onFieldSubmit={this.delayedRecomputeDups}
-                  style={this.checkboxStyle}
-                  name="ignoreName"
-                  label="Name"
-                ></SwitchField>
-                <SwitchField
-                  containerStyle={{ marginBottom: 2 }}
-                  //delay the call to recompute dups until redux has had time to update
-                  onFieldSubmit={this.delayedRecomputeDups}
-                  style={this.checkboxStyle}
-                  name="ignoreStrand"
-                  label="Strand"
-                ></SwitchField>
-                <SwitchField
-                  containerStyle={{ marginBottom: 2 }}
-                  //delay the call to recompute dups until redux has had time to update
-                  onFieldSubmit={this.delayedRecomputeDups}
-                  style={this.checkboxStyle}
-                  name="ignoreStartAndEnd"
-                  label="Start and End"
-                ></SwitchField>
-              </div>
-            }
-          ></Popover>
-
-          <Button
-            intent="primary"
-            onClick={() => {
-              this.props[camelCase(`delete_${type}`).slice(0, -1)](
-                duplicatesToRemoveSelectedEntities.map(d => d.id)
-              );
-              window.toastr.success(
-                `Successfully Deleted ${
-                  duplicatesToRemoveSelectedEntities.length
-                } ${startCase(type)}`
-              );
-              hideModal();
-            }}
-            disabled={!(duplicatesToRemoveSelectedEntities || []).length}
-          >
-            Remove {duplicatesToRemoveSelectedEntities.length} Duplicates
-          </Button>
-        </div>
+          Remove {Object.keys(selectedEntities || {}).length} Duplicates
+        </Button>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default compose(
   wrapDialog(),
   withEditorProps,
-
-  withSelectedEntities("duplicatesToRemove"),
-
-  reduxForm({
-    form: "RemoveDuplicatesDialog"
-  }),
-  tgFormValues("ignoreName", "ignoreStrand", "ignoreStartAndEnd")
+  reduxForm({ form: dialogFormName })
 )(RemoveDuplicatesDialog);

package/src/utils/useFormValue.js

@@ -0,0 +1,7 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import { useSelector } from "react-redux";
+import { get } from "lodash";
+
+export const useFormValue = (formName, field) => {
+  return useSelector(state => get(state.form?.[formName]?.values, field));
+};

package/src/withEditorInteractions/index.js

@@ -602,8 +602,13 @@ function VectorInteractionHOC(Component /* options */) {
         return new Clipboard(`.${className}`, {
           action: () => action,
           text: () => {
-            const { selectionLayer, editorName, store } = this.props;
-            const { sequenceData, copyOptions } =
+            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 selectedSeqData = getSequenceDataBetweenRange(
@@ -628,11 +633,7 @@ function VectorInteractionHOC(Component /* options */) {
               sequenceData
             );
             this.sequenceDataToCopy = sequenceDataToCopy;
-            if (action === "copy") {
-              document.body.addEventListener("copy", this.handleCopy);
-            } else {
-              document.body.addEventListener("cut", this.handleCut);
-            }
+
             if (window.Cypress) {
               window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
               window.Cypress.seqDataToCopy = sequenceDataToCopy;