@teselagen/ove 0.6.1-beta.1 → 0.7.2

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/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,

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"
   })
 });

package/src/helperComponents/AddOrEditPartDialog/index.js

@@ -9,12 +9,12 @@ import {
 import { getFeatureTypes } from "@teselagen/sequence-utils";
 import { get } from "lodash-es";
 
-const renderTypes = ({ readOnly }) => (
+const RenderTypes = ({ readOnly, type }) => (
   <ReactSelectField
     inlineLabel
     tooltipError
     disabled={readOnly}
-    defaultValue="misc_feature"
+    defaultValue={type ?? "misc_feature"}
     options={getFeatureTypes().map(type => {
       return {
         label: type,
@@ -88,7 +88,7 @@ export default AddOrEditAnnotationDialog({
     advancedOptions: props.allowPartsToOverlapSelf
       ? renderAdvancedOptions({ readOnly: props.readOnly })
       : undefined,
-    renderTypes: renderTypes({ readOnly: props.readOnly }),
+    RenderTypes,
     renderTags:
       props.allPartTags &&
       getRenderTags({

package/src/helperComponents/AddOrEditPrimerDialog/index.js

@@ -33,9 +33,9 @@ const CustomContentEditable = generateField(function CustomContentEditable({
   start,
   end,
   primerBindsOn,
-  bases,
   forward
 }) {
+  const bases = input.value;
   const [hasTempError, setTempError] = useState(false);
   const inputRef = useRef(null);
   const [caretPosition, setCaretPosition] = useState({ start: 0, end: 0 });
@@ -194,7 +194,7 @@ const RenderBases = props => {
           label="Linked Oligo?"
           tooltipInfo={`Check this box to link this primer to an oligo in your Oligo Library. If the primer bases match exactly the bases of an existing oligo, it will be linked to that existing oligo. If the bases don't match, a new oligo will be created in the library.`}
           noMarginBottom
-          defaultValue={true}
+          defaultValue={useLinkedOligo ?? true}
           disabled={readOnly}
         ></CheckboxField>
         {useLinkedOligo && (
@@ -221,11 +221,7 @@ const RenderBases = props => {
             sequenceLength={sequenceLength}
             disabled={readOnly}
             {...props}
-            {...(defaultValue
-              ? {
-                  defaultValue
-                }
-              : {})}
+            defaultValue={bases ?? defaultValue}
             name="bases"
             label={
               <div className="tg-bases-label">

package/src/helperComponents/PropertiesDialog/CutsiteProperties.js

@@ -1,16 +1,12 @@
-import React from "react";
-import {
-  DataTable,
-  withSelectedEntities,
-  createCommandMenu
-} from "@teselagen/ui";
-import { map, get } from "lodash-es";
+import React, { useCallback, useMemo } from "react";
+import { DataTable, createCommandMenu } from "@teselagen/ui";
+import { get } from "lodash-es";
 import CutsiteFilter from "../../CutsiteFilter";
 import { Button, ButtonGroup } from "@blueprintjs/core";
 import { connectToEditor } from "../../withEditorProps";
 import { compose } from "recompose";
 import selectors from "../../selectors";
-import commands from "../../commands";
+import _commands from "../../commands";
 import { userDefinedHandlersAndOpts } from "../../Editor/userDefinedHandlersAndOpts";
 import { pick } from "lodash-es";
 import SingleEnzymeCutsiteInfo from "./SingleEnzymeCutsiteInfo";
@@ -18,105 +14,107 @@ import { withRestrictionEnzymes } from "../../CutsiteFilter/withRestrictionEnzym
 import { cutsitesSubmenu } from "../../MenuBar/viewSubmenu";
 import { getVisFilter } from "./GenericAnnotationProperties";
 
-class CutsiteProperties extends React.Component {
-  constructor(props) {
-    super(props);
-    this.commands = commands(this);
-  }
+const schema = {
+  fields: [
+    { path: "name", type: "string" },
+    { path: "numberOfCuts", type: "number" },
+    { path: "groups", type: "string" }
+  ]
+};
 
-  SubComponent = row => {
-    return (
-      <SingleEnzymeCutsiteInfo
-        {...{
-          allRestrictionEnzymes: this.props.allRestrictionEnzymes,
-          allCutsites: this.props.allCutsites,
-          filteredCutsites: this.props.filteredCutsites,
-          editorName: this.props.editorName,
-          dispatch: this.props.dispatch,
-          selectedAnnotationId: this.props.selectedAnnotationId,
-          cutsiteGroup: row.original.cutsiteGroup,
-          enzyme: row.original.enzyme
-        }}
-      ></SingleEnzymeCutsiteInfo>
-    );
-  };
+const defaultValues = { order: ["numberOfCuts"] };
 
-  schema = {
-    fields: [
-      { path: "name", type: "string" },
-      { path: "numberOfCuts", type: "number" },
-      { path: "groups", type: "string" }
-    ]
-  };
+const CutsiteProperties = props => {
+  const commands = _commands({ props });
+  const {
+    allRestrictionEnzymes,
+    allCutsites,
+    annotationVisibilityShow,
+    createNewDigest,
+    dispatch,
+    editorName,
+    filteredCutsites,
+    selectedAnnotationId
+  } = props;
 
-  onChangeHook = () => {
-    this.props.annotationVisibilityShow("cutsites");
-  };
-  render() {
-    const {
+  const SubComponent = useCallback(
+    row => (
+      <SingleEnzymeCutsiteInfo
+        allRestrictionEnzymes={allRestrictionEnzymes}
+        allCutsites={allCutsites}
+        filteredCutsites={filteredCutsites}
+        editorName={editorName}
+        dispatch={dispatch}
+        selectedAnnotationId={selectedAnnotationId}
+        cutsiteGroup={row.original.cutsiteGroup}
+        enzyme={row.original.enzyme}
+      />
+    ),
+    [
+      allCutsites,
+      allRestrictionEnzymes,
+      dispatch,
       editorName,
-      createNewDigest,
-      filteredCutsites: allCutsites,
+      filteredCutsites,
       selectedAnnotationId
-    } = this.props;
+    ]
+  );
 
-    const { cutsitesByName, cutsitesById } = allCutsites;
-    const cutsitesToUse = map(cutsitesByName, cutsiteGroup => {
-      const name = cutsiteGroup[0].restrictionEnzyme.name;
-      let groups = "";
-      const exisitingEnzymeGroups = window.getExistingEnzymeGroups();
+  const onChangeHook = useCallback(() => {
+    annotationVisibilityShow("cutsites");
+  }, [annotationVisibilityShow]);
 
-      Object.keys(exisitingEnzymeGroups).forEach(key => {
-        if (exisitingEnzymeGroups[key].includes(name)) groups += key;
-        groups += " ";
-      });
+  const { cutsitesByName, cutsitesById } = filteredCutsites;
 
-      return {
-        cutsiteGroup,
-        id: name,
-        name,
-        numberOfCuts: cutsiteGroup.length,
-        enzyme: cutsiteGroup[0].restrictionEnzyme,
-        groups
-        // size: getRangeLength(cutsiteGroup, sequenceData.sequence.length)
-      };
-    });
-    return (
-      <>
-        <div
-          style={{
-            marginBottom: 10,
-            paddingTop: 3,
-            display: "flex",
-            // flexWrap: 'wrap',
-            width: "100%",
-            // justifyContent: "space-between",
-            alignItems: "center"
-          }}
-        >
-          {/* <CmdCheckbox prefix="Show " cmd={this.commands.toggleCutsites} />
+  const cutsitesToUse = useMemo(
+    () =>
+      Object.values(cutsitesByName || {}).map(cutsiteGroup => {
+        const name = cutsiteGroup[0].restrictionEnzyme.name;
+        let groups = "";
+        const exisitingEnzymeGroups = window.getExistingEnzymeGroups();
+
+        Object.keys(exisitingEnzymeGroups).forEach(key => {
+          if (exisitingEnzymeGroups[key].includes(name)) groups += key;
+          groups += " ";
+        });
+
+        return {
+          cutsiteGroup,
+          id: name,
+          name,
+          numberOfCuts: cutsiteGroup.length,
+          enzyme: cutsiteGroup[0].restrictionEnzyme,
+          groups
+        };
+      }),
+    [cutsitesByName]
+  );
+
+  const selectedIds = useMemo(
+    () => get(cutsitesById[selectedAnnotationId], "restrictionEnzyme.name"),
+    [cutsitesById, selectedAnnotationId]
+  );
+
+  return (
+    <>
+      <div
+        style={{
+          marginBottom: 10,
+          paddingTop: 3,
+          display: "flex",
+          // flexWrap: 'wrap',
+          width: "100%",
+          // justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        {getVisFilter(
+          createCommandMenu(cutsitesSubmenu, commands, {
+            useTicks: true
+          })
+        )}
+        <ButtonGroup>
           <Button
-            style={{ marginLeft: 10, cursor: "auto" }}
-            disabled
-            minimal
-            icon="filter"
-          /> */}
-          {getVisFilter(
-            createCommandMenu(cutsitesSubmenu, this.commands, {
-              useTicks: true
-            })
-          )}
-          <ButtonGroup>
-            <Button
-              intent="success"
-              data-tip="Virtual Digest"
-              icon="cut"
-              style={{ marginLeft: 15, flexGrow: -1 }}
-              onClick={() => {
-                createNewDigest();
-              }}
-            ></Button>
-            {/* <Button
             intent="success"
             data-tip="Virtual Digest"
             icon="cut"
@@ -124,43 +122,37 @@ class CutsiteProperties extends React.Component {
             onClick={() => {
               createNewDigest();
             }}
-          >
-          </Button> */}
-          </ButtonGroup>
-
-          <CutsiteFilter
-            {...pick(this.props, userDefinedHandlersAndOpts)}
-            style={{ marginLeft: "auto", marginRight: 3 }}
-            editorName={editorName}
-            manageEnzymesToLeft
-            onChangeHook={this.onChangeHook}
           />
-        </div>
-        <DataTable
-          selectedIds={get(
-            cutsitesById[selectedAnnotationId],
-            "restrictionEnzyme.name"
-          )}
-          compact
-          noSelect
-          noHeader
-          noFooter
-          withExpandAndCollapseAllButton
-          noFullscreenButton
-          noPadding
-          defaults={{ order: ["numberOfCuts"] }}
-          formName="cutsiteProperties"
-          noRouter
-          withSearch={false}
-          SubComponent={this.SubComponent}
-          isInfinite
-          schema={this.schema}
-          entities={cutsitesToUse}
+        </ButtonGroup>
+        <CutsiteFilter
+          {...pick(props, userDefinedHandlersAndOpts)}
+          style={{ marginLeft: "auto", marginRight: 3 }}
+          editorName={editorName}
+          manageEnzymesToLeft
+          onChangeHook={onChangeHook}
         />
-      </>
-    );
-  }
-}
+      </div>
+      <DataTable
+        selectedIds={selectedIds}
+        compact
+        noSelect
+        noHeader
+        noFooter
+        withExpandAndCollapseAllButton
+        noFullscreenButton
+        noPadding
+        defaults={defaultValues}
+        formName="cutsiteProperties"
+        noRouter
+        withSearch={false}
+        SubComponent={SubComponent}
+        isInfinite
+        schema={schema}
+        entities={cutsitesToUse}
+      />
+    </>
+  );
+};
 
 export default compose(
   connectToEditor((editorState, ownProps) => {
@@ -180,6 +172,5 @@ export default compose(
       cutsites: cutsites.cutsitesArray
     };
   }),
-  withRestrictionEnzymes,
-  withSelectedEntities("cutsiteProperties")
+  withRestrictionEnzymes
 )(CutsiteProperties);