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

package/src/helperComponents/AddOrEditFeatureDialog/index.js

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

package/src/helperComponents/PropertiesDialog/GenericAnnotationProperties.js

@@ -44,58 +44,15 @@ const genericAnnotationProperties = ({
     constructor(props) {
       super(props);
       this.commands = commands(this);
-    }
-    onRowSelect = ([record]) => {
-      if (!record) return;
-      const { dispatch, editorName } = this.props;
-      dispatch({
-        type: "SELECTION_LAYER_UPDATE",
-        payload: record,
-        meta: {
-          editorName
-        }
-      });
-    };
-    render() {
-      const {
-        readOnly,
-        annotations = {},
-        annotationVisibility,
-        sequenceLength,
-        selectionLayer,
-        sequence,
-        isProtein,
-        allPartTags,
-        annotationPropertiesSelectedEntities:
-          _annotationPropertiesSelectedEntities,
-        selectedAnnotationId
-      } = this.props;
-      const annotationPropertiesSelectedEntities =
-        _annotationPropertiesSelectedEntities.filter(a => annotations[a.id]);
-
-      const deleteAnnotation = this.props[`delete${annotationTypeUpper}`];
-
-      const annotationsToUse = map(annotations, annotation => {
-        return {
-          ...annotation,
-          ...(annotation.strand === undefined && {
-            strand: annotation.forward ? 1 : -1
-          }),
-          size: getRangeLength(annotation, sequenceLength)
-        };
-      });
-
-      const keyedPartTags = getKeyedTagsAndTagOptions(allPartTags) ?? {};
-
       this.schema = {
         fields: [
           {
             path: "name",
             type: "string",
 
-            render: (name, ann) => {
+            render: (name, ann, row, props) => {
               const checked =
-                !this.props.annotationVisibility[
+                !props.annotationVisibility[
                   `${annotationType}IndividualToHide`
                 ][ann.id];
 
@@ -107,9 +64,9 @@ const genericAnnotationProperties = ({
                       e.stopPropagation();
                       const upperType = startCase(annotationType);
                       if (checked) {
-                        this.props[`hide${upperType}Individual`]([ann.id]);
+                        props[`hide${upperType}Individual`]([ann.id]);
                       } else {
-                        this.props[`show${upperType}Individual`]([ann.id]);
+                        props[`show${upperType}Individual`]([ann.id]);
                       }
                     }}
                     style={{
@@ -132,10 +89,10 @@ const genericAnnotationProperties = ({
                 {
                   path: "bases",
                   type: "string",
-                  render: (bases, primer) => {
+                  render: (bases, primer, row, props) => {
                     let bps = bases;
                     if (!bases) {
-                      bps = getSequenceWithinRange(primer, this.props.sequence);
+                      bps = getSequenceWithinRange(primer, props.sequence);
                       if (!primer.forward) {
                         bps = getReverseComplementSequenceString(bps);
                       }
@@ -164,13 +121,13 @@ const genericAnnotationProperties = ({
                   }
                 }
               ]),
-          sizeSchema(this.props.isProtein),
+          sizeSchema,
           ...(withTags && this.props.allPartTags
             ? [
                 {
                   path: "tags",
                   type: "string",
-                  getValueToFilterOn: o => {
+                  getValueToFilterOn: (o, { keyedPartTags }) => {
                     const toRet = (o.tags || [])
                       .map(tagId => {
                         const tag = keyedPartTags[tagId];
@@ -180,7 +137,7 @@ const genericAnnotationProperties = ({
                       .join(" ");
                     return toRet;
                   },
-                  render: tags => {
+                  render: (tags, b, c, { keyedPartTags = {} }) => {
                     return (
                       <div style={{ display: "flex" }}>
                         {(tags || []).map((tagId, i) => {
@@ -197,6 +154,46 @@ const genericAnnotationProperties = ({
           { path: "strand", type: "number" }
         ]
       };
+    }
+    onRowSelect = ([record]) => {
+      if (!record) return;
+      const { dispatch, editorName } = this.props;
+      dispatch({
+        type: "SELECTION_LAYER_UPDATE",
+        payload: record,
+        meta: {
+          editorName
+        }
+      });
+    };
+    render() {
+      const {
+        readOnly,
+        annotations = {},
+        annotationVisibility,
+        sequenceLength,
+        selectionLayer,
+        sequence,
+        isProtein,
+        allPartTags,
+        annotationPropertiesSelectedEntities:
+          _annotationPropertiesSelectedEntities,
+        selectedAnnotationId
+      } = this.props;
+      const annotationPropertiesSelectedEntities =
+        _annotationPropertiesSelectedEntities.filter(a => annotations[a.id]);
+
+      const deleteAnnotation = this.props[`delete${annotationTypeUpper}`];
+
+      const annotationsToUse = map(annotations, annotation => {
+        return {
+          ...annotation,
+          ...(annotation.strand === undefined && {
+            strand: annotation.forward ? 1 : -1
+          }),
+          size: getRangeLength(annotation, sequenceLength)
+        };
+      });
 
       return (
         <DataTable
@@ -340,6 +337,7 @@ const genericAnnotationProperties = ({
           formName="annotationProperties"
           noRouter
           isProtein={isProtein}
+          keyedPartTags={getKeyedTagsAndTagOptions(allPartTags)}
           compact
           isInfinite
           schema={this.schema}

package/src/helperComponents/PropertiesDialog/OrfProperties.js

@@ -80,7 +80,7 @@ class OrfProperties extends React.Component {
                 displayName: "Size (aa)",
                 type: "number"
               },
-              sizeSchema(this.props.isProtein),
+              sizeSchema,
               { path: "frame", type: "number" },
               { path: "strand", type: "number" }
             ]

package/src/helperComponents/PropertiesDialog/utils.js

@@ -2,11 +2,11 @@ import React from "react";
 import { convertDnaCaretPositionOrRangeToAA } from "@teselagen/sequence-utils";
 import { convertRangeTo1Based } from "@teselagen/range-utils";
 
-export const sizeSchema = isProtein => ({
+export const sizeSchema = {
   path: "size",
   type: "number",
-  render: (val, _record) => {
-    const record = isProtein
+  render: (val, _record, i, props) => {
+    const record = props.isProtein
       ? convertDnaCaretPositionOrRangeToAA(_record)
       : _record;
     const base1Range = convertRangeTo1Based(record);
@@ -14,7 +14,7 @@ export const sizeSchema = isProtein => ({
 
     return (
       <span>
-        {isProtein ? Math.floor(val / 3) : val}{" "}
+        {props.isProtein ? Math.floor(val / 3) : val}{" "}
         <span style={{ fontSize: 10 }}>
           {hasJoinedLocations ? (
             record.locations.map((loc, i) => {
@@ -34,4 +34,4 @@ export const sizeSchema = isProtein => ({
       </span>
     );
   }
-});
+};

package/src/helperComponents/RemoveDuplicates/index.js

@@ -17,6 +17,30 @@ import { forEach, camelCase, startCase } from "lodash-es";
 import { sizeSchema } from "../PropertiesDialog/utils";
 import { getRangeLength } from "@teselagen/range-utils";
 
+const schema = {
+  fields: [
+    // ...(noColor
+    //   ? []
+    //   : [
+    //       {
+    //         path: "color",
+    //         type: "string",
+    //         render: color => {
+    //           return (
+    //             <ColorPickerPopover>
+    //               <div style={{ height: 20, width: 20, background: color }} />
+    //             </ColorPickerPopover>
+    //           );
+    //         }
+    //       }
+    //     ]),
+    { path: "name", type: "string" },
+    // ...(noType ? [] : [{ path: "type", type: "string" }]),
+    sizeSchema,
+    { path: "strand", type: "string" }
+  ]
+};
+
 class RemoveDuplicatesDialog extends React.Component {
   state = {
     dups: []
@@ -65,30 +89,6 @@ class RemoveDuplicatesDialog extends React.Component {
     const { duplicatesToRemoveSelectedEntities, hideModal, type } = this.props;
 
     const selectedIds = this.state.dups.map(d => d.id);
-
-    const schema = {
-      fields: [
-        // ...(noColor
-        //   ? []
-        //   : [
-        //       {
-        //         path: "color",
-        //         type: "string",
-        //         render: color => {
-        //           return (
-        //             <ColorPickerPopover>
-        //               <div style={{ height: 20, width: 20, background: color }} />
-        //             </ColorPickerPopover>
-        //           );
-        //         }
-        //       }
-        //     ]),
-        { path: "name", type: "string" },
-        // ...(noType ? [] : [{ path: "type", type: "string" }]),
-        sizeSchema(this.props.isProtein),
-        { path: "strand", type: "string" }
-      ]
-    };
     // const sequenceLength = sequenceData.sequence.length;
     // const isCirc = (this.state || {}).circular;
     return (