@teselagen/ove 0.3.11 → 0.3.13

package/src/PCRTool/PCRTool.js

@@ -23,7 +23,7 @@ function PCRTool(props) {
     primerClicked
   } = props;
   const origSeqLen = sequenceData.sequence.length;
-  forEach(sequenceData.primers, (p) => (p.originalId = p.id));
+  forEach(sequenceData.primers, p => (p.originalId = p.id));
   const fPrimer = sequenceData.primers[forwardPrimer];
   const rPrimer = sequenceData.primers[reversePrimer];
   let seqBetween;
@@ -77,7 +77,7 @@ function PCRTool(props) {
     });
     seqBetween.name = `PCR Product from ${sequenceData.name} `;
   }
-  const getPrimers = (opts) => {
+  const getPrimers = opts => {
     return flatMap(
       sequenceData.primers,
       ({ name, id, forward, start, end }) => {
@@ -139,23 +139,23 @@ function PCRTool(props) {
       <div style={{ fontWeight: "600", fontSize: 13 }}>Output Product:</div>
       {seqBetween ? (
         <SimpleCircularOrLinearView
-            noWarnings
-            withZoomLinearView
-            withZoomCircularView
-            withChoosePreviewType
-            withDownload
-            smallSlider
-            withCaretEnabled
-            width={width - 50}
-            height={Math.max(height - 250, 400)}
-            sequenceData={seqBetween}
-            primerClicked={(args) => {
-              primerClicked({
-                ...args,
-                annotation: sequenceData.primers[args.annotation.originalId]
-              });
-            }}
-          ></SimpleCircularOrLinearView>
+          noWarnings
+          withZoomLinearView
+          withZoomCircularView
+          withChoosePreviewType
+          withDownload
+          smallSlider
+          withCaretEnabled
+          width={width - 50}
+          height={Math.max(height - 250, 400)}
+          sequenceData={seqBetween}
+          primerClicked={args => {
+            primerClicked({
+              ...args,
+              annotation: sequenceData.primers[args.annotation.originalId]
+            });
+          }}
+        ></SimpleCircularOrLinearView>
       ) : (
         <div style={{ marginTop: 5, fontStyle: "italic", color: "grey" }}>
           Please choose a forward and reverse primer to see the resulting PCR

package/src/Reflex/Browser.js

@@ -20,7 +20,6 @@ class Browser {
     return Browser.isBrowser() && Browser.getUserAgent().match(/Opera Mini/i);
   }
 
-
   // Firefox 1.0+
   static isFirefox() {
     return Browser.isBrowser() && typeof InstallTrigger !== "undefined";
@@ -43,19 +42,20 @@ class Browser {
 
   // Edge 20+
   static isEdge() {
-    return Browser.isBrowser() && (!Browser.isIE() && !!window.StyleMedia);
+    return Browser.isBrowser() && !Browser.isIE() && !!window.StyleMedia;
   }
 
   // Chrome 1+
   static isChrome() {
-    return Browser.isBrowser() && (!!window.chrome && !!window.chrome.webstore);
+    return Browser.isBrowser() && !!window.chrome && !!window.chrome.webstore;
   }
 
   // Blink engine detection
   static isBlink() {
     return (
       Browser.isBrowser() &&
-      ((Browser.isChrome() || Browser.isOpera()) && !!window.CSS)
+      (Browser.isChrome() || Browser.isOpera()) &&
+      !!window.CSS
     );
   }
 
@@ -77,7 +77,6 @@ class Browser {
     );
   }
 
-
   static isWindows() {
     return (
       (Browser.isBrowser() && Browser.isWindowsDesktop()) ||

package/src/Reflex/ReflexContainer.js

@@ -517,7 +517,7 @@ class ReflexContainer extends React.Component {
 
     const newFlex =
       currentFlex > 0
-        ? currentFlex * newSize / size
+        ? (currentFlex * newSize) / size
         : this.computePixelFlex() * newSize;
 
     // eslint-disable-next-line react/no-direct-mutation-state
@@ -717,8 +717,8 @@ class ReflexContainer extends React.Component {
   guid(format = "xxxx-xxxx") {
     let d = new Date().getTime();
 
-    return format.replace(/[xy]/g, function(c) {
-      const r = ((d + Math.random() * 16) % 16) | 0;
+    return format.replace(/[xy]/g, function (c) {
+      const r = (d + Math.random() * 16) % 16 | 0;
       d = Math.floor(d / 16);
       // eslint-disable-next-line eqeqeq
       return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);

package/src/Reflex/ReflexElement.js

@@ -46,7 +46,7 @@ export default class ReflexElement extends React.Component {
 
     this.onResize = this.onResize.bind(this);
 
-    this.setStateThrottled = throttle((state) => {
+    this.setStateThrottled = throttle(state => {
       this.setState(state);
     }, this.props.renderOnResizeRate);
 
@@ -107,7 +107,7 @@ export default class ReflexElement extends React.Component {
   /////////////////////////////////////////////////////////
   renderChildren() {
     if (this.props.propagateDimensions) {
-      return React.Children.map(this.props.children, (child) => {
+      return React.Children.map(this.props.children, child => {
         const newProps = Object.assign({}, child.props, {
           dimensions: this.state.dimensions
         });

package/src/RowItem/Axis.js

@@ -32,7 +32,7 @@ const Axis = function (props) {
       range: row,
       sequenceLength,
       isProtein
-    }).map((tickMarkPosition) => {
+    }).map(tickMarkPosition => {
       const gaps = getGaps ? getGaps(tickMarkPosition).gapsBefore : 0;
       const xCenter =
         (tickMarkPosition - (isProtein ? 1 : 0) + gaps) * charWidth +

package/src/RowItem/Caret/index.js

@@ -31,7 +31,7 @@ function Caret(props) {
         onClick={onClick}
         onContextMenu={
           onRightClick
-            ? (e) => {
+            ? e => {
                 onRightClick(e);
               }
             : undefined

package/src/RowItem/Chromatograms/Chromatogram.js

@@ -61,7 +61,7 @@ export default function Chromatogram(props) {
       style={{
         position: "relative"
       }}
-      onContextMenu={(e) => {
+      onContextMenu={e => {
         showContextMenu([chromatogramMenu], undefined, e);
       }}
     >
@@ -70,7 +70,7 @@ export default function Chromatogram(props) {
         data-tip="Scale Chromatogram Up"
         className="scaleChromatogramButtonUp"
         icon="caret-up"
-        onClick={(e) => {
+        onClick={e => {
           e.stopPropagation();
           setScalePct(scalePct + 0.01);
         }}
@@ -85,7 +85,7 @@ export default function Chromatogram(props) {
         data-tip="Scale Chromatogram Down"
         className="scaleChromatogramButtonDown"
         icon="caret-down"
-        onClick={(e) => {
+        onClick={e => {
           e.stopPropagation();
           setScalePct(scalePct - 0.01);
         }}

package/src/RowItem/CutsiteSelectionLayers.js

@@ -17,7 +17,7 @@ export const CutsiteSelectionLayers = connectToEditor(
   row
 }) {
   return Object.keys(cutsites)
-    .sort((a) => (cutsites[a].id === hoveredAnnotation ? 1 : -1))
+    .sort(a => (cutsites[a].id === hoveredAnnotation ? 1 : -1))
     .map(function (id, index) {
       const cutsite = cutsites[id];
       const isHovered = hoveredAnnotation === cutsite.id;

package/src/RowItem/Cutsites.js

@@ -118,7 +118,7 @@ function Cutsites(props) {
   const snips = [];
   const snipConnectors = [];
   Object.keys(annotationRanges)
-    .sort((a) =>
+    .sort(a =>
       annotationRanges[a].annotation.id === hoveredAnnotation ? 1 : -1
     )
     .forEach(function (key) {

package/src/RowItem/Labels.js

@@ -73,7 +73,7 @@ function Labels(props) {
     )
   );
 
-  filter(annotationRanges, (r) => {
+  filter(annotationRanges, r => {
     if (onlyShowLabelsThatDoNotFit) {
       //tnrtodo: more work needs to be done here to make this actually configurable
       //check if annotation name will fit
@@ -298,7 +298,7 @@ const DrawLabel = withHover(
 
           {!noLabelLine && (
             <div
-              ref={(n) => {
+              ref={n => {
                 if (n) this.n = n;
               }}
               className="veLabelLine"

package/src/RowItem/Orfs.js

@@ -7,7 +7,7 @@ function getExtraInnerCompProps(annotationRange, props) {
   const { annotation, start, end } = annotationRange;
   const { frame, internalStartCodonIndices = [] } = annotation;
   const normalizedInternalStartCodonIndices = internalStartCodonIndices
-    .filter(function(position) {
+    .filter(function (position) {
       if (
         position >= row.start &&
         position >= start &&
@@ -17,7 +17,7 @@ function getExtraInnerCompProps(annotationRange, props) {
         return true;
       } else return false;
     })
-    .map(function(position) {
+    .map(function (position) {
       return position - start;
     });
 

package/src/RowItem/Sequence.js

@@ -43,12 +43,12 @@ class Sequence extends React.Component {
     const rowSeqLen = sequence.length;
     let overlapToBold;
     let isDigestPart;
-    [hoveredAnnEasyStore.hoveredAnn].forEach((ann) => {
+    [hoveredAnnEasyStore.hoveredAnn].forEach(ann => {
       if (ann && !isReplacementLayer) {
         let start = ann.start;
         let end = ann.end - 1;
 
-        partOverhangs.forEach((h) => {
+        partOverhangs.forEach(h => {
           if (ann[h]) {
             isDigestPart = true;
             if (h.includes("Underhang") && isReverse) {
@@ -101,7 +101,7 @@ class Sequence extends React.Component {
         scrollData,
         width
       });
-      inner = times(numChunks, (i) => {
+      inner = times(numChunks, i => {
         const seqChunk = getChunk(sequence, chunkSize, i);
         const textLength = charWidth * seqChunk.length;
         const x = i * chunkWidth;
@@ -194,7 +194,7 @@ class ColoredSequence extends React.Component {
     const { props } = this;
     if (
       ["charWidth", "sequence", "height", "isReverse", "width"].some(
-        (key) => props[key] !== newProps[key]
+        key => props[key] !== newProps[key]
       )
     )
       return true;

package/src/RowItem/StackedAnnotations/PointedAnnotation.js

@@ -69,7 +69,7 @@ function PointedAnnotation(props) {
   let partOverhangStart;
   let partOverhangEnd;
 
-  partOverhangs.forEach((h) => {
+  partOverhangs.forEach(h => {
     const overhangBps = props[h];
     if (overhangBps) {
       if (h.includes("fivePrime")) {
@@ -255,7 +255,7 @@ function PointedAnnotation(props) {
         (rangeType === (forward ? "start" : "end") ||
           rangeType === "beginningAndEnd") && (
           <Tooltip
-            onInteraction={(isOpen) => {
+            onInteraction={isOpen => {
               setOpen(isOpen);
             }}
             isOpen={isOpen}
@@ -277,7 +277,7 @@ function PointedAnnotation(props) {
         (rangeType === (forward ? "end" : "start") ||
           rangeType === "beginningAndEnd") && (
           <Tooltip
-            onInteraction={(isOpen) => {
+            onInteraction={isOpen => {
               setOpen2(isOpen);
             }}
             isOpen={isOpen2}

package/src/RowItem/StackedAnnotations/getStructuredBases.js

@@ -89,7 +89,7 @@ export function getStructuredBases({
       r.allBasesWithMetaData.splice(
         index,
         0,
-        ...bases.split("").map((b) => ({ b, isMatch: false }))
+        ...bases.split("").map(b => ({ b, isMatch: false }))
       );
     });
 

package/src/RowItem/Translations/AASliver.js

@@ -107,83 +107,79 @@ function AASliver(props) {
                   z`;
   return (
     <g
-        onClick={onClick}
-        onContextMenu={onContextMenu}
-        transform={
-          "scale(" +
-          (width / 100) * 1.25 +
-          ", " +
-          height / 100 +
-          ") translate(" +
-          ((forward ? -20 : -50) +
-            ((relativeAAPositionInTranslation - 1) * 100) / 1.25) +
-          ",0)"
-        }
-      >
-        <title>{title}</title>
-        {showAAColors &&
-          (isFiller ? (
-            <polyline
-              className={letter}
-              transform={
-                forward ? "scale(3,1)" : "translate(300,0) scale(-3,1) "
-              }
-              points={
-                isFiller
-                  ? "25,0 49,0 60,50 49,100 25,100 38,50 25,0"
-                  : isTruncatedStart
-                  ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
-                  : isTruncatedEnd
-                  ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
-                  : "0,0 74,0 85,50 74,100 0,100 16,50 0,0"
-              }
-              strokeWidth="5"
-              fill={color || "gray"}
-            />
-          ) : (
-            <path
-              className={letter}
-              transform={
-                forward ? "scale(3,1)" : "translate(300,0) scale(-3,1) "
-              }
-              d={path}
-              strokeWidth="5"
-              fill={color || "gray"}
-            />
-          ))}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      transform={
+        "scale(" +
+        (width / 100) * 1.25 +
+        ", " +
+        height / 100 +
+        ") translate(" +
+        ((forward ? -20 : -50) +
+          ((relativeAAPositionInTranslation - 1) * 100) / 1.25) +
+        ",0)"
+      }
+    >
+      <title>{title}</title>
+      {showAAColors &&
+        (isFiller ? (
+          <polyline
+            className={letter}
+            transform={forward ? "scale(3,1)" : "translate(300,0) scale(-3,1) "}
+            points={
+              isFiller
+                ? "25,0 49,0 60,50 49,100 25,100 38,50 25,0"
+                : isTruncatedStart
+                ? "0,0 50,0 60,50 50,100 00,100 16,50 0,0"
+                : isTruncatedEnd
+                ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
+                : "0,0 74,0 85,50 74,100 0,100 16,50 0,0"
+            }
+            strokeWidth="5"
+            fill={color || "gray"}
+          />
+        ) : (
+          <path
+            className={letter}
+            transform={forward ? "scale(3,1)" : "translate(300,0) scale(-3,1) "}
+            d={path}
+            strokeWidth="5"
+            fill={color || "gray"}
+          />
+        ))}
 
-        {!isFiller && (
-          <text
-            fontSize={25}
-            stroke="black"
-            strokeWidth={2}
-            transform={`scale(${(3 / width) * 10},3) translate(${
-              ((forward ? 45 : 55) * width) / 10
-            },21)`}
-            x="0"
-            y="4"
-            style={{ textAnchor: "middle" }}
-          >
-            {letter}
-          </text>
-        )}
+      {!isFiller && (
+        <text
+          fontSize={25}
+          stroke="black"
+          strokeWidth={2}
+          transform={`scale(${(3 / width) * 10},3) translate(${
+            ((forward ? 45 : 55) * width) / 10
+          },21)`}
+          x="0"
+          y="4"
+          style={{ textAnchor: "middle" }}
+        >
+          {letter}
+        </text>
+      )}
 
-        {showAminoAcidNumbers && (aminoAcidIndex + 1) % 5 === 0 && (
-          <text
-            fontSize={25}
-            stroke="black"
-            strokeWidth={2}
-            transform={`scale(${(3 / width) * 10},3) translate(${
-              ((forward ? 45 : 55) * width) / 10
-            },51)`}
-            x="0"
-            y="4"
-            style={{ textAnchor: "middle" }}
-          >
-            {aminoAcidIndex + 1}
-          </text>
-        )}
-      </g>
+      {showAminoAcidNumbers && (aminoAcidIndex + 1) % 5 === 0 && (
+        <text
+          fontSize={25}
+          stroke="black"
+          strokeWidth={2}
+          transform={`scale(${(3 / width) * 10},3) translate(${
+            ((forward ? 45 : 55) * width) / 10
+          },51)`}
+          x="0"
+          y="4"
+          style={{ textAnchor: "middle" }}
+        >
+          {aminoAcidIndex + 1}
+        </text>
+      )}
+    </g>
   );
 }
 

package/src/RowItem/Translations/index.js

@@ -37,7 +37,7 @@ function Translations(props) {
       {...{
         ...props,
         annotationRanges: props.annotationRanges.filter(
-          (t) => !t.isJoinedLocation
+          t => !t.isJoinedLocation
         ),
         annotationHeight:
           props.annotationHeight +

package/src/RowItem/getCutsiteLabelHeights.js

@@ -19,7 +19,7 @@ export default function getCutsiteLabelHeights({
   let maxAnnotationYOffset = 0;
   const rowCenter = rowLength / 2;
   const iTree = new IntervalTree(rowCenter);
-  forEach(annotationRanges, function(annotationRange) {
+  forEach(annotationRanges, function (annotationRange) {
     counter++;
     if (counter > 50) return;
     let annotation = annotationRange.annotation;

package/src/RowItem/index.js

@@ -3,7 +3,15 @@ import {
   getSequenceWithinRange,
   getOverlapsOfPotentiallyCircularRanges
 } from "@teselagen/range-utils";
-import { map, camelCase, startCase, startsWith, flatMap, assign, noop } from "lodash";
+import {
+  map,
+  camelCase,
+  startCase,
+  startsWith,
+  flatMap,
+  assign,
+  noop
+} from "lodash";
 import { getComplementSequenceString } from "@teselagen/sequence-utils";
 import React, { useMemo } from "react";
 import pluralize from "pluralize";
@@ -24,15 +32,13 @@ import { filter } from "lodash";
 import { defaultCharWidth } from "../constants/rowviewContants";
 import { CutsiteSelectionLayers } from "./CutsiteSelectionLayers";
 
-
-
 function filterRanges(ranges, extraProps = {}) {
   if (!ranges) return ranges;
   if (extraProps.onlyForward) {
-    ranges = filter(ranges, (a) => a.annotation.forward);
+    ranges = filter(ranges, a => a.annotation.forward);
   }
   if (extraProps.onlyReverse) {
-    ranges = filter(ranges, (a) => !a.annotation.forward);
+    ranges = filter(ranges, a => !a.annotation.forward);
   }
   return ranges;
 }
@@ -149,7 +155,7 @@ export default function RowItem(props) {
     if (alignmentData) {
       const gapMap = getGapMap(alignmentData.sequence);
       //this function is used to calculate the number of spaces that come before or inside a range
-      return (rangeOrCaretPosition) => {
+      return rangeOrCaretPosition => {
         if (typeof rangeOrCaretPosition !== "object") {
           return {
             gapsBefore:
@@ -211,7 +217,7 @@ export default function RowItem(props) {
     const pluralType = pluralize(type);
     const ranges = filterRanges(
       annotationLabelVisibility[pluralType] && annotationVisibility[pluralType]
-        ? map(row[pluralType], (a) =>
+        ? map(row[pluralType], a =>
             assign(a, {
               onClick: props[type + "Clicked"],
               onRightClick: props[type + "RightClicked"],
@@ -629,7 +635,7 @@ export default function RowItem(props) {
 
 function getGapMap(sequence) {
   const gapMap = [0]; //a map of position to how many gaps come before that position [0,0,0,5,5,5,5,17,17,17, ]
-  sequence.split("").forEach((char) => {
+  sequence.split("").forEach(char => {
     if (char === "-") {
       gapMap[Math.max(0, gapMap.length - 1)] =
         (gapMap[Math.max(0, gapMap.length - 1)] || 0) + 1;

package/src/RowView/estimateRowHeight.js

@@ -25,7 +25,7 @@ export const rowHeights = {
 
 rowHeights.primaryProteinSequence = rowHeights.translations;
 
-Object.keys(rowHeights).forEach((k) => {
+Object.keys(rowHeights).forEach(k => {
   rowHeights[k].type = k;
   rowHeights[k].marginTop = rowHeights[k].marginTop || 0;
   rowHeights[k].marginBottom = rowHeights[k].marginBottom || 0;
@@ -33,7 +33,7 @@ Object.keys(rowHeights).forEach((k) => {
     rowHeights[k].spaceBetweenAnnotations || 0;
 });
 const translations = {
-  getHeight: (props) => {
+  getHeight: props => {
     if (props.annotationVisibility.aminoAcidNumbers) {
       return [rowHeights.aminoAcidNumbers.type, rowHeights.translations.type];
     }
@@ -88,7 +88,7 @@ const annotationsToCompute = {
   }
 };
 
-export default (props) => {
+export default props => {
   let {
     index,
     cache,
@@ -133,7 +133,7 @@ export default (props) => {
         if (hasYOffset) {
           let maxYOffset = 0;
           annotations &&
-            annotations.forEach((a) => {
+            annotations.forEach(a => {
               if (a.yOffset + 1 > maxYOffset) maxYOffset = a.yOffset + 1;
             });
           heightToAdd = maxYOffset * annotationHeight;
@@ -175,7 +175,7 @@ function getHeights(heightKey, props) {
 function getSummedHeights(heightKeys, props) {
   let height = 0;
   let marginHeight = 0;
-  (Array.isArray(heightKeys) ? heightKeys : [heightKeys]).forEach((k) => {
+  (Array.isArray(heightKeys) ? heightKeys : [heightKeys]).forEach(k => {
     const [h, m] = getHeights(k, props);
     height += h;
     marginHeight += m;

package/src/RowView/index.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
 export interface RowViewProps {
-  editorName: string, //the name of the editor instance (this should match what you've set up in your redux store)
-  height: number, //default = 400
-  width: number,
-  marginWidth: number,
-  charWidth: number,
-  RowItemProps: object, //props passed to RowItem
+  editorName: string; //the name of the editor instance (this should match what you've set up in your redux store)
+  height: number; //default = 400
+  width: number;
+  marginWidth: number;
+  charWidth: number;
+  RowItemProps: object; //props passed to RowItem
 }
-export default class RowView extends React.Component <RowViewProps> {}
+export default class RowView extends React.Component<RowViewProps> {}