@teselagen/ove 0.6.1-beta.1 → 0.7.3-beta.1

package/package.json

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

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

@@ -2,7 +2,7 @@
 // import Ladder from "./Ladder";
 import { compose, withProps } from "recompose";
 // import selectionLayer from "../redux/selectionLayer";
-import React from "react";
+import React, { useState } from "react";
 import { DataTable } from "@teselagen/ui";
 import { getCutsiteType, getVirtualDigest } from "@teselagen/sequence-utils";
 import CutsiteFilter from "../CutsiteFilter";
@@ -18,153 +18,154 @@ 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,
-      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);
+
+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({});
             }}
-            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={({ 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>
+  );
+};
+
 const schema = {
   fields: [
     { width: 60, path: "start", displayName: "Start", type: "string" },
@@ -179,45 +180,46 @@ const schema = {
 
 export default compose(
   withEditorInteractions,
-  withProps(props => {
-    const {
+  withProps(
+    ({
       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 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/PCRTool/PCRTool.js

@@ -123,7 +123,10 @@ function PCRTool(props) {
         inlineLabel
         tooltipError
         options={forwardPrimers}
-        defaultValue={forwardPrimers[0] ? forwardPrimers[0].value : undefined}
+        defaultValue={
+          forwardPrimer ??
+          (forwardPrimers[0] ? forwardPrimers[0].value : undefined)
+        }
         name="forwardPrimer"
         label="Forward Primer:"
       />
@@ -132,7 +135,10 @@ function PCRTool(props) {
         inlineLabel
         tooltipError
         options={reversePrimers}
-        defaultValue={reversePrimers[0] ? reversePrimers[0].value : undefined}
+        defaultValue={
+          reversePrimer ??
+          (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,6 +210,7 @@ class AddOrEditAnnotationDialog extends React.Component {
       overlapsSelf,
       start,
       end,
+      type,
       readOnly,
       getAdditionalEditAnnotationComps,
       advancedOptions,
@@ -370,7 +371,9 @@ class AddOrEditAnnotationDialog extends React.Component {
             />
           ))}
 
-        {renderTypes || null}
+        {RenderTypes && (
+          <RenderTypes readOnly={this.props.readOnly} type={type}></RenderTypes>
+        )}
         {renderTags || null}
 
         {/* {allowPrimerBasesToBeEdited && RenderBases ? null : !renderLocations || */}
@@ -387,7 +390,7 @@ class AddOrEditAnnotationDialog extends React.Component {
               format={this.formatStart}
               parse={this.parseStart}
               tooltipError
-              defaultValue={1}
+              defaultValue={start ?? 1}
               min={1}
               max={sequenceLength || 1}
               name="start"
@@ -401,7 +404,7 @@ class AddOrEditAnnotationDialog extends React.Component {
               parse={this.parseEnd}
               inlineLabel
               tooltipError
-              defaultValue={sequenceData.isProtein ? 3 : 1}
+              defaultValue={end ?? (sequenceData.isProtein ? 3 : 1)}
               min={1}
               max={sequenceLength || 1}
               name="end"
@@ -569,6 +572,7 @@ export default ({ formName, getProps, dialogProps }) => {
     tgFormValues(
       "start",
       "end",
+      "type",
       "overlapsSelf",
       "locations",
       "bases",

package/src/helperComponents/AddOrEditFeatureDialog/index.js

@@ -7,13 +7,13 @@ import {
 import AddOrEditAnnotationDialog from "../AddOrEditAnnotationDialog";
 import { ReactSelectField } from "@teselagen/ui";
 
-const renderTypes = ({ readOnly }) => (
+const RenderTypes = ({ readOnly, type }) => (
   <ReactSelectField
     inlineLabel
     tooltipError
     disabled={readOnly}
-    defaultValue="misc_feature"
-    options={getFeatureTypes().map(type => {
+    defaultValue={type ?? "misc_feature"}
+    options={getFeatureTypes().map(featureType => {
       return {
         label: (
           <div
@@ -25,16 +25,18 @@ const renderTypes = ({ readOnly }) => (
           >
             <div
               style={{
-                background: getFeatureToColorMap({ includeHidden: true })[type],
+                background: getFeatureToColorMap({ includeHidden: true })[
+                  featureType
+                ],
                 height: 15,
                 width: 15,
                 marginRight: 5
               }}
             />
-            {type}
+            {featureType}
           </div>
         ),
-        value: type
+        value: featureType
       };
     })}
     name="type"
@@ -52,7 +54,7 @@ export default AddOrEditAnnotationDialog({
     upsertAnnotation: props.upsertFeature,
     // renderLocations: true, //tnw enable this eventually for proteins
     renderLocations: !props.sequenceData.isProtein,
-    renderTypes: renderTypes({ readOnly: props.readOnly }),
+    RenderTypes,
     annotationTypePlural: "features"
   })
 });