@teselagen/ove 0.0.14 → 0.0.15

package/src/RowItem/StackedAnnotations/PointedAnnotation.js

@@ -0,0 +1,347 @@
+import Color from "color";
+import classnames from "classnames";
+import withHover from "../../helperComponents/withHover";
+import getAnnotationNameAndStartStopString from "../../utils/getAnnotationNameAndStartStopString";
+
+import React, { useState } from "react";
+import { doesLabelFitInAnnotation } from "../utils";
+import { noop } from "lodash";
+import getAnnotationClassnames from "../../utils/getAnnotationClassnames";
+import { getStripedPattern } from "../../utils/editorUtils";
+import { ANNOTATION_LABEL_FONT_WIDTH } from "../constants";
+import { partOverhangs } from "../partOverhangs";
+import { Tooltip } from "@blueprintjs/core";
+
+function PointedAnnotation(props) {
+  const {
+    className,
+    widthInBps,
+    charWidth,
+    height,
+    rangeType,
+    forward,
+    arrowheadType,
+    name: _name = "",
+    customName,
+    type,
+    readOnly,
+    isStriped,
+    onMouseLeave,
+    onMouseOver,
+    isProtein,
+    id,
+    extraHeight,
+    flipAnnotation,
+    insertPaths,
+    insertTicks,
+    hideName,
+    color = "orange",
+    fill,
+    stroke,
+    opacity,
+    onClick = noop,
+    onDoubleClick = noop,
+    textColor,
+    onRightClick = noop,
+    gapsInside,
+    gapsBefore,
+    annotation,
+    truncateLabelsThatDoNotFit,
+    onlyShowLabelsThatDoNotFit
+  } = props;
+
+  const name = customName || _name;
+  let pointiness = props.pointiness || 4;
+  let arrowPointiness = props.arrowPointiness || 1;
+  const [isOpen, setOpen] = useState(false);
+  const [isOpen2, setOpen2] = useState(false);
+  if (arrowheadType === "NONE") {
+    pointiness = 0;
+    arrowPointiness = 0;
+  }
+  const _rangeType = annotation.rangeTypeOverride || rangeType;
+
+  const classNames = getAnnotationClassnames(annotation, {
+    isProtein,
+    type,
+    viewName: "RowView"
+  });
+  let partOverhangStart;
+  let partOverhangEnd;
+
+  partOverhangs.forEach((h) => {
+    const overhangBps = props[h];
+    if (overhangBps) {
+      if (h.includes("fivePrime")) {
+        partOverhangStart = overhangBps;
+        if (h.includes("Underhang")) {
+          partOverhangStart += " Underhang";
+        } else if (h.includes("Overhang")) {
+          partOverhangStart += " Overhang";
+        }
+      } else {
+        partOverhangEnd = overhangBps;
+        if (h.includes("Underhang")) {
+          partOverhangEnd += " Underhang";
+        } else if (h.includes("Overhang")) {
+          partOverhangEnd += " Overhang";
+        }
+      }
+    }
+  });
+
+  const width = (widthInBps + gapsInside) * charWidth;
+  let charWN = charWidth; //charWN is normalized
+  if (charWidth < 15) {
+    //allow the arrow width to adapt
+    if (width > 15) {
+      charWN = 15; //tnr: replace 15 here with a non-hardcoded number..
+    } else {
+      charWN = width;
+    }
+  }
+  charWN = arrowPointiness * charWN;
+
+  const widthMinusOne = width - charWN;
+  let path;
+  let hasAPoint = false;
+  const endLine = annotation.overlapsSelf
+    ? `L 0,${height / 2}
+  L -10,${height / 2}
+  L 0,${height / 2} `
+    : "";
+  const bottomLine = `${insertTicks || ""} L 0,${height}`;
+  const startLines = `M 0,0
+  ${insertPaths || ""}`;
+  const arrowLine = annotation.overlapsSelf
+    ? `L ${width + 10},${height / 2}
+  L ${width},${height / 2} `
+    : "";
+
+  // starting from the top left of the annotation
+  if (_rangeType === "middle") {
+    //draw a rectangle
+    path = `
+        ${startLines}
+        L ${width - pointiness / 2},0
+        Q ${width + pointiness / 2},${height / 2} ${
+      width - pointiness / 2
+    },${height}
+        ${bottomLine}
+        Q ${pointiness},${height / 2} ${0},${0}
+        z`;
+  } else if (_rangeType === "start") {
+    path = `
+        ${startLines}
+        L ${width - pointiness / 2},0
+
+        Q ${width + pointiness / 2},${height / 2} ${
+      width - pointiness / 2
+    },${height}
+
+        ${bottomLine}
+        ${endLine}
+        z`;
+  } else if (_rangeType === "beginningAndEnd") {
+    hasAPoint = true;
+    path = `
+        ${startLines}
+        L ${widthMinusOne},0
+        L ${width},${height / 2}
+        ${arrowLine}
+        L ${widthMinusOne},${height}
+        ${bottomLine}
+        ${endLine}
+        z`;
+  } else {
+    hasAPoint = true;
+    path = `
+      ${startLines}
+      L ${widthMinusOne},0
+      L ${width},${height / 2}
+      ${arrowLine}
+      L ${widthMinusOne},${height}
+      ${bottomLine}
+      Q ${pointiness},${height / 2} ${0},${0}
+      z`;
+  }
+  let nameToDisplay = name;
+  let textOffset =
+    width / 2 -
+    (name.length * 5) / 2 -
+    (hasAPoint ? (pointiness / 2) * (forward ? 1 : -1) : 0);
+  if (
+    !doesLabelFitInAnnotation(name, { width }, charWidth) ||
+    (!onlyShowLabelsThatDoNotFit &&
+      ["parts", "features"].includes(annotation.annotationTypePlural))
+  ) {
+    if (truncateLabelsThatDoNotFit) {
+      const fractionToDisplay =
+        width / (name.length * ANNOTATION_LABEL_FONT_WIDTH);
+      const numLetters = Math.floor(fractionToDisplay * name.length);
+      nameToDisplay = name.slice(0, numLetters);
+      if (nameToDisplay.length > 3) {
+        if (nameToDisplay.length !== name.length) {
+          nameToDisplay += "..";
+        }
+
+        textOffset =
+          width / 2 -
+          (nameToDisplay.length * 5) / 2 -
+          (hasAPoint ? (pointiness / 2) * (forward ? 1 : -1) : 0);
+      } else {
+        textOffset = 0;
+        nameToDisplay = "";
+      }
+    } else {
+      textOffset = 0;
+      nameToDisplay = "";
+    }
+  }
+  let _textColor = textColor;
+  if (!textColor) {
+    try {
+      _textColor = Color(color).isDark() ? "white" : "black";
+    } catch (error) {
+      _textColor = "white";
+    }
+  }
+
+  return (
+    <g
+      {...{ onMouseLeave, onMouseOver }}
+      className={` clickable ${className} ${classNames} ${
+        forward ? "ann-forward" : `ann-reverse`
+      }`}
+      data-id={id}
+      onClick={function (event) {
+        onClick({ annotation, event, gapsBefore, gapsInside });
+      }}
+      onDoubleClick={function (event) {
+        onDoubleClick &&
+          onDoubleClick({ annotation, event, gapsBefore, gapsInside });
+      }}
+      onContextMenu={function (event) {
+        onRightClick({ annotation, event, gapsBefore, gapsInside });
+      }}
+    >
+      {!(isOpen || isOpen2) && (
+        <title>
+          {getAnnotationNameAndStartStopString(annotation, {
+            isProtein,
+            readOnly
+          })}
+        </title>
+      )}
+      {isStriped && getStripedPattern({ color })}
+
+      <path
+        strokeWidth="1"
+        stroke={stroke || "black"}
+        opacity={opacity}
+        fill={isStriped ? "url(#diagonalHatch)" : fill || color}
+        transform={
+          forward
+            ? null
+            : "translate(" +
+              width +
+              `,${flipAnnotation ? -extraHeight + 10 : 0}) scale(-1,${
+                flipAnnotation ? "-" : ""
+              }1) `
+        }
+        d={path}
+      />
+      {partOverhangStart &&
+        (rangeType === (forward ? "start" : "end") ||
+          rangeType === "beginningAndEnd") && (
+          <Tooltip
+            onInteraction={(isOpen) => {
+              setOpen(isOpen);
+            }}
+            isOpen={isOpen}
+            wrapperTagName="g"
+            targetTagName="g"
+            content={partOverhangStart}
+          >
+            <circle
+              className="partWithOverhangsIndicator"
+              style={{ fillOpacity: 1 }}
+              fill="#ac68cc"
+              cx={(forward ? -7 : 0) + 15}
+              cy={7}
+              r={4}
+            ></circle>
+          </Tooltip>
+        )}
+      {partOverhangEnd &&
+        (rangeType === (forward ? "end" : "start") ||
+          rangeType === "beginningAndEnd") && (
+          <Tooltip
+            onInteraction={(isOpen) => {
+              setOpen2(isOpen);
+            }}
+            isOpen={isOpen2}
+            wrapperTagName="g"
+            targetTagName="g"
+            content={partOverhangEnd}
+          >
+            <circle
+              className="partWithOverhangsIndicator"
+              style={{ fillOpacity: 1 }}
+              fill="#ac68cc"
+              cx={(forward ? -7 : 0) + width - 10}
+              cy={7}
+              r={4}
+            ></circle>
+          </Tooltip>
+        )}
+      {!hideName && nameToDisplay && (
+        <text
+          className={classnames(
+            "veLabelText ve-monospace-font",
+            annotation.labelClassName
+          )}
+          style={{
+            fontSize: ".9em",
+            fill: _textColor
+          }}
+          transform={`translate(${textOffset},${height - 2})`}
+        >
+          {nameToDisplay}
+        </text>
+      )}
+    </g>
+  );
+}
+
+export default withHover(PointedAnnotation);
+
+//  {/* <Tooltip
+//               wrapperTagName="g"
+//               targetTagName="g"
+//               content={"asdfasdfasdfasfdp"}
+//             >
+//               <rect
+//                 style={{ fillOpacity: 1 }}
+//                 stroke="#ac68cc"
+//                 fill="none"
+//                 x={-10}
+//                 width={10}
+//                 height={5}
+//               ></rect>
+//             </Tooltip>
+//             <Tooltip
+//               wrapperTagName="g"
+//               targetTagName="g"
+//               content={"asdfasdfasdfasfdp"}
+//             >
+//               <rect
+//                 style={{ fillOpacity: 1 }}
+//                 stroke="#ac68cc"
+//                 fill="none"
+//                 x={ width + 2 }
+//                 y={7}
+//                 width={10}
+//                 height={5}
+//               ></rect>
+//             </Tooltip> */}

