fix: Digest Tool

packages/ove/cypress/e2e/oligoMode.spec.js

@@ -15,7 +15,7 @@ describe("oligo mode editing in OVE", function () {
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(0);
     cy.focused().type("gatccaauu{enter}");
-    cy.contains("Selecting 9 bps from 10 to 18"); //the t's should be filtered out
+    cy.contains("Selecting 10 bps from 10 to 19"); //the t's should be filtered out
     cy.contains("gatccaauu");
     cy.get(".veTabProperties").click();
     cy.contains("Circular/Linear:").should("not.exist");

packages/ove/cypress/e2e/properties.spec.js

@@ -21,7 +21,7 @@ describe("properties", function () {
     cy.contains("textarea", `primer_bind complement(10..20)`);
     cy.contains("textarea", `/label="fakeprimer"`);
   });
-  it(`should be able to delete a feature from the properties tab and not have the delete button still enabled; 
+  it(`should be able to delete a feature from the properties tab and not have the delete button still enabled;
    - have the number of features correctly displayed
    -not be able to create a new feature if sequenceLength === 0`, () => {
     cy.get(".veTabProperties").click();
@@ -38,7 +38,7 @@ describe("properties", function () {
     cy.get(".tg-menu-bar").contains("Edit").click();
     cy.get(".tg-menu-bar-popover").contains("Select All").click();
     cy.get(".veSelectionLayer").first().trigger("contextmenu", { force: true });
-    cy.get(".bp3-menu-item").contains("Cut").click();
+    cy.get(".bp3-menu-item").contains("Cut").realClick();
     cy.get(".tgNewAnnBtn").should("have.class", "bp3-disabled");
   });
   it(`a custom properties tab should be able to be added`, () => {
@@ -53,7 +53,7 @@ describe("properties", function () {
     cy.get(".circularLinearSelect select").select("Linear");
     cy.contains(".bp3-dialog", "Truncate Annotations").should("be.visible");
   });
-  it(`we should be able to view and edit a description in general properties 
+  it(`we should be able to view and edit a description in general properties
   and have that visible within the genbank view as well we should be able to edit a description in general properties, not make any changes, hit ok, and have the description not clear (bug! https://github.com/TeselaGen/lims/issues/5492)
   // and have that visible within the genbank view as well`, () => {
     cy.get(".veTabProperties").click();

packages/ove/src/CreateAnnotationsPage.js

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

packages/ove/src/DigestTool/DigestTool.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { DataTable } from "@teselagen/ui";
+import { DataTable, useStableReference } from "@teselagen/ui";
 import { getCutsiteType, getVirtualDigest } from "@teselagen/sequence-utils";
 import CutsiteFilter from "../CutsiteFilter";
 import Ladder from "./Ladder";
@@ -17,6 +17,9 @@ 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");
@@ -31,7 +34,7 @@ export const DigestTool = props => {
     ladders,
     sequenceData,
     sequenceLength,
-    selectionLayerUpdate,
+    selectionLayerUpdate: _selectionLayerUpdate,
     updateSelectedFragment
   } = props;
 
@@ -40,7 +43,12 @@ export const DigestTool = props => {
   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,
@@ -50,11 +58,11 @@ export const DigestTool = props => {
       computePartialDigestDisabled,
       computeDigestDisabled
     });
-    const lanes = [
+    const _lanes = [
       fragments.map(f => ({
         ...f,
         onFragmentSelect: () => {
-          selectionLayerUpdate({
+          selectionLayerUpdate.current({
             start: f.start,
             end: f.end,
             name: f.name
@@ -63,7 +71,7 @@ export const DigestTool = props => {
         }
       }))
     ];
-    return lanes;
+    return _lanes;
   }, [
     computeDigestDisabled,
     computePartialDigest,
@@ -75,6 +83,25 @@ export const DigestTool = props => {
     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={{
@@ -173,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}
             />
           }