@teselagen/ove 0.7.3-beta.7 → 0.7.4

package/src/helperComponents/PropertiesDialog/CutsiteProperties.js

@@ -1,16 +1,12 @@
-import React from "react";
-import {
-  DataTable,
-  withSelectedEntities,
-  createCommandMenu
-} from "@teselagen/ui";
-import { map, get } from "lodash-es";
+import React, { useCallback, useMemo } from "react";
+import { DataTable, createCommandMenu } from "@teselagen/ui";
+import { get } from "lodash-es";
 import CutsiteFilter from "../../CutsiteFilter";
 import { Button, ButtonGroup } from "@blueprintjs/core";
 import { connectToEditor } from "../../withEditorProps";
 import { compose } from "recompose";
 import selectors from "../../selectors";
-import commands from "../../commands";
+import _commands from "../../commands";
 import { userDefinedHandlersAndOpts } from "../../Editor/userDefinedHandlersAndOpts";
 import { pick } from "lodash-es";
 import SingleEnzymeCutsiteInfo from "./SingleEnzymeCutsiteInfo";
@@ -18,105 +14,107 @@ import { withRestrictionEnzymes } from "../../CutsiteFilter/withRestrictionEnzym
 import { cutsitesSubmenu } from "../../MenuBar/viewSubmenu";
 import { getVisFilter } from "./GenericAnnotationProperties";
 
