@teselagen/ove 0.7.3-beta.7 → 0.7.4

package/src/helperComponents/PropertiesDialog/index.js

@@ -18,11 +18,11 @@ import { pick } from "lodash-es";
 const PropertiesContainer = Comp => props => {
   const { additionalFooterEls, additionalHeaderEls, ...rest } = props;
   return (
-    <React.Fragment>
+    <>
       {additionalHeaderEls}
       <Comp {...rest} />
       {additionalFooterEls}
-    </React.Fragment>
+    </>
   );
 };
 const allTabs = {
@@ -35,129 +35,130 @@ const allTabs = {
   orfs: PropertiesContainer(OrfProperties),
   genbank: PropertiesContainer(GenbankView)
 };
-export class PropertiesDialog extends React.Component {
-  render() {
-    const {
-      propertiesTool = {},
-      propertiesViewTabUpdate,
-      dimensions = {},
-      height,
-      editorName,
-      onSave,
-      showReadOnly,
-      showAvailability,
-      isProtein,
-      annotationsToSupport = {},
-      disableSetReadOnly,
-      propertiesList = [
-        "general",
-        "features",
-        "parts",
-        "primers",
-        "translations",
-        "cutsites",
-        "orfs",
-        "genbank"
-      ],
-      closePanelButton
-    } = { ...this.props, ...this.props.PropertiesProps };
 
-    const { width, height: heightFromDim } = dimensions;
+export const PropertiesDialog = props => {
+  const {
+    propertiesTool = {},
+    propertiesViewTabUpdate,
+    dimensions = {},
+    height,
+    editorName,
+    onSave,
+    showReadOnly,
+    showAvailability,
+    isProtein,
+    annotationsToSupport = {},
+    disableSetReadOnly,
+    propertiesList = [
+      "general",
+      "features",
+      "parts",
+      "primers",
+      "translations",
+      "cutsites",
+      "orfs",
+      "genbank"
+    ],
+    closePanelButton
+  } = { ...props, ...props.PropertiesProps };
 
-    let { tabId, selectedAnnotationId } = propertiesTool;
-    if (
-      propertiesList
-        .map(nameOrOverride => nameOrOverride.name || nameOrOverride)
-        .indexOf(tabId) === -1
-    ) {
-      tabId = propertiesList[0].name || propertiesList[0];
+  const { width, height: heightFromDim } = dimensions;
+
+  let { tabId, selectedAnnotationId } = propertiesTool;
+  if (
+    propertiesList
+      .map(nameOrOverride => nameOrOverride.name || nameOrOverride)
+      .indexOf(tabId) === -1
+  ) {
+    tabId = propertiesList[0].name || propertiesList[0];
+  }
+
+  const propertiesTabs = flatMap(propertiesList, nameOrOverride => {
+    if (annotationsToSupport[nameOrOverride] === false) {
+      return [];
     }
-    const propertiesTabs = flatMap(propertiesList, nameOrOverride => {
-      if (annotationsToSupport[nameOrOverride] === false) {
-        return [];
-      }
 
-      const name = nameOrOverride.name || nameOrOverride;
-      const Comp = nameOrOverride.Comp || allTabs[name];
-      if (isProtein) {
-        if (
-          name === "translations" ||
-          name === "orfs" ||
-          name === "primers" ||
-          name === "cutsites"
-        ) {
-          return null;
-        }
+    const name = nameOrOverride.name || nameOrOverride;
+    const Comp = nameOrOverride.Comp || allTabs[name];
+    if (isProtein) {
+      if (
+        name === "translations" ||
+        name === "orfs" ||
+        name === "primers" ||
+        name === "cutsites"
+      ) {
+        return null;
       }
-      const title = (() => {
-        if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel
-        if (name === "orfs") return "ORFs";
-        if (name === "cutsites") return "Cut Sites";
-        return startCase(name);
-      })();
-      return (
-        <Tab
-          key={name}
-          title={title}
-          id={name}
-          panel={
-            <Comp
-              {...{
-                ...pick(this.props, userDefinedHandlersAndOpts),
-                editorName,
-                onSave,
-                isProtein,
-                showReadOnly,
-                showAvailability,
-                disableSetReadOnly,
-                selectedAnnotationId,
-                ...(nameOrOverride.name && nameOrOverride)
-              }}
-            />
-          }
-        />
-      );
-    });
-    const heightToUse = Math.max(0, Number((heightFromDim || height) - 30));
+    }
+    const title = (() => {
+      if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel
+      if (name === "orfs") return "ORFs";
+      if (name === "cutsites") return "Cut Sites";
+      return startCase(name);
+    })();
+
     return (
+      <Tab
+        key={name}
+        title={title}
+        id={name}
+        panel={
+          <Comp
+            {...{
+              ...pick(props, userDefinedHandlersAndOpts),
+              editorName,
+              onSave,
+              isProtein,
+              showReadOnly,
+              showAvailability,
+              disableSetReadOnly,
+              selectedAnnotationId,
+              ...(nameOrOverride.name && nameOrOverride)
+            }}
+          />
+        }
+      />
+    );
+  });
+  const heightToUse = Math.max(0, Number((heightFromDim || height) - 30));
+  return (
+    <div
+      style={{
+        position: "relative"
+      }}
+    >
+      {closePanelButton}
       <div
+        className="ve-propertiesPanel"
         style={{
-          position: "relative"
+          display: "flex",
+          width,
+          height: heightToUse || 300,
+          zIndex: 10,
+          padding: 10
+          // paddingBottom: '31px',
         }}
       >
-        {closePanelButton}
-        <div
-          className="ve-propertiesPanel"
-          style={{
-            display: "flex",
-            width,
-            height: heightToUse || 300,
-            zIndex: 10,
-            padding: 10
-            // paddingBottom: '31px',
-          }}
-        >
-          {propertiesTabs.length ? (
-            <Tabs
-              style={{ width }}
-              renderActiveTabPanelOnly
-              selectedTabId={tabId}
-              onChange={propertiesViewTabUpdate}
-            >
-              <Tabs.Expander />
-              {propertiesTabs}
-              <Tabs.Expander />
-            </Tabs>
-          ) : (
-            <div style={{ margin: 20, fontSize: 20 }}>
-              No Properties to display
-            </div>
-          )}
-        </div>
+        {propertiesTabs.length ? (
+          <Tabs
+            style={{ width }}
+            renderActiveTabPanelOnly
+            selectedTabId={tabId}
+            onChange={propertiesViewTabUpdate}
+          >
+            <Tabs.Expander />
+            {propertiesTabs}
+            <Tabs.Expander />
+          </Tabs>
+        ) : (
+          <div style={{ margin: 20, fontSize: 20 }}>
+            No Properties to display
+          </div>
+        )}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default compose(
   connectToEditor(({ propertiesTool, annotationsToSupport }) => {

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 dialogFormName = "RemoveDuplicatesDialog";
+const dataTableFormName = "duplicatesToRemove";
+const checkboxStyle = { marginTop: 0, marginBottom: 0 };
+
+const RemoveDuplicatesDialog = props => {
+  const {
+    type,
+    sequenceData = { sequence: "" },
+    sequenceLength,
+    isProtein,
+    hideModal
+  } = props;
 
-class RemoveDuplicatesDialog extends React.Component {
-  state = {
-    dups: []
-  };
-  componentDidMount() {
-    this.recomputeDups();
-  }
+  const { selectedEntities } = useTableEntities(dataTableFormName);
 
-  checkboxStyle = { marginTop: 0, marginBottom: 0 };
+  const ignoreName = useFormValue(dialogFormName, "ignoreName");
+  const ignoreStartAndEnd = useFormValue(dialogFormName, "ignoreStartAndEnd");
+  const ignoreStrand = useFormValue(dialogFormName, "ignoreStrand");
 
-  delayedRecomputeDups = () => {
-    setTimeout(() => {
-      this.recomputeDups();
-    });
-  };
-  recomputeDups = () => {
-    const {
-      // hideModal,
-      type,
-      sequenceData = { sequence: "" },
-      // handleSubmit,
-      sequenceLength,
-      ignoreName,
-      ignoreStrand,
-      ignoreStartAndEnd
-      // circular,
-      // upsertFeature
-    } = this.props;
+  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]
+  );
 
-    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 [dups, setDups] = useState(recomputeDups);
+  const selectedIds = useMemo(() => dups.map(d => d.id), [dups]);
 
-    const selectedIds = this.state.dups.map(d => d.id);
+  const fieldSubmit = useCallback(
+    (newVal, field) => {
+      const values = {
+        ignoreName,
+        ignoreStartAndEnd,
+        ignoreStrand,
+        [field]: newVal
+      };
+      const newDups = recomputeDups(values);
+      setDups(newDups);
+    },
+    [ignoreName, ignoreStartAndEnd, ignoreStrand, recomputeDups]
+  );
 
-    const schema = {
+  const schema = useMemo(
+    () => ({
       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(this.props.isProtein),
+        sizeSchema(isProtein),
         { path: "strand", type: "string" }
       ]
-    };
-    // 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>
+    }),
+    [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

@@ -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,
@@ -598,10 +599,16 @@ function VectorInteractionHOC(Component /* options */) {
         this.props;
       const { isProtein } = sequenceData;
       const makeTextCopyable = (transformFunc, className, action = "copy") => {
-        document.querySelectorAll(`.${className}`).forEach(element => {
-          element.addEventListener("click", async () => {
-            const { selectionLayer, editorName, store } = this.props;
-            const { sequenceData, copyOptions } =
+        return new Clipboard(`.${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 selectedSeqData = getSequenceDataBetweenRange(
@@ -627,23 +634,12 @@ function VectorInteractionHOC(Component /* options */) {
             );
             this.sequenceDataToCopy = sequenceDataToCopy;
 
-            const textToCopy =
-              sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
-
-            try {
-              await navigator.clipboard.writeText(textToCopy);
-              if (action === "cut") {
-                // Optionally clear the original text or perform any "cut" related logic
-              }
-
-              if (window.Cypress) {
-                window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
-                window.Cypress.seqDataToCopy = sequenceDataToCopy;
-              }
-            } catch (err) {
-              console.error(`${action} failed:`, err);
+            if (window.Cypress) {
+              window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
+              window.Cypress.seqDataToCopy = sequenceDataToCopy;
             }
-          });
+            return sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
+          }
         });
       };
       const aaCopy = {
@@ -664,6 +660,8 @@ function VectorInteractionHOC(Component /* options */) {
           }, className);
         }
       };
+      // TODO: maybe stop using Clipboard.js and unify clipboard handling with
+      // a more versatile approach
       return [
         ...(readOnly || disableBpEditing
           ? []

package/utils/useFormValue.d.ts

@@ -0,0 +1 @@
+export function useFormValue(formName: any, field: any): any;