@teselagen/ove 0.5.31-beta.3 → 0.5.32-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.5.31-beta.3",
+  "version": "0.5.32-beta.1",
   "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.5.23-beta.12",
+    "@teselagen/ui": "0.5.24-beta.1",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",
@@ -57,6 +57,8 @@
     "lodash": "4.17.21",
     "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",
@@ -66,16 +68,16 @@
     "popper.js": "^1.16.1",
     "prop-types": "^15.6.2",
     "qs": "^6.9.6",
-    "react": "^18.3.1",
+    "react": "^18.2.0",
     "react-color": "^2.19.3",
-    "react-dom": "^18.3.1",
+    "react-dom": "^18.2.0",
     "react-draggable": "4.4.5",
     "react-dropzone": "^11.4.2",
-    "react-markdown": "8.0.7",
+    "react-markdown": "9.0.1",
     "react-measure": "^2.5.2",
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
-    "react-router-dom": "4",
+    "react-router-dom": "^4.3.1",
     "react-sizeme": "^2.6.12",
     "react-transition-group": "^2.4.0",
     "recompose": "npm:react-recompose@0.31.1",

package/src/CutsiteFilter/index.js

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

package/src/DigestTool/DigestTool.js

@@ -2,7 +2,7 @@
 // import Ladder from "./Ladder";
 import { compose, withProps } from "recompose";
 // import selectionLayer from "../redux/selectionLayer";
-import React, { useState } from "react";
+import React from "react";
 import { DataTable } from "@teselagen/ui";
 import { getCutsiteType, getVirtualDigest } from "@teselagen/sequence-utils";
 import CutsiteFilter from "../CutsiteFilter";
@@ -18,154 +18,153 @@ import {
 } from "@blueprintjs/core";
 import withEditorInteractions from "../withEditorInteractions";
 import { userDefinedHandlersAndOpts } from "../Editor/userDefinedHandlersAndOpts";
-import { pick } from "lodash-es";
+import { noop, pick } from "lodash-es";
 
 const MAX_DIGEST_CUTSITES = 50;
 const MAX_PARTIAL_DIGEST_CUTSITES = 10;
-
-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
-  } = props;
-  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({});
+export class DigestTool extends React.Component {
+  state = { selectedTab: "virtualDigest" };
+  render() {
+    const {
+      editorName,
+      // height = 100,
+      dimensions = {},
+      lanes,
+      digestTool: { selectedFragment, computePartialDigest },
+      onDigestSave,
+      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);
             }}
-            style={{ marginLeft: 5 }}
+            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"
           >
-            {" "}
-            Save
-          </Button>
+            Read the docs
+          </a>
         </div>
-      )}
-      <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}
+        Choose your enzymes:
+        <CutsiteFilter
+          {...pick(this.props, userDefinedHandlersAndOpts)}
+          editorName={editorName}
         />
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="http://docs.teselagen.com/en/articles/5489322-restriction-digest-in-the-vector-editor"
-        >
-          Read the docs
-        </a>
-      </div>
-      Choose your enzymes:
-      <CutsiteFilter
-        {...pick(props, userDefinedHandlersAndOpts)}
-        editorName={editorName}
-      />
-      <br />
-      {computeDigestDisabled && (
-        <div
-          style={{
-            color: "red",
-            marginBottom: "6px",
-            fontSize: "15px"
+        <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 });
           }}
         >
-          {`>${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={({ onFragmentSelect }) => {
-                onFragmentSelect();
-              }}
-              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 />
-    </div>
-  );
-};
-
+          <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 />
+      </div>
+    );
+  }
+}
 const schema = {
   fields: [
     { width: 60, path: "start", displayName: "Start", type: "string" },
@@ -180,46 +179,45 @@ const schema = {
 
 export default compose(
   withEditorInteractions,
-  withProps(
-    ({
+  withProps(props => {
+    const {
       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;
+    } = 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
-      };
-    }
-  )
+    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);

package/src/Editor/index.js

@@ -757,6 +757,11 @@ export class Editor extends React.Component {
                                   <Icon
                                     icon="small-cross"
                                     onClick={() => {
+                                      if (
+                                        this.props.onPanelTabClose &&
+                                        !this.props.onPanelTabClose(id)
+                                      )
+                                        return;
                                       closePanel(id);
                                     }}
                                     style={{ paddingLeft: 5 }}

package/src/PCRTool/PCRTool.js

@@ -123,10 +123,7 @@ function PCRTool(props) {
         inlineLabel
         tooltipError
         options={forwardPrimers}
-        defaultValue={
-          forwardPrimer ??
-          (forwardPrimers[0] ? forwardPrimers[0].value : undefined)
-        }
+        defaultValue={forwardPrimers[0] ? forwardPrimers[0].value : undefined}
         name="forwardPrimer"
         label="Forward Primer:"
       />
@@ -135,10 +132,7 @@ function PCRTool(props) {
         inlineLabel
         tooltipError
         options={reversePrimers}
-        defaultValue={
-          reversePrimer ??
-          (reversePrimers[0] ? reversePrimers[0].value : undefined)
-        }
+        defaultValue={reversePrimers[0] ? reversePrimers[0].value : undefined}
         name="reversePrimer"
         label="Reverse Primer:"
       />

package/src/helperComponents/AddOrEditAnnotationDialog/index.js

@@ -190,7 +190,7 @@ class AddOrEditAnnotationDialog extends React.Component {
       sequenceData = { sequence: "" },
       handleSubmit,
       beforeAnnotationCreate,
-      RenderTypes,
+      renderTypes,
       renderTags,
       RenderBases,
       allowMultipleFeatureDirections,
@@ -210,7 +210,6 @@ class AddOrEditAnnotationDialog extends React.Component {
       overlapsSelf,
       start,
       end,
-      type,
       readOnly,
       getAdditionalEditAnnotationComps,
       advancedOptions,
@@ -371,9 +370,7 @@ class AddOrEditAnnotationDialog extends React.Component {
             />
           ))}
 
-        {RenderTypes && (
-          <RenderTypes readOnly={this.props.readOnly} type={type}></RenderTypes>
-        )}
+        {renderTypes || null}
         {renderTags || null}
 
         {/* {allowPrimerBasesToBeEdited && RenderBases ? null : !renderLocations || */}
@@ -390,7 +387,7 @@ class AddOrEditAnnotationDialog extends React.Component {
               format={this.formatStart}
               parse={this.parseStart}
               tooltipError
-              defaultValue={start ?? 1}
+              defaultValue={1}
               min={1}
               max={sequenceLength || 1}
               name="start"
@@ -404,7 +401,7 @@ class AddOrEditAnnotationDialog extends React.Component {
               parse={this.parseEnd}
               inlineLabel
               tooltipError
-              defaultValue={end ?? (sequenceData.isProtein ? 3 : 1)}
+              defaultValue={sequenceData.isProtein ? 3 : 1}
               min={1}
               max={sequenceLength || 1}
               name="end"
@@ -572,7 +569,6 @@ export default ({ formName, getProps, dialogProps }) => {
     tgFormValues(
       "start",
       "end",
-      "type",
       "overlapsSelf",
       "locations",
       "bases",