-class CutsiteProperties extends React.Component {
-  constructor(props) {
-    super(props);
-    this.commands = commands(this);
-  }
+const schema = {
+  fields: [
+    { path: "name", type: "string" },
+    { path: "numberOfCuts", type: "number" },
+    { path: "groups", type: "string" }
+  ]
+};
 
-  SubComponent = row => {
-    return (
-      <SingleEnzymeCutsiteInfo
-        {...{
-          allRestrictionEnzymes: this.props.allRestrictionEnzymes,
-          allCutsites: this.props.allCutsites,
-          filteredCutsites: this.props.filteredCutsites,
-          editorName: this.props.editorName,
-          dispatch: this.props.dispatch,
-          selectedAnnotationId: this.props.selectedAnnotationId,
-          cutsiteGroup: row.original.cutsiteGroup,
-          enzyme: row.original.enzyme
-        }}
-      ></SingleEnzymeCutsiteInfo>
-    );
-  };
+const defaultValues = { order: ["numberOfCuts"] };
 
-  schema = {
-    fields: [
-      { path: "name", type: "string" },
-      { path: "numberOfCuts", type: "number" },
-      { path: "groups", type: "string" }
-    ]
-  };
+const CutsiteProperties = props => {
+  const commands = _commands({ props });
+  const {
+    allRestrictionEnzymes,
+    allCutsites,
+    annotationVisibilityShow,
+    createNewDigest,
+    dispatch,
+    editorName,
+    filteredCutsites,
+    selectedAnnotationId
+  } = props;
 
-  onChangeHook = () => {
-    this.props.annotationVisibilityShow("cutsites");
-  };
-  render() {
-    const {
+  const SubComponent = useCallback(
+    row => (
+      <SingleEnzymeCutsiteInfo
+        allRestrictionEnzymes={allRestrictionEnzymes}
+        allCutsites={allCutsites}
+        filteredCutsites={filteredCutsites}
+        editorName={editorName}
+        dispatch={dispatch}
+        selectedAnnotationId={selectedAnnotationId}
+        cutsiteGroup={row.original.cutsiteGroup}
+        enzyme={row.original.enzyme}
+      />
+    ),
+    [
+      allCutsites,
+      allRestrictionEnzymes,
+      dispatch,
       editorName,
-      createNewDigest,
-      filteredCutsites: allCutsites,
+      filteredCutsites,
       selectedAnnotationId
-    } = this.props;
+    ]
+  );
 
-    const { cutsitesByName, cutsitesById } = allCutsites;
-    const cutsitesToUse = map(cutsitesByName, cutsiteGroup => {
-      const name = cutsiteGroup[0].restrictionEnzyme.name;
-      let groups = "";
-      const exisitingEnzymeGroups = window.getExistingEnzymeGroups();
+  const onChangeHook = useCallback(() => {
+    annotationVisibilityShow("cutsites");
+  }, [annotationVisibilityShow]);
 
-      Object.keys(exisitingEnzymeGroups).forEach(key => {
-        if (exisitingEnzymeGroups[key].includes(name)) groups += key;
-        groups += " ";
-      });
+  const { cutsitesByName, cutsitesById } = filteredCutsites;
 
-      return {
-        cutsiteGroup,
-        id: name,
-        name,
-        numberOfCuts: cutsiteGroup.length,
-        enzyme: cutsiteGroup[0].restrictionEnzyme,
-        groups
-        // size: getRangeLength(cutsiteGroup, sequenceData.sequence.length)
-      };
-    });
-    return (
-      <>
-        <div
-          style={{
-            marginBottom: 10,
-            paddingTop: 3,
-            display: "flex",
-            // flexWrap: 'wrap',
-            width: "100%",
-            // justifyContent: "space-between",
-            alignItems: "center"
-          }}
-        >
-          {/* <CmdCheckbox prefix="Show " cmd={this.commands.toggleCutsites} />
+  const cutsitesToUse = useMemo(
+    () =>
+      Object.values(cutsitesByName || {}).map(cutsiteGroup => {
+        const name = cutsiteGroup[0].restrictionEnzyme.name;
+        let groups = "";
+        const exisitingEnzymeGroups = window.getExistingEnzymeGroups();
+
+        Object.keys(exisitingEnzymeGroups).forEach(key => {
+          if (exisitingEnzymeGroups[key].includes(name)) groups += key;
+          groups += " ";
+        });
+
+        return {
+          cutsiteGroup,
+          id: name,
+          name,
+          numberOfCuts: cutsiteGroup.length,
+          enzyme: cutsiteGroup[0].restrictionEnzyme,
+          groups
+        };
+      }),
+    [cutsitesByName]
+  );
+
+  const selectedIds = useMemo(
+    () => get(cutsitesById[selectedAnnotationId], "restrictionEnzyme.name"),
+    [cutsitesById, selectedAnnotationId]
+  );
+
+  return (
+    <>
+      <div
+        style={{
+          marginBottom: 10,
+          paddingTop: 3,
+          display: "flex",
+          // flexWrap: 'wrap',
+          width: "100%",
+          // justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        {getVisFilter(
+          createCommandMenu(cutsitesSubmenu, commands, {
+            useTicks: true
+          })
+        )}
+        <ButtonGroup>
           <Button
-            style={{ marginLeft: 10, cursor: "auto" }}
-            disabled
-            minimal
-            icon="filter"
-          /> */}
-          {getVisFilter(
-            createCommandMenu(cutsitesSubmenu, this.commands, {
-              useTicks: true
-            })
-          )}
-          <ButtonGroup>
-            <Button
-              intent="success"
-              data-tip="Virtual Digest"
-              icon="cut"
-              style={{ marginLeft: 15, flexGrow: -1 }}
-              onClick={() => {
-                createNewDigest();
-              }}
-            ></Button>
-            {/* <Button
             intent="success"
             data-tip="Virtual Digest"
             icon="cut"
@@ -124,43 +122,37 @@ class CutsiteProperties extends React.Component {
             onClick={() => {
               createNewDigest();
             }}
-          >
-          </Button> */}
-          </ButtonGroup>
-
-          <CutsiteFilter
-            {...pick(this.props, userDefinedHandlersAndOpts)}
-            style={{ marginLeft: "auto", marginRight: 3 }}
-            editorName={editorName}
-            manageEnzymesToLeft
-            onChangeHook={this.onChangeHook}
           />
-        </div>
-        <DataTable
-          selectedIds={get(
-            cutsitesById[selectedAnnotationId],
-            "restrictionEnzyme.name"
-          )}
-          compact
-          noSelect
-          noHeader
-          noFooter
-          withExpandAndCollapseAllButton
-          noFullscreenButton
-          noPadding
-          defaults={{ order: ["numberOfCuts"] }}
-          formName="cutsiteProperties"
-          noRouter
-          withSearch={false}
-          SubComponent={this.SubComponent}
-          isInfinite
-          schema={this.schema}
-          entities={cutsitesToUse}
+        </ButtonGroup>
+        <CutsiteFilter
+          {...pick(props, userDefinedHandlersAndOpts)}
+          style={{ marginLeft: "auto", marginRight: 3 }}
+          editorName={editorName}
+          manageEnzymesToLeft
+          onChangeHook={onChangeHook}
         />
-      </>
-    );
-  }
-}
+      </div>
+      <DataTable
+        selectedIds={selectedIds}
+        compact
+        noSelect
+        noHeader
+        noFooter
+        withExpandAndCollapseAllButton
+        noFullscreenButton
+        noPadding
+        defaults={defaultValues}
+        formName="cutsiteProperties"
+        noRouter
+        withSearch={false}
+        SubComponent={SubComponent}
+        isInfinite
+        schema={schema}
+        entities={cutsitesToUse}
+      />
+    </>
+  );
+};
 
 export default compose(
   connectToEditor((editorState, ownProps) => {
@@ -180,6 +172,5 @@ export default compose(
       cutsites: cutsites.cutsitesArray
     };
   }),
-  withRestrictionEnzymes,
-  withSelectedEntities("cutsiteProperties")
+  withRestrictionEnzymes
 )(CutsiteProperties);