package/src/RowItem/StackedAnnotations/getStructuredBases.js

@@ -0,0 +1,97 @@
+import { clone } from "lodash";
+import { getRangeLength, getSequenceWithinRange } from "@teselagen/range-utils";
+import { getComplementSequenceString } from "@teselagen/sequence-utils";
+import { bioData } from "@teselagen/sequence-utils";
+const { ambiguous_dna_values } = bioData;
+export function getStructuredBases({
+  annotationRange,
+  forward,
+  bases = "",
+  start,
+  end,
+  fullSequence,
+  primerBindsOn,
+  sequenceLength
+}) {
+  const annLen = getRangeLength({ start, end }, sequenceLength);
+  let basesToUse = bases;
+  if (bases.length < annLen) {
+    if (forward && primerBindsOn === "3prime") {
+      const toAddLen = annLen - bases.length;
+      for (let index = 0; index < toAddLen; index++) {
+        basesToUse = "&" + basesToUse;
+      }
+    } else if (!forward && primerBindsOn === "5prime") {
+      const toAddLen = annLen - bases.length;
+      for (let index = 0; index < toAddLen; index++) {
+        basesToUse = basesToUse + "&";
+      }
+    }
+  }
+  const aRange = {
+    //tnr: this probably needs to be changed in case annotation wraps origin
+    start: annotationRange.start - start,
+    end: annotationRange.end - start
+  };
+  const r = {
+    aRange,
+    basesNoInserts: basesToUse,
+    inserts: []
+  };
+
+  const baseLen = basesToUse.length;
+  const diffLen = baseLen - annLen;
+  if (diffLen > 0) {
+    r.basesNoInserts = basesToUse.slice(
+      primerBindsOn === "5prime" ? 0 : diffLen,
+      primerBindsOn === "5prime" ? annLen : baseLen
+    );
+    const insertBases = basesToUse.slice(
+      primerBindsOn === "5prime" ? annLen : 0,
+      primerBindsOn === "5prime" ? baseLen : diffLen
+    );
+
+    r.inserts = [
+      {
+        bases: insertBases,
+        index: primerBindsOn === "5prime" ? annLen : 0
+      }
+    ];
+  }
+  const basesForRange = getSequenceWithinRange(
+    aRange,
+    forward ? r.basesNoInserts : r.basesNoInserts.split("").reverse().join("")
+  );
+  r.basesNoInsertsWithMetaData = basesForRange.split("").map((b, i) => {
+    const indexOfBase = i + annotationRange.start;
+    let seqForBase = (fullSequence && fullSequence[indexOfBase]) || "";
+    if (!forward) {
+      seqForBase = getComplementSequenceString(seqForBase);
+    }
+    const isMatch = seqForBase.toLowerCase() === b.toLowerCase();
+    const isAmbiguousMatch =
+      !isMatch &&
+      ambiguous_dna_values[b.toUpperCase()].length > 1 &&
+      ambiguous_dna_values[b.toUpperCase()].includes(seqForBase.toUpperCase());
+    return {
+      b,
+      isMatch,
+      isAmbiguousMatch
+    };
+  });
+  r.allBasesWithMetaData = clone(r.basesNoInsertsWithMetaData);
+  if (!forward) {
+    r.allBasesWithMetaData = r.allBasesWithMetaData.reverse();
+  }
+  r.inserts
+    .sort((a, b) => a.index - b.index)
+    .forEach(({ bases, index }) => {
+      r.allBasesWithMetaData.splice(
+        index,
+        0,
+        ...bases.split("").map((b) => ({ b, isMatch: false }))
+      );
+    });
+
+  return r;
+}

