@teselagen/ove 0.8.21 → 0.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.21",
+  "version": "0.8.24",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -18,8 +18,8 @@
     "@teselagen/file-utils": "0.3.20",
     "@teselagen/range-utils": "0.3.13",
     "@teselagen/react-list": "0.8.18",
-    "@teselagen/sequence-utils": "0.3.36",
-    "@teselagen/ui": "0.10.10",
+    "@teselagen/sequence-utils": "0.3.37",
+    "@teselagen/ui": "0.10.15",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",

package/selectors/orfsSelector.d.ts

@@ -8,7 +8,7 @@ declare const _default: ((state: any) => {
     annotationTypePlural: string;
     isOrf: boolean;
     id: any;
-}[]) & import('reselect').OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any) => {
+}[]) & import('reselect').OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any, args_4: any) => {
     start: number;
     end: number;
     length: number;

package/selectors/searchLayersSelector.d.ts

@@ -1,4 +1,4 @@
-declare const _default: ((state: any) => any[]) & import('reselect').OutputSelectorFields<(args_0: any, args_1: any, args_2: any, args_3: any, args_4: any, args_5: any, args_6: any, args_7: any, args_8: any) => any[], {
+declare const _default: ((state: any, ...params: any[]) => any[]) & import('reselect').OutputSelectorFields<(...args: readonly unknown[]) => any[], {
     clearCache: () => void;
 }> & {
     clearCache: () => void;

package/src/helperComponents/PropertiesDialog/GenericAnnotationProperties.js

@@ -8,7 +8,8 @@ import {
   DropdownButton,
   createCommandMenu,
   popoverOverflowModifiers,
-  removeDuplicatesIcon
+  removeDuplicatesIcon,
+  useMemoDeepEqual
 } from "@teselagen/ui";
 import { map, upperFirst, pick, startCase, isFunction } from "lodash-es";
 import {
@@ -41,69 +42,79 @@ const genericAnnotationProperties = ({
   additionalFooterEls
 }) => {
   const annotationTypeUpper = upperFirst(annotationType);
-  class AnnotationProperties extends React.Component {
-    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,
-        PropertiesProps
-      } = this.props;
-      const annotationPropertiesSelectedEntities =
-        _annotationPropertiesSelectedEntities.filter(a => annotations[a.id]);
+  const AnnotationProperties = props => {
+    const {
+      readOnly,
+      annotations = {},
+      annotationVisibility,
+      sequenceLength,
+      selectionLayer,
+      sequence,
+      isProtein,
+      allPartTags,
+      annotationPropertiesSelectedEntities:
+        _annotationPropertiesSelectedEntities,
+      selectedAnnotationId,
+      PropertiesProps,
+      dispatch,
+      editorName
+    } = props;
 
-      const deleteAnnotation = this.props[`delete${annotationTypeUpper}`];
+    // We need to keep a ref to the props so that the commands factory (old code) works
+    const instanceRef = React.useRef({ props });
+    instanceRef.current.props = props;
+    const cmds = React.useMemo(() => commands(instanceRef.current), []);
 
-      const annotationsToUse = map(annotations, annotation => {
-        return {
-          ...annotation,
-          ...(annotation.strand === undefined && {
-            strand: annotation.forward ? 1 : -1
-          }),
-          size: getRangeLength(annotation, sequenceLength)
-        };
-      });
+    const onRowSelect = React.useCallback(
+      ([record]) => {
+        if (!record) return;
+        dispatch({
+          type: "SELECTION_LAYER_UPDATE",
+          payload: record,
+          meta: {
+            editorName
+          }
+        });
+      },
+      [dispatch, editorName]
+    );
+
+    const annotationPropertiesSelectedEntities =
+      _annotationPropertiesSelectedEntities.filter(a => annotations[a.id]);
 
-      const keyedPartTags = getKeyedTagsAndTagOptions(allPartTags) ?? {};
-      const additionalColumns =
-        PropertiesProps?.propertiesList?.find(
-          p => (p.name || p) === (pluralize(annotationType) || "")
-        )?.additionalColumns || [];
+    const deleteAnnotation = props[`delete${annotationTypeUpper}`];
 
-      this.schema = {
+    const annotationsToUse = React.useMemo(
+      () =>
+        map(annotations, annotation => {
+          return {
+            ...annotation,
+            ...(annotation.strand === undefined && {
+              strand: annotation.forward ? 1 : -1
+            }),
+            size: getRangeLength(annotation, sequenceLength)
+          };
+        }),
+      [annotations, sequenceLength]
+    );
+
+    const keyedPartTags = getKeyedTagsAndTagOptions(allPartTags) ?? {};
+    const additionalColumns =
+      PropertiesProps?.propertiesList?.find(
+        p => (p.name || p) === (pluralize(annotationType) || "")
+      )?.additionalColumns || [];
+
+    const schema = useMemoDeepEqual(
+      () => ({
         fields: [
           {
             path: "name",
             type: "string",
-
             render: (name, ann) => {
               const checked =
-                !this.props.annotationVisibility[
-                  `${annotationType}IndividualToHide`
-                ][ann.id];
+                !annotationVisibility[`${annotationType}IndividualToHide`][
+                  ann.id
+                ];
 
               return (
                 <>
@@ -113,9 +124,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={{
@@ -131,7 +142,6 @@ const genericAnnotationProperties = ({
               );
             }
           },
-
           ...(!withBases
             ? []
             : [
@@ -141,7 +151,7 @@ const genericAnnotationProperties = ({
                   render: (bases, primer) => {
                     let bps = bases;
                     if (!bases) {
-                      bps = getSequenceWithinRange(primer, this.props.sequence);
+                      bps = getSequenceWithinRange(primer, sequence);
                       if (!primer.forward) {
                         bps = getReverseComplementSequenceString(bps);
                       }
@@ -170,8 +180,8 @@ const genericAnnotationProperties = ({
                   }
                 }
               ]),
-          sizeSchema(this.props.isProtein),
-          ...(withTags && this.props.allPartTags
+          sizeSchema(isProtein),
+          ...(withTags && allPartTags
             ? [
                 {
                   path: "tags",
@@ -203,159 +213,163 @@ const genericAnnotationProperties = ({
           { path: "strand", type: "number" },
           ...additionalColumns
         ]
-      };
+      }),
+      [
+        additionalColumns,
+        allPartTags,
+        annotationVisibility,
+        isProtein,
+        keyedPartTags,
+        sequence
+      ]
+    );
 
-      return (
-        <DataTable
-          topLeftItems={getVisFilter(
-            createCommandMenu(
-              isFunction(visSubmenu) ? visSubmenu(this.props) : visSubmenu,
-              this.commands,
-              {
-                useTicks: true
-              }
-            )
-          )}
-          annotationPropertiesSelectedEntities={
-            annotationPropertiesSelectedEntities
-          }
-          leftOfSearchBarItems={
-            <>
-              {!readOnly && (
-                <ButtonGroup style={{ marginTop: 3, marginRight: 4 }}>
-                  <Tooltip
-                    position="top"
-                    modifiers={popoverOverflowModifiers}
-                    content="New"
-                  >
-                    <AnchorButton
-                      disabled={!sequenceLength}
-                      icon="plus"
-                      className="tgNewAnnBtn"
-                      onClick={() => {
-                        showAddOrEditAnnotationDialog({
-                          type: annotationType,
-                          annotation: pick(
-                            selectionLayer,
-                            "start",
-                            "end",
-                            "forward"
-                          )
-                        });
-                      }}
-                    ></AnchorButton>
-                  </Tooltip>
-                  <Tooltip
-                    position="top"
-                    modifiers={popoverOverflowModifiers}
-                    content="Edit"
-                  >
-                    <AnchorButton
-                      onClick={() => {
-                        showAddOrEditAnnotationDialog({
-                          type: annotationType,
-                          annotation: annotationPropertiesSelectedEntities[0]
-                        });
-                      }}
-                      disabled={
-                        annotationPropertiesSelectedEntities.length !== 1
-                      }
-                      icon="edit"
-                    ></AnchorButton>
-                  </Tooltip>
+    return (
+      <DataTable
+        topLeftItems={getVisFilter(
+          createCommandMenu(
+            isFunction(visSubmenu) ? visSubmenu(props) : visSubmenu,
+            cmds,
+            {
+              useTicks: true
+            }
+          )
+        )}
+        annotationPropertiesSelectedEntities={
+          annotationPropertiesSelectedEntities
+        }
+        leftOfSearchBarItems={
+          <>
+            {!readOnly && (
+              <ButtonGroup style={{ marginTop: 3, marginRight: 4 }}>
+                <Tooltip
+                  position="top"
+                  modifiers={popoverOverflowModifiers}
+                  content="New"
+                >
+                  <AnchorButton
+                    disabled={!sequenceLength}
+                    icon="plus"
+                    className="tgNewAnnBtn"
+                    onClick={() => {
+                      showAddOrEditAnnotationDialog({
+                        type: annotationType,
+                        annotation: pick(
+                          selectionLayer,
+                          "start",
+                          "end",
+                          "forward"
+                        )
+                      });
+                    }}
+                  ></AnchorButton>
+                </Tooltip>
+                <Tooltip
+                  position="top"
+                  modifiers={popoverOverflowModifiers}
+                  content="Edit"
+                >
+                  <AnchorButton
+                    onClick={() => {
+                      showAddOrEditAnnotationDialog({
+                        type: annotationType,
+                        annotation: annotationPropertiesSelectedEntities[0]
+                      });
+                    }}
+                    disabled={annotationPropertiesSelectedEntities.length !== 1}
+                    icon="edit"
+                  ></AnchorButton>
+                </Tooltip>
 
-                  {["feature"].includes(annotationType) && (
-                    <CmdButton
-                      text=""
-                      icon="cog"
-                      data-tip="Configure Feature Types"
-                      cmd={this.commands.onConfigureFeatureTypesClick}
-                    />
-                  )}
-                  {["part", "primer", "feature"].includes(annotationType) && (
-                    <CmdButton
-                      text=""
-                      icon={removeDuplicatesIcon}
-                      data-tip="Remove Duplicates"
-                      cmd={
-                        this.commands[
-                          `showRemoveDuplicatesDialog${
-                            annotationTypeUpper + "s"
-                          }`
-                        ]
-                      }
-                    />
-                  )}
+                {["feature"].includes(annotationType) && (
+                  <CmdButton
+                    text=""
+                    icon="cog"
+                    data-tip="Configure Feature Types"
+                    cmd={cmds.onConfigureFeatureTypesClick}
+                  />
+                )}
+                {["part", "primer", "feature"].includes(annotationType) && (
+                  <CmdButton
+                    text=""
+                    icon={removeDuplicatesIcon}
+                    data-tip="Remove Duplicates"
+                    cmd={
+                      cmds[
+                        `showRemoveDuplicatesDialog${annotationTypeUpper + "s"}`
+                      ]
+                    }
+                  />
+                )}
 
-                  {additionalFooterEls && additionalFooterEls(this.props)}
-                  <Tooltip
-                    position="top"
-                    modifiers={popoverOverflowModifiers}
-                    content="Delete"
-                  >
-                    <AnchorButton
-                      onClick={() => {
-                        deleteAnnotation(annotationPropertiesSelectedEntities);
-                      }}
-                      className="tgDeleteAnnsBtn"
-                      intent="danger"
-                      disabled={!annotationPropertiesSelectedEntities.length}
-                      icon="trash"
-                    ></AnchorButton>
-                  </Tooltip>
-                </ButtonGroup>
-              )}
-              {/* {createCommandMenu(
-                  {
-                    cmd: "featureFilterIndividualCmd",
-                    // text: 'hahah',
-                    shouldDismissPopover: false
-                  },
-                  this.commands,
-                  {
-                    useTicks: true
-                  }
-                )} */}
-              {/* <CmdCheckbox
-                  prefix="Show "
-                  cmd={this.commands.featureFilterIndividualCmd}
-                /> */}
-            </>
-          }
-          onDoubleClick={annotation => {
-            showAddOrEditAnnotationDialog({
-              type: annotationType,
-              annotation
-            });
-          }}
-          withCheckboxes
-          showFeatureIndividual={this.props.showFeatureIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          hideFeatureIndividual={this.props.hideFeatureIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          showPartIndividual={this.props.showPartIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          hidePartIndividual={this.props.hidePartIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          showPrimerIndividual={this.props.showPrimerIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          hidePrimerIndividual={this.props.hidePrimerIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          annotationVisibility={annotationVisibility} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          featureLengthsToHide={this.props.featureLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          primerLengthsToHide={this.props.primerLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          partLengthsToHide={this.props.partLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          sequence={sequence} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
-          noPadding
-          noFullscreenButton
-          onRowSelect={this.onRowSelect}
-          selectedIds={selectedAnnotationId}
-          formName="annotationProperties"
-          noRouter
-          isProtein={isProtein}
-          compact
-          isInfinite
-          withDisplayOptions
-          schema={this.schema}
-          entities={annotationsToUse}
-        />
-      );
-    }
-  }
+                {additionalFooterEls && additionalFooterEls(props)}
+                <Tooltip
+                  position="top"
+                  modifiers={popoverOverflowModifiers}
+                  content="Delete"
+                >
+                  <AnchorButton
+                    onClick={() => {
+                      deleteAnnotation(annotationPropertiesSelectedEntities);
+                    }}
+                    className="tgDeleteAnnsBtn"
+                    intent="danger"
+                    disabled={!annotationPropertiesSelectedEntities.length}
+                    icon="trash"
+                  ></AnchorButton>
+                </Tooltip>
+              </ButtonGroup>
+            )}
+            {/* {createCommandMenu(
+                {
+                  cmd: "featureFilterIndividualCmd",
+                  // text: 'hahah',
+                  shouldDismissPopover: false
+                },
+                cmds,
+                {
+                  useTicks: true
+                }
+              )} */}
+            {/* <CmdCheckbox
+                prefix="Show "
+                cmd={cmds.featureFilterIndividualCmd}
+              /> */}
+          </>
+        }
+        onDoubleClick={annotation => {
+          showAddOrEditAnnotationDialog({
+            type: annotationType,
+            annotation
+          });
+        }}
+        withCheckboxes
+        showFeatureIndividual={props.showFeatureIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        hideFeatureIndividual={props.hideFeatureIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        showPartIndividual={props.showPartIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        hidePartIndividual={props.hidePartIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        showPrimerIndividual={props.showPrimerIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        hidePrimerIndividual={props.hidePrimerIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        annotationVisibility={annotationVisibility} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        featureLengthsToHide={props.featureLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        primerLengthsToHide={props.primerLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        partLengthsToHide={props.partLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        sequence={sequence} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+        noPadding
+        noFullscreenButton
+        onRowSelect={onRowSelect}
+        selectedIds={selectedAnnotationId}
+        formName="annotationProperties"
+        noRouter
+        isProtein={isProtein}
+        compact
+        isInfinite
+        withDisplayOptions
+        schema={schema}
+        entities={annotationsToUse}
+      />
+    );
+  };
 
   return compose(
     connectToEditor(

package/src/redux/temporaryAnnotations.js

@@ -18,6 +18,6 @@ export default createMergedDefaultStateReducer(
     features: {},
     primers: {},
     parts: {},
-    selectionLayer: {}
+    searchLayers: []
   }
 );

package/src/selectors/orfsSelector.js

@@ -9,6 +9,7 @@ export default createSelector(
   circularSelector,
   minimumOrfSizeSelector,
   state => state.useAdditionalOrfStartCodons,
+  state => state.sequenceData?.isProtein || state.sequenceData?.isOligo,
   findOrfsInPlasmid
 );
 

package/src/selectors/searchLayersSelector.js

@@ -15,10 +15,12 @@ function searchLayersSelector(
   dnaOrAA,
   isProtein,
   proteinSequence,
-  mismatchesAllowed
+  mismatchesAllowed,
+  tempSearchLayers = []
 ) {
+  const toReturn = [...tempSearchLayers];
   if (!searchString || !isOpen) {
-    return [];
+    return toReturn;
   }
   if (isProtein) {
     const searchingDna = dnaOrAA === "DNA";
@@ -35,7 +37,7 @@ function searchLayersSelector(
     ).sort(({ start }, { start: start2 }) => {
       return start - start2;
     });
-    return searchingDna
+    const r = searchingDna
       ? matches
       : matches.map(({ start, end, ...rest }) => ({
           ...rest,
@@ -43,6 +45,7 @@ function searchLayersSelector(
           start: start * 3,
           end: end * 3 + 2
         }));
+    return [...toReturn, ...r];
   }
 
   // Use findApproxMatches when literal matching DNA with mismatches allowed
@@ -69,11 +72,13 @@ function searchLayersSelector(
         forward: true
       }))
       .sort((a, b) => a.start - b.start);
-
-    return matches.map(match => ({
-      ...match,
-      className: "veSearchLayer"
-    }));
+    return [
+      ...toReturn,
+      ...matches.map(match => ({
+        ...match,
+        className: "veSearchLayer"
+      }))
+    ];
   }
 
   // Use regular findSequenceMatches for all other cases
@@ -85,14 +90,17 @@ function searchLayersSelector(
   }).sort(({ start }, { start: start2 }) => {
     return start - start2;
   });
-  return matches.map(match => ({
-    ...match,
-    forward: !match.bottomStrand,
-    className:
-      "veSearchLayer " +
-      (match.bottomStrand ? " veSearchLayerBottomStrand" : ""),
-    isSearchLayer: true
-  }));
+  return [
+    ...toReturn,
+    ...matches.map(match => ({
+      ...match,
+      forward: !match.bottomStrand,
+      className:
+        "veSearchLayer " +
+        (match.bottomStrand ? " veSearchLayerBottomStrand" : ""),
+      isSearchLayer: true
+    }))
+  ];
 }
 
 export default createSelector(
@@ -105,5 +113,6 @@ export default createSelector(
   state => state.sequenceData.isProtein,
   state => state.sequenceData.proteinSequence,
   state => state.findTool && state.findTool.mismatchesAllowed,
+  state => state.temporaryAnnotations?.searchLayers,
   searchLayersSelector
 );

package/src/utils/pureNoFunc.js

@@ -1,18 +0,0 @@
-import { shouldUpdate } from "recompose";
-import { isEqualWith, isFunction } from "lodash-es";
-
-const isEq = (o1, o2) => {
-  const isEq = isEqualWith(o1, o2, function (val1, val2) {
-    if (isFunction(val1) && isFunction(val2)) {
-      return val1 === val2 || val1.toString() === val2.toString();
-    }
-  });
-  return isEq;
-};
-
-const pure = BaseComponent => {
-  const hoc = shouldUpdate((props, nextProps) => !isEq(props, nextProps));
-  return hoc(BaseComponent);
-};
-
-export default pure;

package/utils/pureNoFunc.d.ts

@@ -1,2 +0,0 @@
-export default pure;
-declare function pure(BaseComponent: any): any;