package/src/helperComponents/PropertiesDialog/SingleEnzymeCutsiteInfo.js

@@ -1,11 +1,17 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { DataTable } from "@teselagen/ui";
-
 import { CutsiteTag } from "../../CutsiteFilter/AdditionalCutsiteInfoDialog";
-
 import EnzymeViewer from "../../EnzymeViewer";
 import { getEnzymeAliases } from "../../utils/editorUtils";
 
+const schema = {
+  fields: [
+    { path: "topSnipPosition", displayName: "Top Snip", type: "string" },
+    { path: "position", type: "string" },
+    { path: "strand", type: "string" }
+  ]
+};
+
 export default function SingleEnzymeCutsiteInfo({
   cutsiteGroup,
   enzyme,
@@ -16,40 +22,52 @@ export default function SingleEnzymeCutsiteInfo({
   allCutsites,
   filteredCutsites: { cutsitesByName: cutsitesByNameActive }
 }) {
-  const onRowSelect = ([record]) => {
-    if (!record) return;
+  const onRowSelect = useCallback(
+    ([record]) => {
+      if (!record) return;
 
-    dispatch({
-      type: "CARET_POSITION_UPDATE",
-      payload: record.topSnipPosition,
-      meta: {
-        editorName
-      }
-    });
-  };
-  const aliases = getEnzymeAliases(enzyme);
-  const entities = cutsiteGroup
-    .sort((a, b) => a.topSnipPosition - b.topSnipPosition)
-    .map(
-      ({
-        restrictionEnzyme: { forwardRegex, reverseRegex } = {},
-        forward,
-        id,
-        topSnipBeforeBottom,
-        topSnipPosition,
-        bottomSnipPosition
-      }) => {
-        return {
-          id,
-          topSnipPosition,
-          position: topSnipBeforeBottom
-            ? topSnipPosition + " - " + bottomSnipPosition
-            : bottomSnipPosition + " - " + topSnipPosition,
-          strand:
-            forwardRegex === reverseRegex ? "Palindromic" : forward ? "1" : "-1"
-        };
-      }
-    );
+      dispatch({
+        type: "CARET_POSITION_UPDATE",
+        payload: record.topSnipPosition,
+        meta: {
+          editorName
+        }
+      });
+    },
+    [dispatch, editorName]
+  );
+
+  const aliases = useMemo(() => getEnzymeAliases(enzyme), [enzyme]);
+  const entities = useMemo(
+    () =>
+      cutsiteGroup
+        .sort((a, b) => a.topSnipPosition - b.topSnipPosition)
+        .map(
+          ({
+            restrictionEnzyme: { forwardRegex, reverseRegex } = {},
+            forward,
+            id,
+            topSnipBeforeBottom,
+            topSnipPosition,
+            bottomSnipPosition
+          }) => {
+            return {
+              id,
+              topSnipPosition,
+              position: topSnipBeforeBottom
+                ? topSnipPosition + " - " + bottomSnipPosition
+                : bottomSnipPosition + " - " + topSnipPosition,
+              strand:
+                forwardRegex === reverseRegex
+                  ? "Palindromic"
+                  : forward
+                    ? "1"
+                    : "-1"
+            };
+          }
+        ),
+    [cutsiteGroup]
+  );
 
   return (
     <div>
@@ -61,14 +79,12 @@ export default function SingleEnzymeCutsiteInfo({
       >
         {enzyme && (
           <EnzymeViewer
-            {...{
-              sequence: enzyme.site,
-              reverseSnipPosition: enzyme.bottomSnipOffset,
-              forwardSnipPosition: enzyme.topSnipOffset
-            }}
+            sequence={enzyme.site}
+            reverseSnipPosition={enzyme.bottomSnipOffset}
+            forwardSnipPosition={enzyme.topSnipOffset}
           />
         )}
-        <br></br>
+        <br />
         {entities && !!entities.length && (
           <div>
             <DataTable
@@ -106,7 +122,7 @@ export default function SingleEnzymeCutsiteInfo({
                     key={i}
                     name={n}
                     doNotShowCuts
-                  ></CutsiteTag>
+                  />
                 );
               })}
             </div>
@@ -117,14 +133,6 @@ export default function SingleEnzymeCutsiteInfo({
   );
 }
 
-const schema = {
-  fields: [
-    { path: "topSnipPosition", displayName: "Top Snip", type: "string" },
-    { path: "position", type: "string" },
-    { path: "strand", type: "string" }
-  ]
-};
-
 // export default compose(
 //   withEditorProps,
 //   withRestrictionEnzymes