@teselagen/ove 0.6.1-beta.1 → 0.7.2

package/src/helperComponents/PropertiesDialog/GenericAnnotationProperties.js

@@ -44,15 +44,58 @@ 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, row, props) => {
+            render: (name, ann) => {
               const checked =
-                !props.annotationVisibility[
+                !this.props.annotationVisibility[
                   `${annotationType}IndividualToHide`
                 ][ann.id];
 
@@ -64,9 +107,9 @@ const genericAnnotationProperties = ({
                       e.stopPropagation();
                       const upperType = startCase(annotationType);
                       if (checked) {
-                        props[`hide${upperType}Individual`]([ann.id]);
+                        this.props[`hide${upperType}Individual`]([ann.id]);
                       } else {
-                        props[`show${upperType}Individual`]([ann.id]);
+                        this.props[`show${upperType}Individual`]([ann.id]);
                       }
                     }}
                     style={{
@@ -89,10 +132,10 @@ const genericAnnotationProperties = ({
                 {
                   path: "bases",
                   type: "string",
-                  render: (bases, primer, row, props) => {
+                  render: (bases, primer) => {
                     let bps = bases;
                     if (!bases) {
-                      bps = getSequenceWithinRange(primer, props.sequence);
+                      bps = getSequenceWithinRange(primer, this.props.sequence);
                       if (!primer.forward) {
                         bps = getReverseComplementSequenceString(bps);
                       }
@@ -121,13 +164,13 @@ const genericAnnotationProperties = ({
                   }
                 }
               ]),
-          sizeSchema,
+          sizeSchema(this.props.isProtein),
           ...(withTags && this.props.allPartTags
             ? [
                 {
                   path: "tags",
                   type: "string",
-                  getValueToFilterOn: (o, { keyedPartTags }) => {
+                  getValueToFilterOn: o => {
                     const toRet = (o.tags || [])
                       .map(tagId => {
                         const tag = keyedPartTags[tagId];
@@ -137,7 +180,7 @@ const genericAnnotationProperties = ({
                       .join(" ");
                     return toRet;
                   },
-                  render: (tags, b, c, { keyedPartTags = {} }) => {
+                  render: tags => {
                     return (
                       <div style={{ display: "flex" }}>
                         {(tags || []).map((tagId, i) => {
@@ -154,46 +197,6 @@ 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
@@ -337,7 +340,6 @@ 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,
+              sizeSchema(this.props.isProtein),
               { path: "frame", type: "number" },
               { path: "strand", type: "number" }
             ]

package/src/helperComponents/PropertiesDialog/SingleEnzymeCutsiteInfo.js

@@ -1,11 +1,17 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { DataTable } from "@teselagen/ui";
-
 import { CutsiteTag } from "../../CutsiteFilter/AdditionalCutsiteInfoDialog";
-
 import EnzymeViewer from "../../EnzymeViewer";
 import { getEnzymeAliases } from "../../utils/editorUtils";
 
+const schema = {
+  fields: [
+    { path: "topSnipPosition", displayName: "Top Snip", type: "string" },
+    { path: "position", type: "string" },
+    { path: "strand", type: "string" }
+  ]
+};
+
 export default function SingleEnzymeCutsiteInfo({
   cutsiteGroup,
   enzyme,
@@ -16,40 +22,52 @@ export default function SingleEnzymeCutsiteInfo({
   allCutsites,
   filteredCutsites: { cutsitesByName: cutsitesByNameActive }
 }) {
-  const onRowSelect = ([record]) => {
-    if (!record) return;
+  const onRowSelect = useCallback(
+    ([record]) => {
+      if (!record) return;
 
-    dispatch({
-      type: "CARET_POSITION_UPDATE",
-      payload: record.topSnipPosition,
-      meta: {
-        editorName
-      }
-    });
-  };
-  const aliases = getEnzymeAliases(enzyme);
-  const entities = cutsiteGroup
-    .sort((a, b) => a.topSnipPosition - b.topSnipPosition)
-    .map(
-      ({
-        restrictionEnzyme: { forwardRegex, reverseRegex } = {},
-        forward,
-        id,
-        topSnipBeforeBottom,
-        topSnipPosition,
-        bottomSnipPosition
-      }) => {
-        return {
-          id,
-          topSnipPosition,
-          position: topSnipBeforeBottom
-            ? topSnipPosition + " - " + bottomSnipPosition
-            : bottomSnipPosition + " - " + topSnipPosition,
-          strand:
-            forwardRegex === reverseRegex ? "Palindromic" : forward ? "1" : "-1"
-        };
-      }
-    );
+      dispatch({
+        type: "CARET_POSITION_UPDATE",
+        payload: record.topSnipPosition,
+        meta: {
+          editorName
+        }
+      });
+    },
+    [dispatch, editorName]
+  );
+
+  const aliases = useMemo(() => getEnzymeAliases(enzyme), [enzyme]);
+  const entities = useMemo(
+    () =>
+      cutsiteGroup
+        .sort((a, b) => a.topSnipPosition - b.topSnipPosition)
+        .map(
+          ({
+            restrictionEnzyme: { forwardRegex, reverseRegex } = {},
+            forward,
+            id,
+            topSnipBeforeBottom,
+            topSnipPosition,
+            bottomSnipPosition
+          }) => {
+            return {
+              id,
+              topSnipPosition,
+              position: topSnipBeforeBottom
+                ? topSnipPosition + " - " + bottomSnipPosition
+                : bottomSnipPosition + " - " + topSnipPosition,
+              strand:
+                forwardRegex === reverseRegex
+                  ? "Palindromic"
+                  : forward
+                    ? "1"
+                    : "-1"
+            };
+          }
+        ),
+    [cutsiteGroup]
+  );
 
   return (
     <div>
@@ -61,14 +79,12 @@ export default function SingleEnzymeCutsiteInfo({
       >
         {enzyme && (
           <EnzymeViewer
-            {...{
-              sequence: enzyme.site,
-              reverseSnipPosition: enzyme.bottomSnipOffset,
-              forwardSnipPosition: enzyme.topSnipOffset
-            }}
+            sequence={enzyme.site}
+            reverseSnipPosition={enzyme.bottomSnipOffset}
+            forwardSnipPosition={enzyme.topSnipOffset}
           />
         )}
-        <br></br>
+        <br />
         {entities && !!entities.length && (
           <div>
             <DataTable
@@ -106,7 +122,7 @@ export default function SingleEnzymeCutsiteInfo({
                     key={i}
                     name={n}
                     doNotShowCuts
-                  ></CutsiteTag>
+                  />
                 );
               })}
             </div>
@@ -117,14 +133,6 @@ export default function SingleEnzymeCutsiteInfo({
   );
 }
 
-const schema = {
-  fields: [
-    { path: "topSnipPosition", displayName: "Top Snip", type: "string" },
-    { path: "position", type: "string" },
-    { path: "strand", type: "string" }
-  ]
-};
-
 // export default compose(
 //   withEditorProps,
 //   withRestrictionEnzymes

package/src/helperComponents/PropertiesDialog/index.js

@@ -18,11 +18,11 @@ import { pick } from "lodash-es";
 const PropertiesContainer = Comp => props => {
   const { additionalFooterEls, additionalHeaderEls, ...rest } = props;
   return (
-    <React.Fragment>
+    <>
       {additionalHeaderEls}
       <Comp {...rest} />
       {additionalFooterEls}
-    </React.Fragment>
+    </>
   );
 };
 const allTabs = {
@@ -35,129 +35,130 @@ const allTabs = {
   orfs: PropertiesContainer(OrfProperties),
   genbank: PropertiesContainer(GenbankView)
 };
-export class PropertiesDialog extends React.Component {
-  render() {
-    const {
-      propertiesTool = {},
-      propertiesViewTabUpdate,
-      dimensions = {},
-      height,
-      editorName,
-      onSave,
-      showReadOnly,
-      showAvailability,
-      isProtein,
-      annotationsToSupport = {},
-      disableSetReadOnly,
-      propertiesList = [
-        "general",
-        "features",
-        "parts",
-        "primers",
-        "translations",
-        "cutsites",
-        "orfs",
-        "genbank"
-      ],
-      closePanelButton
-    } = { ...this.props, ...this.props.PropertiesProps };
 
-    const { width, height: heightFromDim } = dimensions;
+export const PropertiesDialog = props => {
+  const {
+    propertiesTool = {},
+    propertiesViewTabUpdate,
+    dimensions = {},
+    height,
+    editorName,
+    onSave,
+    showReadOnly,
+    showAvailability,
+    isProtein,
+    annotationsToSupport = {},
+    disableSetReadOnly,
+    propertiesList = [
+      "general",
+      "features",
+      "parts",
+      "primers",
+      "translations",
+      "cutsites",
+      "orfs",
+      "genbank"
+    ],
+    closePanelButton
+  } = { ...props, ...props.PropertiesProps };
 
-    let { tabId, selectedAnnotationId } = propertiesTool;
-    if (
-      propertiesList
-        .map(nameOrOverride => nameOrOverride.name || nameOrOverride)
-        .indexOf(tabId) === -1
-    ) {
-      tabId = propertiesList[0].name || propertiesList[0];
+  const { width, height: heightFromDim } = dimensions;
+
+  let { tabId, selectedAnnotationId } = propertiesTool;
+  if (
+    propertiesList
+      .map(nameOrOverride => nameOrOverride.name || nameOrOverride)
+      .indexOf(tabId) === -1
+  ) {
+    tabId = propertiesList[0].name || propertiesList[0];
+  }
+
+  const propertiesTabs = flatMap(propertiesList, nameOrOverride => {
+    if (annotationsToSupport[nameOrOverride] === false) {
+      return [];
     }
-    const propertiesTabs = flatMap(propertiesList, nameOrOverride => {
-      if (annotationsToSupport[nameOrOverride] === false) {
-        return [];
-      }
 
-      const name = nameOrOverride.name || nameOrOverride;
-      const Comp = nameOrOverride.Comp || allTabs[name];
-      if (isProtein) {
-        if (
-          name === "translations" ||
-          name === "orfs" ||
-          name === "primers" ||
-          name === "cutsites"
-        ) {
-          return null;
-        }
+    const name = nameOrOverride.name || nameOrOverride;
+    const Comp = nameOrOverride.Comp || allTabs[name];
+    if (isProtein) {
+      if (
+        name === "translations" ||
+        name === "orfs" ||
+        name === "primers" ||
+        name === "cutsites"
+      ) {
+        return null;
       }
-      const title = (() => {
-        if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel
-        if (name === "orfs") return "ORFs";
-        if (name === "cutsites") return "Cut Sites";
-        return startCase(name);
-      })();
-      return (
-        <Tab
-          key={name}
-          title={title}
-          id={name}
-          panel={
-            <Comp
-              {...{
-                ...pick(this.props, userDefinedHandlersAndOpts),
-                editorName,
-                onSave,
-                isProtein,
-                showReadOnly,
-                showAvailability,
-                disableSetReadOnly,
-                selectedAnnotationId,
-                ...(nameOrOverride.name && nameOrOverride)
-              }}
-            />
-          }
-        />
-      );
-    });
-    const heightToUse = Math.max(0, Number((heightFromDim || height) - 30));
+    }
+    const title = (() => {
+      if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel
+      if (name === "orfs") return "ORFs";
+      if (name === "cutsites") return "Cut Sites";
+      return startCase(name);
+    })();
+
     return (
+      <Tab
+        key={name}
+        title={title}
+        id={name}
+        panel={
+          <Comp
+            {...{
+              ...pick(props, userDefinedHandlersAndOpts),
+              editorName,
+              onSave,
+              isProtein,
+              showReadOnly,
+              showAvailability,
+              disableSetReadOnly,
+              selectedAnnotationId,
+              ...(nameOrOverride.name && nameOrOverride)
+            }}
+          />
+        }
+      />
+    );
+  });
+  const heightToUse = Math.max(0, Number((heightFromDim || height) - 30));
+  return (
+    <div
+      style={{
+        position: "relative"
+      }}
+    >
+      {closePanelButton}
       <div
+        className="ve-propertiesPanel"
         style={{
-          position: "relative"
+          display: "flex",
+          width,
+          height: heightToUse || 300,
+          zIndex: 10,
+          padding: 10
+          // paddingBottom: '31px',
         }}
       >
-        {closePanelButton}
-        <div
-          className="ve-propertiesPanel"
-          style={{
-            display: "flex",
-            width,
-            height: heightToUse || 300,
-            zIndex: 10,
-            padding: 10
-            // paddingBottom: '31px',
-          }}
-        >
-          {propertiesTabs.length ? (
-            <Tabs
-              style={{ width }}
-              renderActiveTabPanelOnly
-              selectedTabId={tabId}
-              onChange={propertiesViewTabUpdate}
-            >
-              <Tabs.Expander />
-              {propertiesTabs}
-              <Tabs.Expander />
-            </Tabs>
-          ) : (
-            <div style={{ margin: 20, fontSize: 20 }}>
-              No Properties to display
-            </div>
-          )}
-        </div>
+        {propertiesTabs.length ? (
+          <Tabs
+            style={{ width }}
+            renderActiveTabPanelOnly
+            selectedTabId={tabId}
+            onChange={propertiesViewTabUpdate}
+          >
+            <Tabs.Expander />
+            {propertiesTabs}
+            <Tabs.Expander />
+          </Tabs>
+        ) : (
+          <div style={{ margin: 20, fontSize: 20 }}>
+            No Properties to display
+          </div>
+        )}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default compose(
   connectToEditor(({ propertiesTool, annotationsToSupport }) => {

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 = {
+export const sizeSchema = isProtein => ({
   path: "size",
   type: "number",
-  render: (val, _record, i, props) => {
-    const record = props.isProtein
+  render: (val, _record) => {
+    const record = isProtein
       ? convertDnaCaretPositionOrRangeToAA(_record)
       : _record;
     const base1Range = convertRangeTo1Based(record);
@@ -14,7 +14,7 @@ export const sizeSchema = {
 
     return (
       <span>
-        {props.isProtein ? Math.floor(val / 3) : val}{" "}
+        {isProtein ? Math.floor(val / 3) : val}{" "}
         <span style={{ fontSize: 10 }}>
           {hasJoinedLocations ? (
             record.locations.map((loc, i) => {
@@ -34,4 +34,4 @@ export const sizeSchema = {
       </span>
     );
   }
-};
+});