@teselagen/ove 0.8.22 → 0.8.25

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.22",
+  "version": "0.8.25",
   "main": "./src/index.js",
   "type": "module",
+  "repository": "https://github.com/TeselaGen/tg-oss",
   "exports": {
     ".": {
       "import": "./index.es.js",
@@ -14,12 +15,12 @@
     "@blueprintjs/core": "3.54.0",
     "@hello-pangea/dnd": "16.2.0",
     "@risingstack/react-easy-state": "^6.3.0",
-    "@teselagen/bio-parsers": "0.4.32",
+    "@teselagen/bio-parsers": "0.4.33",
     "@teselagen/file-utils": "0.3.20",
-    "@teselagen/range-utils": "0.3.13",
+    "@teselagen/range-utils": "0.3.19",
     "@teselagen/react-list": "0.8.18",
-    "@teselagen/sequence-utils": "0.3.36",
-    "@teselagen/ui": "0.10.10",
+    "@teselagen/sequence-utils": "0.3.41",
+    "@teselagen/ui": "0.10.16",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",
@@ -62,6 +63,5 @@
     "to-regex-range": "5.0.1",
     "use-debounce": "^8.0.4",
     "validate.io-nonnegative-integer-array": "^1.0.1"
-  },
-  "license": "MIT"
-}
+  }
+}

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/src/LinearView/index.js

@@ -104,32 +104,34 @@ class _LinearView extends React.Component {
     } = this.props;
     // if (!isEqual(sequenceData, this.oldSeqData)) {
     this.paredDownMessages = [];
-    const paredDownSeqData = ["parts", "features", "cutsites"].reduce(
-      (acc, type) => {
-        const nameUpper = startCase(type);
-        const maxToShow =
-          (maxAnnotationsToDisplay
-            ? maxAnnotationsToDisplay[type]
-            : limits[type]) || 50;
-        const [annotations, paredDown] = pareDownAnnotations(
-          sequenceData["filtered" + nameUpper] || sequenceData[type] || {},
-          maxToShow
-        );
+    const paredDownSeqData = [
+      "parts",
+      "features",
+      "cutsites",
+      "primers"
+    ].reduce((acc, type) => {
+      const nameUpper = startCase(type);
+      const maxToShow =
+        (maxAnnotationsToDisplay
+          ? maxAnnotationsToDisplay[type]
+          : limits[type]) || 50;
+      const [annotations, paredDown] = pareDownAnnotations(
+        sequenceData["filtered" + nameUpper] || sequenceData[type] || {},
+        maxToShow
+      );
 
-        if (paredDown) {
-          this.paredDownMessages.push(
-            getParedDownWarning({
-              nameUpper,
-              isAdjustable: !maxAnnotationsToDisplay,
-              maxToShow
-            })
-          );
-        }
-        acc[type] = annotations;
-        return acc;
-      },
-      {}
-    );
+      if (paredDown) {
+        this.paredDownMessages.push(
+          getParedDownWarning({
+            nameUpper,
+            isAdjustable: !maxAnnotationsToDisplay,
+            maxToShow
+          })
+        );
+      }
+      acc[type] = annotations;
+      return acc;
+    }, {});
     this.rowData = prepareRowData(
       {
         ...sequenceData,

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/selectors/orfsSelector.js

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