package/src/RowItem/StackedAnnotations/index.js

@@ -0,0 +1,182 @@
+import { getFeatureToColorMap } from "@teselagen/sequence-utils";
+import "./style.css";
+import forEach from "lodash/forEach";
+import React from "react";
+import IntervalTree from "node-interval-tree";
+import getXStartAndWidthOfRowAnnotation from "../getXStartAndWidthOfRowAnnotation";
+
+import { getAnnotationRangeType } from "@teselagen/range-utils";
+import AnnotationContainerHolder from "../AnnotationContainerHolder";
+import AnnotationPositioner from "../AnnotationPositioner";
+import PointedAnnotation from "./PointedAnnotation";
+import { getBasesToShow } from "./primerBases";
+
+function StackedAnnotations(props) {
+  const {
+    annotationRanges = [],
+    bpsPerRow,
+    charWidth,
+    containerClassName,
+    annotationHeight,
+    spaceBetweenAnnotations,
+    onClick,
+    isProtein,
+    onDoubleClick,
+    disregardLocations,
+    InnerComp,
+    onRightClick,
+    editorName,
+    type,
+    readOnly,
+    noRedux,
+    alignmentType,
+    getGaps,
+    marginTop,
+    sequenceLength,
+    // sequence: fullSeq,
+    fullSequence,
+    marginBottom,
+    truncateLabelsThatDoNotFit,
+    getExtraInnerCompProps,
+    onlyShowLabelsThatDoNotFit,
+    isStriped
+  } = props;
+
+  const iTree = new IntervalTree(Math.ceil(bpsPerRow / 2));
+  const InnerCompToUse = InnerComp || PointedAnnotation;
+  if (annotationRanges.length === 0) {
+    return null;
+  }
+
+  let maxAnnotationYOffset = 0;
+  const annotationsSVG = [];
+  let extraHeightForContainer = 0;
+  forEach(annotationRanges, function (annotationRange, index) {
+    if (annotationRange.yOffset > maxAnnotationYOffset) {
+      maxAnnotationYOffset = annotationRange.yOffset;
+    }
+    let { gapsBefore, gapsInside } = getGaps(annotationRange);
+    if (alignmentType === "Parallel Part Creation") {
+      gapsBefore = 0;
+      gapsInside = 0;
+    }
+    const annotation = annotationRange.annotation;
+    const annotationColor =
+      annotation.color ||
+      (annotation.type &&
+        getFeatureToColorMap({ includeHidden: true })[annotation.type]) ||
+      "#BBBBBB";
+    const result = getXStartAndWidthOfRowAnnotation(
+      annotationRange,
+      bpsPerRow,
+      charWidth,
+      gapsBefore,
+      gapsInside
+    );
+    let top = annotationRange.yOffset * annotationHeight;
+    if (!disregardLocations && annotationRange.containsLocations) {
+      top += annotationHeight / 2 - annotationHeight / 16;
+    }
+
+    const {
+      baseEl,
+      extraHeight = 0,
+      insertPaths,
+      insertTicks,
+      flipAnnotation
+    } = getBasesToShow({
+      hidePrimerBases: charWidth < 8,
+      sequenceLength,
+      iTree,
+      fullSequence,
+      annotation,
+      annotationRange,
+      charWidth,
+      bpsPerRow
+    });
+
+    const anotationHeightNoSpace = annotationHeight - spaceBetweenAnnotations;
+    extraHeightForContainer += extraHeight;
+    annotationsSVG.push(
+      <AnnotationPositioner
+        yOffset={annotationRange.yOffset}
+        height={anotationHeightNoSpace + extraHeight}
+        width={result.width}
+        key={index}
+        top={top}
+        left={result.xStart}
+      >
+        <InnerCompToUse
+          noRedux={noRedux}
+          key={index}
+          className={annotation.className}
+          arrowheadType={annotation.arrowheadType}
+          editorName={editorName}
+          id={annotation.id}
+          fivePrimeOverhang={annotation.fivePrimeOverhang}
+          fivePrimeUnderhang={annotation.fivePrimeUnderhang}
+          fivePrimeDigestingEnzyme={annotation.fivePrimeDigestingEnzyme}
+          threePrimeOverhang={annotation.threePrimeOverhang}
+          threePrimeUnderhang={annotation.threePrimeUnderhang}
+          threePrimeDigestingEnzyme={annotation.threePrimeDigestingEnzyme}
+          onClick={onClick}
+          truncateLabelsThatDoNotFit={truncateLabelsThatDoNotFit}
+          insertPaths={insertPaths}
+          insertTicks={insertTicks}
+          onDoubleClick={onDoubleClick}
+          type={type}
+          readOnly={readOnly}
+          flipAnnotation={flipAnnotation}
+          extraHeight={extraHeight}
+          onRightClick={onRightClick}
+          annotation={annotation}
+          isProtein={isProtein}
+          isStriped={isStriped}
+          gapsInside={gapsInside}
+          gapsBefore={gapsBefore}
+          color={annotationColor}
+          width={result.width}
+          annotationRange={annotationRange}
+          widthInBps={annotationRange.end - annotationRange.start + 1}
+          charWidth={charWidth}
+          forward={annotation.forward}
+          onlyShowLabelsThatDoNotFit={onlyShowLabelsThatDoNotFit}
+          rangeType={getAnnotationRangeType(
+            annotationRange,
+            annotation,
+            annotation.forward
+          )}
+          {...(annotation.bases && { pointiness: 3, arrowPointiness: 0.2 })}
+          height={
+            annotationRange.containsLocations && !disregardLocations
+              ? anotationHeightNoSpace / 8
+              : anotationHeightNoSpace
+          }
+          hideName={
+            (type === "primer" && annotation.bases) ||
+            (annotationRange.containsLocations && !disregardLocations)
+          }
+          name={annotation.name}
+          {...(getExtraInnerCompProps &&
+            getExtraInnerCompProps(annotationRange, props))}
+        />
+        {baseEl}
+      </AnnotationPositioner>
+    );
+  });
+
+  const containerHeight = (maxAnnotationYOffset + 1) * annotationHeight;
+  return (
+    <AnnotationContainerHolder
+      marginTop={marginTop}
+      marginBottom={marginBottom}
+      className={containerClassName}
+      containerHeight={containerHeight}
+      extraMargin={extraHeightForContainer}
+    >
+      {annotationsSVG}
+    </AnnotationContainerHolder>
+  );
+}
+
+export default StackedAnnotations;