@teselagen/ove 0.0.14 → 0.0.16

package/src/RowItem/StackedAnnotations/primerBases.js

@@ -0,0 +1,218 @@
+import React from "react";
+import { map } from "lodash";
+import { fudge2, realCharWidth } from "../constants";
+import getYOffset from "../../CircularView/getYOffset";
+import { getRangeLength } from "@teselagen/range-utils";
+import { getStructuredBases } from "./getStructuredBases";
+
+export function getBasesToShow({
+  hidePrimerBases,
+  annotation,
+  annotationRange,
+  charWidth,
+  bpsPerRow,
+  fullSequence,
+  iTree,
+  sequenceLength
+}) {
+  if (hidePrimerBases) return {};
+  const basesToShow = {};
+  if (annotation && annotation.bases) {
+    const fudge = charWidth - realCharWidth;
+    const { forward, primerBindsOn } = annotation;
+
+    const { basesNoInsertsWithMetaData, inserts, aRange } = getStructuredBases({
+      ...annotation,
+      fullSequence,
+      annotationRange,
+      sequenceLength
+    });
+
+    const annLen = getRangeLength(annotation, sequenceLength);
+    const aRangeLen = getRangeLength(annotationRange, sequenceLength);
+    const startOffset = annotationRange.start % bpsPerRow;
+    const endOffset = bpsPerRow - (annotationRange.end % bpsPerRow);
+    basesToShow.insertPaths = "";
+    basesToShow.insertTicks = "";
+    basesToShow.flipAnnotation = !forward;
+    basesToShow.extraHeight = 0;
+    const insertText = [];
+    const level1Height = -10;
+    const level2Height = 11;
+    inserts.forEach((i, n) => {
+      //loop thru all inserts
+      const indexToUse = forward ? i.index : annLen - i.index - 1;
+      if (
+        aRange.start - (primerBindsOn === "5prime" ? 1 : 0) <= indexToUse &&
+        aRange.end + (primerBindsOn === "5prime" ? 1 : 0) >= indexToUse
+      ) {
+        //only draw if insert falls within the annotation range
+        let xStart = i.index - aRange.start - Math.ceil(0.5 * i.bases.length); //calculate initial xStart
+        let xEnd = i.index - aRange.start + Math.floor(0.5 * i.bases.length);
+        if (aRange.end + 3 < xEnd) {
+          xStart -= xEnd - aRange.end - 3;
+          xEnd -= xEnd - aRange.end - 3;
+        }
+        if (i.index === 0) {
+          //for the first chunk, try to make it hang off the end if possible
+          xStart -= xEnd - 1;
+          xEnd -= xEnd - 1;
+        }
+        const forwAnd3Prime = forward;
+
+        if (xStart < -(forwAnd3Prime ? startOffset : endOffset)) {
+          //if the xStart is going to fall off the row to the left, correct it by moving the xStart to the right
+          const offsetLeft =
+            -(forwAnd3Prime ? startOffset : endOffset) - xStart;
+          xStart += offsetLeft;
+          xEnd += offsetLeft;
+        } else if (
+          xEnd + (forwAnd3Prime ? startOffset : endOffset) >
+          bpsPerRow
+        ) {
+          //if the xStart is going to fall off the row to the right, correct it by moving the xStart to the left
+          const offsetLeft =
+            bpsPerRow - xEnd - (forwAnd3Prime ? startOffset : endOffset);
+          xStart += offsetLeft;
+          xEnd += offsetLeft;
+        }
+        // use an interval tree to determine the level the primer insert should be on to not overlap with other inserts
+        const yOffset = getYOffset(iTree, xStart, xEnd);
+        iTree.insert(xStart, xEnd, {
+          //tnr: pass an initial level in the case that the underlying primer ranges themselves are overlapping
+          ...annotationRange,
+          yOffset
+        });
+
+        basesToShow.extraHeight = Math.max(
+          basesToShow.extraHeight,
+          15 + yOffset * 20
+        );
+        const insertStart =
+          (indexToUse - (forward ? aRange.start : aRange.end)) *
+          (!forward && primerBindsOn === "5prime" ? -1 : 1);
+        basesToShow.insertPaths += getInsertPath({
+          xStart,
+          xEnd,
+          charWidth,
+          level: yOffset,
+          insertStart
+        });
+
+        if (indexToUse !== aRange.end + 1 && indexToUse !== -1) {
+          basesToShow.insertTicks += getInsertTick({
+            charWidth,
+            height: level2Height,
+            insertStart
+          });
+        }
+        const textLength = charWidth * i.bases.length - fudge - fudge2;
+        insertText.push(
+          <text
+            style={{ pointerEvents: "none" }}
+            data-insert-bases={i.bases}
+            className="ve-monospace-font tg-primer-bases-insert"
+            textLength={textLength}
+            transform={
+              forward
+                ? ""
+                : `translate(${aRangeLen * charWidth},-5) scale(-1,-1) `
+            }
+            key={n}
+            x={
+              forward
+                ? (xStart - 1) * charWidth + fudge
+                : xStart * charWidth - fudge / 2
+            }
+            y={level1Height - yOffset * 20 - (forward ? 0 : 5)}
+          >
+            {i.bases.split("").map((b, i) => (
+              <tspan
+                key={i}
+                rotate={forward ? 0 : 180}
+                className="tg-no-match-seq"
+                textLength={textLength}
+              >
+                {b}
+              </tspan>
+            ))}
+          </text>
+        );
+      }
+    });
+
+    const textLength =
+      charWidth * basesNoInsertsWithMetaData.length - fudge - fudge2;
+    basesToShow.baseEl = (
+      <React.Fragment>
+        <text
+          {...{
+            textLength,
+            y: forward ? level2Height : -(basesToShow.extraHeight - 5),
+            x: forward ? fudge / 2 : fudge / 2 + 0.2 /* + diffLen * charWidth */
+          }}
+          style={{ pointerEvents: "none" }}
+          className="ve-monospace-font tg-primer-bases"
+        >
+          {map(
+            basesNoInsertsWithMetaData,
+            ({ b, isMatch, isAmbiguousMatch }, i) => {
+              return (
+                <tspan
+                  key={i}
+                  className={
+                    b === "&"
+                      ? "tg-no-show-seq"
+                      : isMatch
+                      ? ""
+                      : isAmbiguousMatch
+                      ? "tg-ambiguous-match-seq"
+                      : "tg-no-match-seq"
+                  }
+                  textLength={textLength}
+                >
+                  {b}
+                </tspan>
+              );
+            }
+          )}
+        </text>
+        {insertText}
+      </React.Fragment>
+    );
+  }
+  return basesToShow;
+}
+
+function getInsertTick({ insertStart, charWidth, height }) {
+  if (insertStart === 0) return "";
+  const insertLocation = insertStart * charWidth;
+
+  const jutUp = `
+  L ${insertLocation - 1},${height + 5}
+  L ${insertLocation - 1},${height - 4}
+  L ${insertLocation - 1},${height + 5}
+   `;
+  return jutUp;
+}
+
+function getInsertPath({ charWidth, xStart, xEnd, insertStart, level = 0 }) {
+  const insertLocation = insertStart * charWidth;
+  const insertHeight = 15;
+  const levelHeight = -5 - level * 20;
+  const leftX = (xStart - 1) * charWidth;
+  const rightX = (xEnd - 1) * charWidth;
+
+  const jutUp = `
+   L ${insertLocation - 6},${0}
+   L ${insertLocation - 6},${levelHeight}
+   L ${leftX},${levelHeight}
+   L ${leftX},${-insertHeight + levelHeight}
+
+   L ${rightX},${-insertHeight + levelHeight}
+   L ${rightX},${levelHeight}
+   L ${insertLocation + 4},${levelHeight}
+   L ${insertLocation + 4},${0}
+   `;
+  return jutUp;
+}

