@teselagen/ove 0.6.1-beta.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.6.1-beta.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.6.1-beta.1",
+    "@teselagen/ui": "0.7.6",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",
@@ -58,7 +58,6 @@
     "lodash-es": "^4.17.21",
     "math-expression-evaluator": "^1.3.7",
     "mobx": "^6.10.2",
-    "mobx-react": "^9.0.1",
     "mock-fs": "5.2.0",
     "nanoid": "^4.0.0",
     "node-interval-tree": "^1.3.3",
@@ -68,16 +67,16 @@
     "popper.js": "^1.16.1",
     "prop-types": "^15.6.2",
     "qs": "^6.9.6",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-draggable": "4.4.5",
     "react-dropzone": "^11.4.2",
-    "react-markdown": "9.0.1",
+    "react-markdown": "8.0.7",
     "react-measure": "^2.5.2",
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "4",
     "react-sizeme": "^2.6.12",
     "react-transition-group": "^2.4.0",
     "recompose": "npm:react-recompose@0.31.1",
@@ -85,7 +84,7 @@
     "redux-act": "^1.8.0",
     "redux-form": "^8.3.10",
     "redux-thunk": "2.4.1",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^3.0.1",
     "reselect": "^4.1.7",
     "shortid": "^2.2.16",
     "tg-use-local-storage-state": "^16.0.3",

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/CutsiteFilter/index.js

