@teselagen/ove 0.7.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "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.1",
+    "@teselagen/ui": "0.7.6",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",

package/src/AutoAnnotate.js

@@ -257,6 +257,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                     <div>
                       <DataTable
                         isInfinite
+                        formName={"customAnnsTable"}
                         schema={
                           annotationType === "feature"
                             ? customAnnsSchema

package/src/CircularView/Labels/index.js

@@ -416,23 +416,9 @@ function LabelLine(pointArray, options) {
   });
   return (
     <React.Fragment key="labelLine">
-      {/* <polyline
-        {...{
-          key: "polyline-short",
-          points,
-          stroke: "black",
-          fill: "none",
-          strokeWidth: 1,
-          // style: {
-          //   opacity: 0.2
-          // },
-          className: "veLabelLine",
-          ...options
-        }}
-      /> */}
       <polyline
+        key="polyline-long"
         {...{
-          key: "polyline-long",
           points,
           stroke: "black",
           fill: "none",

package/src/CircularView/index.js

@@ -597,12 +597,11 @@ export function CircularView(props) {
         ) {
           return (
             <SelectionLayer
-              key={index}
+              key={"veCircularViewSelectionLayer" + index}
               {...{
                 index,
                 isDraggable: true,
                 isProtein,
-                key: "veCircularViewSelectionLayer" + index,
                 selectionLayer,
                 onRightClicked: selectionLayer.isSearchLayer
                   ? searchLayerRightClicked
@@ -635,13 +634,13 @@ export function CircularView(props) {
       //only render if there is no selection layer
       return (
         <Caret
+          key="veCircularViewCaret"
           {...{
             caretPosition,
             sequenceLength,
             isProtein,
             innerRadius,
-            outerRadius: radius,
-            key: "veCircularViewCaret"
+            outerRadius: radius
           }}
         />
       );

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/Reflex/reflex-styles.css

@@ -34,19 +34,19 @@
 }
 
 .reflex-layout > .reflex-splitter {
-  background-color: #f5f8fa;
+  background-color: #f1f1f1;
   z-index: 100;
 }
 
 .reflex-layout > .reflex-splitter.active,
 .reflex-layout > .reflex-splitter:hover {
-  background-color: #f5f8fa;
+  background-color: #cccccc;
   transition: all 1s ease;
 }
 
 .reflex-layout.horizontal > .reflex-splitter {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #f1f1f1;
+  border-top: 1px solid #f1f1f1;
   cursor: row-resize;
   width: 100%;
   height: 2px;
@@ -54,13 +54,13 @@
 
 .reflex-layout.horizontal > .reflex-splitter:hover,
 .reflex-layout.horizontal > .reflex-splitter.active {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #cccccc;
+  border-top: 1px solid #cccccc;
 }
 
 .reflex-layout.vertical > .reflex-splitter {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #f1f1f1;
+  border-left: 1px solid #f1f1f1;
   cursor: col-resize;
   height: 95%;
   width: 2px;
@@ -73,8 +73,8 @@
 
 .reflex-layout.vertical > .reflex-splitter:hover,
 .reflex-layout.vertical > .reflex-splitter.active {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #cccccc;
+  border-left: 1px solid #cccccc;
 }
 
 .reflex-layout > .reflex-splitter.reflex-thin {

package/src/RowItem/CutsiteSelectionLayers.js

@@ -26,10 +26,10 @@ export const CutsiteSelectionLayers = connectToEditor(
         layer.start > -1 && (
           <SelectionLayer
             hideTitle
+            key={"restrictionSiteRange" + index}
             {...annotationCommonProps}
             {...{
               id: cutsite.id,
-              key: "restrictionSiteRange" + index,
               height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
               regions: [layer],
               row: alignmentData

package/src/RowItem/SelectionLayer/index.js

@@ -105,6 +105,7 @@ function SelectionLayer(props) {
               caretSvgs = [
                 overlap.start === start && (
                   <Caret
+                    key={key + "caret1"}
                     {...{
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
@@ -115,7 +116,6 @@ function SelectionLayer(props) {
                       getGaps,
                       isDraggable,
                       ignoreGaps,
-                      key: key + "caret1",
                       sequenceLength,
                       className:
                         classNameToPass +
@@ -127,6 +127,7 @@ function SelectionLayer(props) {
                 ),
                 overlap.end === end && (
                   <Caret
+                    key={key + "caret2"}
                     {...{
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
@@ -137,7 +138,6 @@ function SelectionLayer(props) {
                       getGaps,
                       style: selectionLayer.style,
                       ignoreGaps,
-                      key: key + "caret2",
                       sequenceLength,
                       className:
                         classNameToPass +

package/src/RowItem/Sequence.js

@@ -175,7 +175,6 @@ class Sequence extends React.Component {
               width,
               position: "absolute"
             }}
-            ref="rowViewTextContainer"
             className="rowViewTextContainer"
             height={Math.max(0, Number(height))}
           >

package/src/RowItem/Translations/Translation.js

@@ -69,6 +69,7 @@ class Translation extends React.Component {
           nextAaSliver = aminoAcidsForSubrange[index + 2];
           return (
             <rect
+              key={annotation.id + aminoAcidSliver.sequenceIndex}
               x={index * charWidth}
               y={height / 2 - height / 16}
               width={charWidth}

package/src/RowItem/index.js

@@ -561,7 +561,6 @@ export default function RowItem(props) {
                     height: sequenceHeight,
                     position: "absolute"
                   }}
-                  ref="rowViewTextContainer"
                   onClick={function (event) {
                     replacementLayerClicked({
                       annotation: replacementLayer,