package/src/RowItem/StackedAnnotations/style.css

@@ -0,0 +1,14 @@
+.veAnnotationHovered .veRowViewFeature path {
+  stroke-width: 2 !important;
+}
+
+.veAnnotationHovered:not(text) path {
+  stroke-width: 2 !important;
+}
+
+.veRowViewAnnotationPosition {
+  z-index: 20;
+}
+.veLabelText {
+  user-select: none;
+}

package/src/RowItem/Translations/AASliver.js

@@ -0,0 +1,190 @@
+// import PropTypes from "prop-types";
+import React from "react";
+import pureNoFunc from "../../utils/pureNoFunc";
+
+function AASliver(props) {
+  const {
+    forward,
+    aminoAcidIndex,
+    showAAColors = true,
+    onClick,
+    onContextMenu,
+    width,
+    height,
+    isFiller,
+    isTruncatedStart,
+    isTruncatedEnd,
+    relativeAAPositionInTranslation,
+    title,
+    color,
+    showAminoAcidNumbers,
+    letter
+  } = props;
+
+  if (letter === "-") {
+    return null;
+  }
+
+  const dirX1 = 1 / Math.sqrt(26);
+  const dirY1 = 5 * dirX1;
+
+  const dirX2 = 16 / Math.sqrt(2756);
+  const dirY2 = 50 / Math.sqrt(2756);
+
+  const roundedCorner = 15;
+  let path = "";
+  path = 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"
+      `M ${roundedCorner / 3}, 0
+                  L ${50 - roundedCorner / 3}, 0
+                  Q 50 0 ${50 + roundedCorner * dirX1} ${roundedCorner * dirY1}
+                  L ${60 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
+                  Q 60 50 ${60 - roundedCorner * dirX1} ${
+        50 + roundedCorner * dirY1
+      }
+                  L ${50 + roundedCorner * dirX1}, ${
+        100 - roundedCorner * dirY1
+      }
+                  Q 50 100 ${50 - roundedCorner} 100
+                  L ${roundedCorner / 3}, 100
+                  Q 0 100 ${roundedCorner * dirX2} ${
+        100 - roundedCorner * dirY2
+      }
+                  L ${16 - roundedCorner * dirX2}, ${50 + roundedCorner * dirY2}
+                  Q 16 50 ${16 - roundedCorner * dirX2} ${
+        50 - roundedCorner * dirY2
+      }
+                  L ${roundedCorner * dirX2}, ${roundedCorner * dirY2}
+                  Q 0 0 ${roundedCorner / 3} 0
+                  z`
+    : isTruncatedEnd
+    ? // ? "24,0 74,0 84,50 74,100 24,100 40,50 24,0"
+      `M ${24 + roundedCorner / 3}, 0
+                  L ${74 - roundedCorner / 3}, 0
+                  Q 74 0 ${74 + roundedCorner * dirX1} ${roundedCorner * dirY1}
+                  L ${84 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
+                  Q 84 50 ${84 - roundedCorner * dirX1} ${
+        50 + roundedCorner * dirY1
+      }
+                  L ${74 + roundedCorner * dirX1}, ${
+        100 - roundedCorner * dirY1
+      }
+                  Q 74 100 ${74 - roundedCorner} 100
+                  L ${24 + roundedCorner / 3}, 100
+                  Q 24 100 ${24 + roundedCorner * dirX2} ${
+        100 - roundedCorner * dirY2
+      }
+                  L ${40 - roundedCorner * dirX2}, ${50 + roundedCorner * dirY2}
+                  Q 40 50 ${40 - roundedCorner * dirX2}, ${
+        50 - roundedCorner * dirY2
+      }
+                  L ${24 + roundedCorner * dirX2}, ${roundedCorner * dirY2}
+                  Q 24 0 ${24 + roundedCorner / 3} 0
+                  z`
+    : `M ${roundedCorner / 3}, 0
+                  L ${74 - roundedCorner / 3}, 0
+                  Q 74 0 ${74 + roundedCorner * dirX1} ${roundedCorner * dirY1}
+                  L ${84 - roundedCorner * dirX1}, ${50 - roundedCorner * dirY1}
+                  Q 84 50 ${84 - roundedCorner * dirX1} ${
+        50 + roundedCorner * dirY1
+      }
+                  L ${74 + roundedCorner * dirX1}, ${
+        100 - roundedCorner * dirY1
+      }
+                  Q 74 100 ${74 - roundedCorner / 3} 100
+                  L ${roundedCorner / 3}, 100
+                  Q 0 100 ${roundedCorner * dirX2} ${
+        100 - roundedCorner * dirY2
+      }
+                  L ${16 - roundedCorner * dirX2}, ${50 + roundedCorner * dirY2}
+                  Q 16 50 ${16 - roundedCorner * dirX2}, ${
+        50 - roundedCorner * dirY2
+      }
+                  L ${roundedCorner * dirX2}, ${roundedCorner * dirY2}
+                  Q 0 0 ${roundedCorner / 3} 0
+                  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"}
+            />
+          ))}
+
+        {!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>
+  );
+}
+
+export default pureNoFunc(AASliver);

package/src/RowItem/Translations/Translation.js

@@ -0,0 +1,162 @@
+import React from "react";
+import {
+  getSequenceWithinRange,
+  zeroSubrangeByContainerRange
+} from "@teselagen/range-utils";
+import AASliver from "./AASliver";
+import pureNoFunc from "../../utils/pureNoFunc";
+import { proteinAlphabet } from "@teselagen/sequence-utils";
+
+class Translation extends React.Component {
+  state = {
+    hasMounted: false
+  };
+  componentDidMount() {
+    this.timeout = setTimeout(() => {
+      this.setState({
+        hasMounted: true
+      });
+    }, 5);
+  }
+  componentWillUnmount() {
+    !window.Cypress && clearTimeout(this.timeout);
+  }
+  render() {
+    const {
+      annotationRange,
+      height,
+      showAminoAcidNumbers,
+      charWidth,
+      aminoAcidNumbersHeight,
+      onClick,
+      onRightClick,
+      onDoubleClick,
+      sequenceLength,
+      getGaps,
+      colorType,
+      isProtein
+    } = this.props;
+    const { hasMounted } = this.state;
+    const { annotation } = annotationRange;
+    if (!hasMounted && !isProtein) {
+      return <g height={height} className="translationLayer" />;
+    }
+    //we have an amino acid representation of our entire annotation, but it is an array
+    //starting at 0, even if the annotation starts at some arbitrary point in the sequence
+    const { aminoAcids = [] } = annotation;
+    //so we "zero" our subRange by the annotation start
+    const subrangeStartRelativeToAnnotationStart = zeroSubrangeByContainerRange(
+      annotationRange,
+      annotation,
+      sequenceLength
+    );
+    //which allows us to then get the amino acids for the subRange
+    const aminoAcidsForSubrange = getSequenceWithinRange(
+      subrangeStartRelativeToAnnotationStart,
+      aminoAcids
+    );
+
+    //we then loop over all the amino acids in the sub range and draw them onto the row
+    const translationSVG = aminoAcidsForSubrange.map(function (
+      aminoAcidSliver,
+      index
+    ) {
+      const isEndFiller =
+        index === 0 &&
+        aminoAcidSliver.positionInCodon === (annotation.forward ? 2 : 0);
+      // const isStartFiller = false
+      let isTruncatedEnd = index === 0 && aminoAcidSliver.positionInCodon === 1;
+      let isTruncatedStart =
+        index === aminoAcidsForSubrange.length - 1 &&
+        aminoAcidSliver.positionInCodon === 1;
+      if (!annotation.forward) {
+        const holder = isTruncatedEnd;
+        isTruncatedEnd = isTruncatedStart;
+        isTruncatedStart = holder;
+      }
+      const isStartFiller =
+        index === aminoAcidsForSubrange.length - 1 &&
+        aminoAcidSliver.positionInCodon === (annotation.forward ? 0 : 2);
+
+      if (
+        aminoAcidSliver.positionInCodon !== 1 &&
+        !isStartFiller &&
+        !isEndFiller
+      ) {
+        return null;
+      }
+      const { gapsInside, gapsBefore } = getGaps(aminoAcidSliver.codonRange);
+      const gapsInsideFeatureStartToBp = getGaps({
+        start: annotationRange.start,
+        end: aminoAcidSliver.sequenceIndex
+      }).gapsInside;
+      // var relativeAAPositionInTranslation = annotationRange.start % bpsPerRow + index;
+      const relativeAAPositionInTranslation = index;
+      const aminoAcid = aminoAcidSliver.aminoAcid || {};
+      //get the codonIndices relative to
+      const alphVal = proteinAlphabet[aminoAcid.value];
+      let color;
+      if (alphVal) {
+        color =
+          colorType === "byHydrophobicity"
+            ? alphVal.color
+            : alphVal.colorByFamily;
+      } else {
+        color = aminoAcid.color;
+      }
+      return (
+        <AASliver
+          isFiller={isEndFiller || isStartFiller}
+          isTruncatedEnd={isTruncatedEnd}
+          isTruncatedStart={isTruncatedStart}
+          onClick={function (event) {
+            onClick({
+              annotation: aminoAcidSliver.codonRange,
+              codonRange: aminoAcidSliver.codonRange,
+              event,
+              gapsInside,
+              gapsBefore
+            });
+          }}
+          onContextMenu={function (event) {
+            onRightClick &&
+              onRightClick({
+                annotation,
+                codonRange: aminoAcidSliver.codonRange,
+                event,
+                gapsInside,
+                gapsBefore
+              });
+          }}
+          title={`${aminoAcid.name} -- Index: ${
+            aminoAcidSliver.aminoAcidIndex + 1
+          } -- Hydrophobicity: ${aminoAcid.hydrophobicity} -- Mass: ${
+            aminoAcid.mass
+          }`}
+          showAminoAcidNumbers={showAminoAcidNumbers}
+          aminoAcidIndex={aminoAcidSliver.aminoAcidIndex}
+          onDoubleClick={function (event) {
+            onDoubleClick({ annotation, event });
+          }}
+          getGaps={getGaps}
+          key={annotation.id + aminoAcidSliver.sequenceIndex}
+          forward={annotation.forward}
+          width={charWidth}
+          height={
+            showAminoAcidNumbers ? height - aminoAcidNumbersHeight : height
+          }
+          relativeAAPositionInTranslation={
+            relativeAAPositionInTranslation + gapsInsideFeatureStartToBp
+          }
+          letter={aminoAcid.value}
+          color={color}
+          positionInCodon={aminoAcidSliver.positionInCodon}
+        />
+      );
+    });
+
+    return <g className="translationLayer">{translationSVG}</g>;
+  }
+}
+
+export default pureNoFunc(Translation);

package/src/RowItem/Translations/index.js

@@ -0,0 +1,54 @@
+import React from "react";
+import useAAColorType from "../../utils/useAAColorType";
+import StackedAnnotations from "../StackedAnnotations";
+import Translation from "./Translation";
+
+function getExtraInnerCompProps(
+  annotationRange,
+  {
+    showAminoAcidNumbers,
+    getGaps,
+    isProtein,
+    colorType,
+    annotationHeight,
+    spaceBetweenAnnotations,
+    sequenceLength,
+    aminoAcidNumbersHeight
+  }
+) {
+  const anotationHeightNoSpace = annotationHeight - spaceBetweenAnnotations;
+
+  return {
+    showAminoAcidNumbers,
+    getGaps,
+    height: anotationHeightNoSpace,
+    aminoAcidNumbersHeight,
+    annotationRange,
+    isProtein,
+    colorType,
+    sequenceLength
+  };
+}
+
+function Translations(props) {
+  const [colorType] = useAAColorType();
+  return (
+    <StackedAnnotations
+      {...{
+        ...props,
+        annotationRanges: props.annotationRanges.filter(
+          (t) => !t.isJoinedLocation
+        ),
+        annotationHeight:
+          props.annotationHeight +
+          (props.showAminoAcidNumbers ? props.aminoAcidNumbersHeight : 0),
+        disregardLocations: true,
+        getExtraInnerCompProps,
+        InnerComp: Translation,
+        colorType
+      }}
+    />
+  );
+}
+
+export default Translations;

package/src/RowItem/Translations/style.css

@@ -0,0 +1,3 @@
+.veRowViewTranslations {
+  z-index: 20;
+}

package/src/RowItem/constants.js

@@ -0,0 +1,3 @@
+export const ANNOTATION_LABEL_FONT_WIDTH = 10;
+export const realCharWidth = 8;
+export const fudge2 = 3; //used to help the end of the sequence in the row view position correctly

package/src/RowItem/getCutsiteLabelHeights.js

@@ -0,0 +1,56 @@
+//tnr: not actually used yet. I don't think it is necessary
+// for the cutsite label heights to be perfect
+
+import getXStartAndWidthOfRowAnnotation from "./getXStartAndWidthOfRowAnnotation";
+import IntervalTree from "node-interval-tree";
+import getYOffset from "../CircularView/getYOffset";
+import forEach from "lodash/forEach";
+
+export default function getCutsiteLabelHeights({
+  bpsPerRow,
+  charWidth,
+  annotationRanges,
+  annotationHeight,
+  spaceBetweenAnnotations,
+  textWidth
+}) {
+  const rowLength = bpsPerRow * charWidth;
+  let counter = 0;
+  let maxAnnotationYOffset = 0;
+  const rowCenter = rowLength / 2;
+  const iTree = new IntervalTree(rowCenter);
+  forEach(annotationRanges, function(annotationRange) {
+    counter++;
+    if (counter > 50) return;
+    let annotation = annotationRange.annotation;
+    if (!annotation) {
+      annotation = annotationRange;
+    }
+    const labelLength = annotation.restrictionEnzyme.name.length * textWidth;
+    let { xStart } = getXStartAndWidthOfRowAnnotation(
+      annotationRange,
+      bpsPerRow,
+      charWidth
+    );
+    let xEnd = xStart + labelLength;
+
+    if (xEnd > rowLength) {
+      xStart = xStart - (xEnd - rowLength);
+      xEnd = rowLength;
+    }
+    const yOffset = getYOffset(iTree, xStart, xEnd);
+    iTree.insert(xStart, xEnd, {
+      ...annotationRange,
+      yOffset
+    });
+
+    if (yOffset > maxAnnotationYOffset) {
+      maxAnnotationYOffset = yOffset;
+    }
+    const height = yOffset * (annotationHeight + spaceBetweenAnnotations);
+    annotation.height = height;
+  });
+  const containerHeight =
+    (maxAnnotationYOffset + 1) * (annotationHeight + spaceBetweenAnnotations);
+  return containerHeight;
+}