@@ -152,48 +152,46 @@ export function CutsiteFilter(props) {
     filteredRestrictionEnzymes.length > 1;
   const [queryTracker, setQueryTracker] = useState("");
 
-  const renderOptions = ({ label, value, canBeHidden }, props) => {
-    const { filteredRestrictionEnzymes, filteredRestrictionEnzymesUpdate } =
-      props;
+  const renderOptions = (
+    { label, value, canBeHidden },
+    { filteredRestrictionEnzymes, filteredRestrictionEnzymesUpdate }
+  ) => (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        width: "100%"
+      }}
+    >
+      {label}{" "}
+      {canBeHidden && (
+        <Icon
+          onClick={e => {
+            e.stopPropagation();
 
-    return (
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          width: "100%"
-        }}
-      >
-        {label}{" "}
-        {canBeHidden && (
-          <Icon
-            onClick={e => {
-              e.stopPropagation();
-
-              filteredRestrictionEnzymesUpdate(
-                flatMap(filteredRestrictionEnzymes, e => {
-                  if (e.value === value) return [];
-                  return e;
-                }).concat({
-                  label,
-                  className: "veHiddenEnzyme",
-                  value,
-                  // hiddenEnzyme: true,
-                  isHidden: true,
-                  canBeHidden
-                })
-              );
-            }}
-            htmlTitle="Hide this enzyme"
-            className="veHideEnzymeBtn"
-            style={{ paddingTop: 5 }}
-            iconSize={14}
-            icon="eye-off"
-          ></Icon>
-        )}
-      </div>
-    );
-  };
+            filteredRestrictionEnzymesUpdate(
+              flatMap(filteredRestrictionEnzymes, e => {
+                if (e.value === value) return [];
+                return e;
+              }).concat({
+                label,
+                className: "veHiddenEnzyme",
+                value,
+                // hiddenEnzyme: true,
+                isHidden: true,
+                canBeHidden
+              })
+            );
+          }}
+          htmlTitle="Hide this enzyme"
+          className="veHideEnzymeBtn"
+          style={{ paddingTop: 5 }}
+          iconSize={14}
+          icon="eye-off"
+        />
+      )}
+    </div>
+  );
   const filteredRestrictionEnzymesUpdate = enzymes => {
     _filteredRestrictionEnzymesUpdate(enzymes);
     if (sequenceData?.id) {
@@ -285,7 +283,7 @@ export function CutsiteFilter(props) {
           data-tip="Manage Enzymes"
           onClick={onManageClick}
           icon="cog"
-        ></Button>
+        />
       )}
       <div
         style={{
@@ -345,19 +343,17 @@ export function CutsiteFilter(props) {
           wrapperStyle={{ zIndex: 11 }}
           noResultsText={
             <NoResults
-              {...{
-                inputSequenceToTestAgainst: sequenceData.sequence,
-                manageEnzymesLink,
-                closeDropDown,
-                onHiddenEnzymeAdd,
-                queryString: queryTracker,
-                additionalEnzymes,
-                enzymeGroupsOverride,
-                cutsitesByNameActive: filteredCutsites.cutsitesByName,
-                cutsitesByName: allCutsites.cutsitesByName,
-                editorName
-              }}
-            ></NoResults>
+              inputSequenceToTestAgainst={sequenceData.sequence}
+              manageEnzymesLink={manageEnzymesLink}
+              closeDropDown={closeDropDown}
+              onHiddenEnzymeAdd={onHiddenEnzymeAdd}
+              queryString={queryTracker}
+              additionalEnzymes={additionalEnzymes}
+              enzymeGroupsOverride={enzymeGroupsOverride}
+              cutsitesByNameActive={filteredCutsites.cutsitesByName}
+              cutsitesByName={allCutsites.cutsitesByName}
+              editorName={editorName}
+            />
           }
           onInputChange={queryTracker => {
             setQueryTracker(queryTracker);

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 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,
@@ -18,153 +13,206 @@ import {
 } from "@blueprintjs/core";
 import withEditorInteractions from "../withEditorInteractions";
 import { userDefinedHandlersAndOpts } from "../Editor/userDefinedHandlersAndOpts";
-import { noop, pick } from "lodash-es";
+import { pick } from "lodash-es";
 
 const MAX_DIGEST_CUTSITES = 50;
 const MAX_PARTIAL_DIGEST_CUTSITES = 10;
-export class DigestTool extends React.Component {
-  state = { selectedTab: "virtualDigest" };
-  render() {
-    const {
-      editorName,
-      // height = 100,
-      dimensions = {},
-      lanes,
-      digestTool: { selectedFragment, computePartialDigest },
-      onDigestSave,
+const onSingleSelectRow = ({ onFragmentSelect }) => {
+  onFragmentSelect();
+};
+
+export const DigestTool = props => {
+  const [selectedTab, setSelectedTab] = useState("virtualDigest");
+  const {
+    editorName,
+    dimensions = {},
+    digestTool: { selectedFragment, computePartialDigest },
+    onDigestSave,
+    updateComputePartialDigest,
+    boxHeight,
+    digestLaneRightClicked,
+    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,
-      updateComputePartialDigest
-    } = this.props;
-    const { selectedTab } = this.state;
-    return (
-      <div
-        style={{
-          height:
-            typeof dimensions.height === "string" ? 100 : dimensions.height,
-          overflowY: "auto",
-          padding: 10
-        }}
-      >
-        {onDigestSave && (
-          <div style={{ display: "flex", marginBottom: 10 }}>
-            <InputGroup placeholder="My Digest" />
-            <Button
-              intent={Intent.PRIMARY}
-              onClick={() => {
-                onDigestSave({});
-              }}
-              style={{ marginLeft: 5 }}
-            >
-              {" "}
-              Save
-            </Button>
-          </div>
-        )}
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <Checkbox
-            onChange={() => {
-              updateComputePartialDigest(!computePartialDigest);
+      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={{
+        height: typeof dimensions.height === "string" ? 100 : dimensions.height,
+        overflowY: "auto",
+        padding: 10
+      }}
+    >
+      {onDigestSave && (
+        <div style={{ display: "flex", marginBottom: 10 }}>
+          <InputGroup placeholder="My Digest" />
+          <Button
+            intent={Intent.PRIMARY}
+            onClick={() => {
+              onDigestSave({});
             }}
-            checked={computePartialDigest}
-            label={
-              <span>
-                Show Partial Digests{" "}
-                {computePartialDigestDisabled ? (
-                  <span style={{ fontSize: 10 }}>
-                    {" "}
-                    -- Disabled (only supports {MAX_PARTIAL_DIGEST_CUTSITES} or
-                    fewer cut sites){" "}
-                  </span>
-                ) : null}
-              </span>
-            }
-            disabled={computePartialDigestDisabled}
-          ></Checkbox>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="http://docs.teselagen.com/en/articles/5489322-restriction-digest-in-the-vector-editor"
+            style={{ marginLeft: 5 }}
           >
-            Read the docs
-          </a>
+            {" "}
+            Save
+          </Button>
         </div>
-        Choose your enzymes:
-        <CutsiteFilter
-          {...pick(this.props, userDefinedHandlersAndOpts)}
-          editorName={editorName}
-        />
-        <br />
-        {computeDigestDisabled && (
-          <div
-            style={{
-              color: "red",
-              marginBottom: "6px",
-              fontSize: "15px"
-            }}
-          >
-            {`>${MAX_DIGEST_CUTSITES} cut sites detected. Filter out additional
-            restriction enzymes to visualize digest results`}
-          </div>
-        )}
-        <Tabs
-          selectedTabId={selectedTab}
-          onChange={id => {
-            this.setState({ selectedTab: id });
+      )}
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <Checkbox
+          onChange={() => {
+            updateComputePartialDigest(!computePartialDigest);
           }}
+          checked={computePartialDigest}
+          label={
+            <span>
+              Show Partial Digests{" "}
+              {computePartialDigestDisabled ? (
+                <span style={{ fontSize: 10 }}>
+                  {" "}
+                  -- Disabled (only supports {MAX_PARTIAL_DIGEST_CUTSITES} or
+                  fewer cut sites){" "}
+                </span>
+              ) : null}
+            </span>
+          }
+          disabled={computePartialDigestDisabled}
+        />
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://docs.teselagen.com/en/articles/5489322-restriction-digest-in-the-vector-editor"
         >
-          <Tab
-            title="Virtual Digest"
-            id="virtualDigest"
-            panel={<Ladder {...this.props} editorName={editorName} />}
-          />
-          <Tab
-            title="Digest Info"
-            id="table"
-            panel={
-              <DataTable
-                noRouter
-                isSimple
-                maxHeight={400}
-                // noFooter
-                withSearch={false}
-                onSingleRowSelect={({ onFragmentSelect }) => {
-                  onFragmentSelect();
-                }}
-                reduxFormSelectedEntityIdMap={{
-                  input: {
-                    value: {
-                      [selectedFragment]: true
-                    },
-                    onChange: noop
-                  }
-                }}
-                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)
-                    };
-                  }
-                )}
-                schema={schema}
-              />
-            }
-          />
-        </Tabs>
-        <br />
+          Read the docs
+        </a>
       </div>
-    );
-  }
-}
+      Choose your enzymes:
+      <CutsiteFilter
+        {...pick(props, userDefinedHandlersAndOpts)}
+        editorName={editorName}
+      />
+      <br />
+      {computeDigestDisabled && (
+        <div
+          style={{
+            color: "red",
+            marginBottom: "6px",
+            fontSize: "15px"
+          }}
+        >
+          {`>${MAX_DIGEST_CUTSITES} cut sites detected. Filter out additional
+            restriction enzymes to visualize digest results`}
+        </div>
+      )}
+      <Tabs
+        selectedTabId={selectedTab}
+        onChange={id => {
+          setSelectedTab(id);
+        }}
+      >
+        <Tab
+          title="Virtual Digest"
+          id="virtualDigest"
+          panel={
+            <Ladder
+              boxHeight={boxHeight}
+              lanes={lanes}
+              digestLaneRightClicked={digestLaneRightClicked}
+              selectedFragment={selectedFragment}
+              ladders={ladders}
+            />
+          }
+        />
+        <Tab
+          title="Digest Info"
+          id="table"
+          panel={
+            <DataTable
+              noRouter
+              isSimple
+              maxHeight={400}
+              // noFooter
+              withSearch={false}
+              onSingleRowSelect={onSingleSelectRow}
+              formName="digestInfoTable"
+              entities={digestInfoLanes}
+              schema={schema}
+            />
+          }
+        />
+      </Tabs>
+      <br />
+    </div>
+  );
+};
+
 const schema = {
   fields: [
     { width: 60, path: "start", displayName: "Start", type: "string" },
@@ -177,47 +225,4 @@ const schema = {
   ]
 };
 
-export default compose(
-  withEditorInteractions,
-  withProps(props => {
-    const {
-      sequenceData,
-      sequenceLength,
-      selectionLayerUpdate,
-      updateSelectedFragment,
-      digestTool: { computePartialDigest }
-    } = props;
-    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();
 }