@teselagen/ove 0.7.3-beta.7 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.3-beta.7",
+  "version": "0.7.3",
   "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",

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();
 }
 

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