@teselagen/ove 0.3.11 → 0.3.13

package/src/AutoAnnotate.js

@@ -3,7 +3,7 @@
 /* eslint-disable no-throw-literal */
 import { unparse } from "papaparse";
 import pluralize from "pluralize";
-import  { SubmissionError, reduxForm,  } from "redux-form";
+import { SubmissionError, reduxForm } from "redux-form";
 import shortid from "shortid";
 import CreateAnnotationsPage from "./CreateAnnotationsPage";
 import { formName } from "./constants";
@@ -11,7 +11,7 @@ import { AutoAnnotateBpMatchingDialog } from "./AutoAnnotateBpMatchingDialog";
 import {
   parseCsvFile,
   validateCSVRequiredHeaders,
-  validateCSVRow,
+  validateCSVRow
 } from "./fileUtils";
 import downloadjs from "downloadjs";
 import {
@@ -19,7 +19,7 @@ import {
   convertApELikeRegexToRegex,
   convertProteinSeqToDNAIupac,
   getFeatureToColorMap,
-  getFeatureTypes,
+  getFeatureTypes
 } from "@teselagen/sequence-utils";
 import { hideDialog, showDialog } from "./GlobalDialogUtils";
 import { compose } from "redux";
@@ -29,7 +29,7 @@ import {
   FileUploadField,
   InfoHelper,
   showConfirmationDialog,
-  wrapDialog,
+  wrapDialog
 } from "@teselagen/ui";
 import { startCase } from "lodash";
 import withEditorProps from "./withEditorProps";
@@ -41,41 +41,41 @@ export function autoAnnotateFeatures() {
   showDialog({
     ModalComponent: AutoAnnotateModal, //we want to use a ModalComponent here so our addon does not
     props: {
-      annotationType: "feature",
-    },
+      annotationType: "feature"
+    }
   });
 }
 export function autoAnnotateParts() {
   showDialog({
     ModalComponent: AutoAnnotateModal, //we want to use a ModalComponent here so our addon does not
     props: {
-      annotationType: "part",
-    },
+      annotationType: "part"
+    }
   });
 }
 export function autoAnnotatePrimers() {
   showDialog({
     ModalComponent: AutoAnnotateModal, //we want to use a ModalComponent here so our addon does not
     props: {
-      annotationType: "primer",
-    },
+      annotationType: "primer"
+    }
   });
 }
 
 export const AutoAnnotateModal = compose(
-  wrapDialog((p) => ({
+  wrapDialog(p => ({
     canEscapeKeyClose: false,
-    title: `Auto Annotate ${startCase(pluralize(p.annotationType))}`,
+    title: `Auto Annotate ${startCase(pluralize(p.annotationType))}`
   })),
   withEditorProps,
   reduxForm({ form: formName })
-)((props) => {
+)(props => {
   const {
     sequenceData,
     handleSubmit,
     annotationType = "feature",
     error,
-    getCustomAutoAnnotateList,
+    getCustomAutoAnnotateList
   } = props;
   const [fileType, setSelectedImportType] = useState("csvFile");
   const [newAnnotations, setNewAnns] = useState(false);
@@ -126,31 +126,31 @@ export const AutoAnnotateModal = compose(
                         description: "I'm a description",
                         sequence: `gatNNtacaggttt`,
                         ...(annotationType === "feature" && {
-                          type: `cds`,
+                          type: `cds`
                         }),
                         isRegex: false,
-                        matchType: "dna",
+                        matchType: "dna"
                       },
                       {
                         name: `Example Protein ${startCase(annotationType)}`,
                         description: "I'm a description",
                         sequence: `APGSGTGGGSGSAPG`,
                         ...(annotationType === "feature" && {
-                          type: `cds`,
+                          type: `cds`
                         }),
                         isRegex: false,
-                        matchType: "protein",
+                        matchType: "protein"
                       },
                       {
                         name: `Example ${startCase(annotationType)} 2`,
                         description: "I'm another description",
                         sequence: `gat.*tacccc.*aggttt`,
                         ...(annotationType === "feature" && {
-                          type: `cds`,
+                          type: `cds`
                         }),
                         isRegex: true,
-                        matchType: "dna",
-                      },
+                        matchType: "dna"
+                      }
                     ];
                     const csv = unparse(rows);
                     // const blob = new Blob([convert(sequenceData)], { type: "text/plain" });
@@ -172,11 +172,11 @@ export const AutoAnnotateModal = compose(
                   <span style={{ display: "flex" }}>
                     isRegex &nbsp;
                     <InfoHelper
-                      onClick={(e) => {
+                      onClick={e => {
                         e.stopPropagation();
                         e.preventDefault();
                         showDialog({
-                          ModalComponent: AutoAnnotateBpMatchingDialog,
+                          ModalComponent: AutoAnnotateBpMatchingDialog
                         });
                       }}
                       content={
@@ -293,17 +293,17 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
 
               if (annotationType === "feature") {
                 const cleanedType = getFeatureTypes().find(
-                  (t) => t.toLowerCase() === type.toLowerCase()
+                  t => t.toLowerCase() === type.toLowerCase()
                 );
                 if (!cleanedType) {
                   if (!convertNonStandardTypes) {
                     convertNonStandardTypes = await showConfirmationDialog({
                       cancelButtonText: "Stop Auto-Annotate",
-                      text: `Detected that ${rowName} has a non-standard type of ${type}. We will assign it and all subsequent non-standard types to use the misc_feature type instead`,
+                      text: `Detected that ${rowName} has a non-standard type of ${type}. We will assign it and all subsequent non-standard types to use the misc_feature type instead`
                     });
                     if (!convertNonStandardTypes) {
                       throw {
-                        validationError: `${rowName} specifies the feature type ${type} which is not valid`,
+                        validationError: `${rowName} specifies the feature type ${type} which is not valid`
                       };
                     }
                   }
@@ -314,7 +314,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
               }
               if (!sequence) {
                 throw {
-                  validationError: `${rowName} did not have a sequence`,
+                  validationError: `${rowName} did not have a sequence`
                 };
               }
               if (row.isRegex && row.isRegex.toUpperCase() === "TRUE") {
@@ -322,7 +322,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                   new RegExp(regexConvertedSeq); //just trying out whether the regexConvertedSeq will work as a valid regex
                 } catch (error) {
                   throw {
-                    validationError: `${rowName} has an invalid sequence/regex. Please fix it manually.`,
+                    validationError: `${rowName} has an invalid sequence/regex. Please fix it manually.`
                   };
                 }
                 row.isRegex = true;
@@ -336,7 +336,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                 // eslint-disable-next-line no-unused-vars
                 i,
                 // eslint-disable-next-line no-unused-vars
-                { name, sequence, matchType, type, isRegex },
+                { name, sequence, matchType, type, isRegex }
               ] of customAnnResponse.list.entries()) {
                 await validateRow(
                   {
@@ -344,7 +344,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                     sequence,
                     matchType,
                     type,
-                    isRegex: isRegex ? "TRUE" : "FALSE",
+                    isRegex: isRegex ? "TRUE" : "FALSE"
                   },
                   `Row ${i + 1} (${name})`
                 );
@@ -357,12 +357,12 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
               csvHeaders.push("isRegex");
               const {
                 data,
-                meta: { fields },
+                meta: { fields }
               } = await parseCsvFile(csvFile[0]);
               const error = validateCSVRequiredHeaders(fields, csvHeaders);
               if (error) {
                 throw {
-                  validationError: error,
+                  validationError: error
                 };
               }
 
@@ -371,14 +371,14 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                 const error = validateCSVRow(row, csvHeaders, index);
                 if (error) {
                   throw {
-                    validationError: error,
+                    validationError: error
                   };
                 }
                 await validateRow(row, `Row ${index + 1} (${row.name})`);
               }
             } else if (fileType === "apeFile") {
               const { data } = await parseCsvFile(apeFile[0], {
-                header: false,
+                header: false
               });
               // eslint-disable-next-line no-unused-vars
               for (const [i, [name, sequence, type]] of data.entries()) {
@@ -398,7 +398,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
               );
             }
             const annotationsToCheckById = {};
-            annsToCheck.forEach((ann) => {
+            annsToCheck.forEach(ann => {
               if (ann.matchType === "protein") {
                 ann.sequence = convertProteinSeqToDNAIupac(ann.sequence);
               }
@@ -408,26 +408,26 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                 sequence: ann.isRegex
                   ? ann.sequence
                   : convertApELikeRegexToRegex(ann.sequence),
-                id,
+                id
               };
             });
 
             const seqId = "placeholderId";
             const { [seqId]: newAnns } = autoAnnotate({
               seqsToAnnotateById: {
-                [seqId]: { ...sequenceData, id: seqId },
+                [seqId]: { ...sequenceData, id: seqId }
               },
-              annotationsToCheckById,
+              annotationsToCheckById
             });
 
             if (newAnns && newAnns.length) {
               setNewAnns(
-                newAnns.map((a) => {
+                newAnns.map(a => {
                   const toRet = {
                     ...annotationsToCheckById[a.id],
                     ...a,
                     forward: a.strand !== -1,
-                    id: shortid(),
+                    id: shortid()
                   };
                   toRet.color =
                     toRet.color || getFeatureToColorMap()[toRet.type];
@@ -469,32 +469,32 @@ const validateAgainstSchema = {
     {
       path: "name",
       type: "string",
-      isRequired: true,
+      isRequired: true
     },
     {
       path: "description",
-      type: "string",
+      type: "string"
     },
     {
       path: "sequence",
       type: "string",
-      isRequired: true,
+      isRequired: true
     },
     {
       path: "type",
       type: "dropdown",
       values: getFeatureTypes(),
-      defaultValue: "misc_feature",
+      defaultValue: "misc_feature"
     },
     {
       path: "isRegex",
-      type: "boolean",
+      type: "boolean"
     },
     {
       path: "matchType",
       type: "dropdown",
       defaultValue: "dna",
-      values: ["dna", "protein"],
-    },
-  ],
+      values: ["dna", "protein"]
+    }
+  ]
 };

package/src/CircularView/Cutsites.js

@@ -43,15 +43,15 @@ function Cutsites({
         color: annotation.restrictionEnzyme.color,
         className: " veCutsiteLabel",
         id: annotation.id,
-        onClick: (event) => {
+        onClick: event => {
           cutsiteClicked({ event, annotation });
           event.stopPropagation();
         },
-        onDoubleClick: (event) => {
+        onDoubleClick: event => {
           cutsiteDoubleClicked({ event, annotation });
           event.stopPropagation();
         },
-        onContextMenu: (event) => {
+        onContextMenu: event => {
           cutsiteRightClicked({ event, annotation });
           event.stopPropagation();
         }

package/src/CircularView/Labels/index.js

@@ -7,12 +7,12 @@ import { cloneDeep, clamp, noop } from "lodash";
 
 const fontWidthToFontSize = 1.75;
 
-const getTextLength = (text) => {
+const getTextLength = text => {
   let len = (text || "Unlabeled").length;
   // eslint-disable-next-line no-control-regex
   const nonEnInputReg = /[^\x00-\xff]+/g;
   const nonEnStrings = (text || "Unlabeled").match(nonEnInputReg) || [];
-  nonEnStrings.forEach((str) => (len += str.length * 0.5));
+  nonEnStrings.forEach(str => (len += str.length * 0.5));
   return len;
 };
 
@@ -93,8 +93,8 @@ function Labels({
 
   let maxRadius = 1;
   const groupedLabels = relaxLabelAngles(labelPoints, fontHeight, outerRadius)
-    .filter((l) => !!l)
-    .map((originalLabel) => {
+    .filter(l => !!l)
+    .map(originalLabel => {
       if (smartCircViewLabelRender) {
         const newR = Math.sqrt(
           Math.pow(
@@ -114,7 +114,7 @@ function Labels({
       }
 
       const _highPrioritySublabel = originalLabel.labelAndSublabels.find(
-        (l) => l.highPriorityLabel
+        l => l.highPriorityLabel
       );
       if (_highPrioritySublabel) {
         const highPrioritySublabel = cloneDeep(_highPrioritySublabel);
@@ -133,7 +133,7 @@ function Labels({
           "truncatedInnerPoint",
           "x",
           "y"
-        ].forEach((k) => {
+        ].forEach(k => {
           highPrioritySublabel[k] = originalLabel[k];
         });
 
@@ -449,7 +449,7 @@ const DrawGroupInnerLabel = withHover(
         textLength={getTextLength(label.text) * fontWidth}
         lengthAdjust="spacing"
         onClick={label.onClick}
-        onDoubleClick={(e) => {
+        onDoubleClick={e => {
           e.stopPropagation();
           label.onDoubleClick && label.onDoubleClick(e);
         }}

package/src/CircularView/Labels/relaxLabels_DEPRECATED.js

@@ -9,7 +9,7 @@ let alpha = 1.5; //the larger the alpha, the fewer loops through relax necessary
 let spacing = 12;
 let relaxCounter = 0;
 export default function relaxLabels(labelPoints) {
-  let mutableLabelPoints = labelPoints.map(function(point) {
+  let mutableLabelPoints = labelPoints.map(function (point) {
     return {
       ...point
     };
@@ -18,14 +18,14 @@ export default function relaxLabels(labelPoints) {
   function relax() {
     let again = false;
     relaxCounter++;
-    mutableLabelPoints.forEach(function(point1, index1) {
+    mutableLabelPoints.forEach(function (point1, index1) {
       // var xOverlaps = xRanges.search(point1.x, point1.x + point1.width)
       // var yOverlaps = yRanges.search(point1.y, point1.y + point1.height)
       // xOverlaps
       // xRanges.add(point1.x, point1.x + point1.width, undefined, point1)
       // yRanges.add(point1.y, point1.y + point1.height, undefined, point1)
 
-      mutableLabelPoints.forEach(function(point2, index2) {
+      mutableLabelPoints.forEach(function (point2, index2) {
         // a & b are the same element and don't collide.
         if (index1 === index2) return;
 
@@ -69,9 +69,9 @@ export default function relaxLabels(labelPoints) {
 
   //group colliding labels
   let stableLabels = [];
-  mutableLabelPoints.forEach(function(point1) {
+  mutableLabelPoints.forEach(function (point1) {
     let collision = false;
-    stableLabels.some(function(point2) {
+    stableLabels.some(function (point2) {
       // a & b are on opposite sides of the chart and
       // don't collide
       if ((point1.x > 0 && point2.x <= 0) || (point1.x < 0 && point2.x >= 0)) {

package/src/CircularView/RotateCircularViewSlider.js

@@ -44,7 +44,7 @@ export function RotateCircularViewSlider({
     >
       <UncontrolledSliderWithPlusMinusBtns
         bindOutsideChangeHelper={bindOutsideChangeHelper}
-        onChange={(_val) => {
+        onChange={_val => {
           const val = 360 - _val;
           const el = target.current
             .closest(`.veCircularView`)

package/src/CircularView/SelectionLayer.js

@@ -63,7 +63,7 @@ function SelectionLayer({
   });
   return (
     <g
-      onContextMenu={(event) => {
+      onContextMenu={event => {
         onRightClicked &&
           onRightClicked({
             annotation: selectionLayer,
@@ -72,7 +72,7 @@ function SelectionLayer({
       }}
       onClick={
         onClick
-          ? (event) => {
+          ? event => {
               onClick({
                 annotation: selectionLayer,
                 event

package/src/CircularView/drawAnnotations.js

@@ -53,10 +53,10 @@ function drawAnnotations(props) {
   const labels = {};
 
   if (!Object.keys(annotations).length) return null;
-  sortBy(annotations, (a) => {
+  sortBy(annotations, a => {
     return -getRangeLength(a, sequenceLength);
   })
-    .map((annotation) => {
+    .map(annotation => {
       const { startAngle, endAngle, totalAngle, centerAngle, locationAngles } =
         getRangeAngles(
           positionBy ? positionBy(annotation) : annotation,
@@ -196,7 +196,7 @@ function drawAnnotations(props) {
           return ellipsizedName;
         }
         if (locationAngles) {
-          annotation.locationAngles = locationAngles.map((l) => {
+          annotation.locationAngles = locationAngles.map(l => {
             const en = getEllipsizedName(l.totalAngle);
             if (en?.length > (ellipsizedName?.length || 0)) {
               ellipsizedName = en;

package/src/CircularView/getAngleForPositionMidpoint.js

@@ -1,3 +1,3 @@
 export default function getAngleForPositionMidpoint(position, maxLength) {
-  return maxLength === 0 ? 0 : (position + 0.5) / maxLength * Math.PI * 2;
+  return maxLength === 0 ? 0 : ((position + 0.5) / maxLength) * Math.PI * 2;
 }

package/src/CircularView/index.d.ts

@@ -1,20 +1,20 @@
 import React from "react";
 export interface CircularViewProps {
-  editorName: string, //the name of the editor instance (this should match what you've set up in your redux store)
-  maxAnnotationsToDisplay,
-  circularAndLinearTickSpacing: number, 
-  spaceBetweenAnnotations: number, // default = 2,
-  annotationHeight: number, // default = 15,
-  hideName: boolean,
+  editorName: string; //the name of the editor instance (this should match what you've set up in your redux store)
+  maxAnnotationsToDisplay;
+  circularAndLinearTickSpacing: number;
+  spaceBetweenAnnotations: number; // default = 2,
+  annotationHeight: number; // default = 15,
+  hideName: boolean;
 }
 
 export interface maxAnnotationsToDisplay {
-  features: number,
-  primers: number,
+  features: number;
+  primers: number;
   // translations: number,
   // parts: number,
-  orfs: number,
-  cutsites: number,
+  orfs: number;
+  cutsites: number;
 }
 
-export default class CircularView extends React.Component <CircularViewProps> {}
+export default class CircularView extends React.Component<CircularViewProps> {}

package/src/CircularView/index.js

@@ -279,7 +279,7 @@ export function CircularView(props) {
                   : Math.ceil(rangeToShowLength / 100) * 10,
               sequenceLength,
               isProtein
-            }).map((pos) => {
+            }).map(pos => {
               return {
                 name: "Tick Mark",
                 tickPosition: pos,
@@ -446,7 +446,7 @@ export function CircularView(props) {
   ];
   const paredDownMessages = [];
   const output = layersToDraw
-    .map((layer) => {
+    .map(layer => {
       const {
         layerName,
         maxToDisplay,
@@ -501,7 +501,7 @@ export function CircularView(props) {
             sequenceData["filtered" + nameUpper] ||
             sequenceData[layerName] ||
             [],
-          (range) => {
+          range => {
             const overlapOfRanges = getOverlapsOfPotentiallyCircularRanges(
               range,
               rangeToShow,
@@ -620,7 +620,7 @@ export function CircularView(props) {
           return null;
         }
       })
-      .filter((el) => {
+      .filter(el => {
         return !!el;
       });
   }
@@ -727,7 +727,7 @@ export function CircularView(props) {
       }}
       onWheel={
         withZoomCircularView && hasRotateableLength
-          ? (e) => {
+          ? e => {
               let delta = e.deltaY;
               if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) {
                 delta = e.deltaX;
@@ -805,10 +805,10 @@ export function CircularView(props) {
       <Draggable
         // enableUserSelectHack={false} //needed to prevent the input bubble from losing focus post user drag
         bounds={{ top: 0, left: 0, right: 0, bottom: 0 }}
-        onDrag={(event) => {
+        onDrag={event => {
           getNearestCursorPositionToMouseEvent(event, toPass, editorDragged);
         }}
-        onStart={(event) => {
+        onStart={event => {
           getNearestCursorPositionToMouseEvent(
             event,
             toPass,
@@ -822,7 +822,7 @@ export function CircularView(props) {
         >
           <svg
             key="circViewSvg"
-            onClick={(event) => {
+            onClick={event => {
               instantiated &&
                 getNearestCursorPositionToMouseEvent(
                   event,
@@ -830,7 +830,7 @@ export function CircularView(props) {
                   editorClicked
                 );
             }}
-            onContextMenu={(e) => {
+            onContextMenu={e => {
               getNearestCursorPositionToMouseEvent(
                 e,
                 toPass,

package/src/CreateAnnotationsPage.js

@@ -1,17 +1,19 @@
 import { compose } from "redux";
 import pluralize from "pluralize";
 
-
-
 import { formName } from "./constants";
 import { typeField } from "./helperComponents/PropertiesDialog/typeField";
-import { DataTable, DialogFooter, withSelectTableRecords, withSelectedEntities } from "@teselagen/ui";
+import {
+  DataTable,
+  DialogFooter,
+  withSelectTableRecords,
+  withSelectedEntities
+} from "@teselagen/ui";
 import { useEffect } from "react";
 import { hideDialog } from "./GlobalDialogUtils";
 import { startCase } from "lodash";
 import { tidyUpAnnotation } from "@teselagen/sequence-utils";
 
-
 const schemaFeatures = ["name", typeField, "start", "end", "strand"];
 const schemaOther = ["name", "start", "end", "strand"];
 export default compose(
@@ -39,7 +41,7 @@ export default compose(
         <DataTable
           isInfinite
           formName={formName}
-          entities={newAnnotations.map((e) => ({
+          entities={newAnnotations.map(e => ({
             ...e,
             start: e.start + 1,
             end: e.end + 1

package/src/CreateCustomEnzyme/index.js

@@ -1,11 +1,7 @@
 import { connect } from "react-redux";
 // import {reduxForm, Field, formValueSelector} from 'redux-form'
 import React from "react";
-import {
-  DialogFooter,
-  InfoHelper,
-  wrapDialog
-} from "@teselagen/ui";
+import { DialogFooter, InfoHelper, wrapDialog } from "@teselagen/ui";
 
 // import './style.css';
 import { cutSequenceByRestrictionEnzyme } from "@teselagen/sequence-utils";