@teselagen/ove 0.0.14 → 0.0.15

package/src/RowItem/Orf.js

@@ -0,0 +1,109 @@
+import getAnnotationNameAndStartStopString from "../utils/getAnnotationNameAndStartStopString";
+import React from "react";
+import orfFrameToColorMap from "../constants/orfFrameToColorMap";
+
+function Orf(props) {
+  const {
+    height,
+    rangeType,
+    normalizedInternalStartCodonIndices = [],
+    forward,
+    frame = 0,
+    annotation,
+    width,
+    onClick,
+    isProtein,
+    onRightClick,
+    charWidth,
+    readOnly,
+    gapsInside,
+    gapsBefore
+  } = props;
+  const heightToUse = height / 1.5;
+  const color = orfFrameToColorMap[frame];
+  let arrow = null;
+  let endCircle = null;
+  const circle = (
+    <circle
+      key="circle"
+      r={heightToUse / 2}
+      cx={heightToUse / 2}
+      cy={heightToUse / 2}
+    />
+  );
+  if (rangeType === "end" || rangeType === "beginningAndEnd") {
+    arrow = (
+      <path
+        transform={`translate(${
+          width + gapsInside - Math.max(charWidth, 5)
+        },0) scale(${Math.max(charWidth, 8) / 64},${heightToUse / 64})`}
+        d={
+          rangeType === "start"
+            ? "M0 16 L0 48 L16 64 L48 64 L64 48 L64 16 L48 0 L16 0 Z"
+            : "M0 64 L64 32 L0 0 Z"
+        }
+      />
+    );
+  }
+  if (rangeType === "start" || rangeType === "beginningAndEnd") {
+    endCircle = circle;
+  }
+  const internalStartCodonCircles = normalizedInternalStartCodonIndices.map(
+    function (internalStartCodon, index) {
+      return React.cloneElement(circle, {
+        key: index,
+        transform: `translate(${charWidth * internalStartCodon},0)`
+      });
+    }
+  );
+  return (
+    <g
+      onClick={function (event) {
+        onClick({ annotation, event, gapsInside, gapsBefore });
+      }}
+      onContextMenu={function (event) {
+        onRightClick({ annotation, event, gapsInside, gapsBefore });
+      }}
+      className={`veRowViewOrf clickable frame${frame}`}
+      strokeWidth="1"
+      stroke={color}
+      fillOpacity={1}
+      fill={color}
+      transform={
+        forward ? null : `translate(${width + gapsInside},0) scale(-1,1)`
+      }
+    >
+      <path
+        transform={
+          (rangeType === "start" ? `translate(${charWidth},0)` : "") +
+          `scale(${
+            (width + gapsInside - (rangeType === "middle" ? 0 : charWidth)) / 64
+          },${heightToUse / 64})`
+        }
+        d="M0 40 L64 40 L64 20 L0 20 Z"
+      />
+      {arrow}
+      {endCircle}
+      {internalStartCodonCircles}
+      <title>
+        {" "}
+        {getAnnotationNameAndStartStopString(annotation, {
+          startText: "Open Reading Frame:",
+          isProtein,
+          readOnly
+        })}{" "}
+      </title>
+    </g>
+  );
+}
+
+// Orf.propTypes = {
+//   width: PropTypes.number.isRequired,
+//   charWidth: PropTypes.number.isRequired,
+//   frame: PropTypes.number.isRequired,
+//   height: PropTypes.number.isRequired,
+//   rangeType: PropTypes.string.isRequired,
+//   forward: PropTypes.bool.isRequired
+// };
+
+export default Orf;

package/src/RowItem/Orfs.js

@@ -0,0 +1,35 @@
+import React from "react";
+import Orf from "./Orf";
+import StackedAnnotations from "./StackedAnnotations";
+
+function getExtraInnerCompProps(annotationRange, props) {
+  const { row } = props;
+  const { annotation, start, end } = annotationRange;
+  const { frame, internalStartCodonIndices = [] } = annotation;
+  const normalizedInternalStartCodonIndices = internalStartCodonIndices
+    .filter(function(position) {
+      if (
+        position >= row.start &&
+        position >= start &&
+        position <= end &&
+        position <= row.end
+      ) {
+        return true;
+      } else return false;
+    })
+    .map(function(position) {
+      return position - start;
+    });
+
+  return { normalizedInternalStartCodonIndices, frame };
+}
+
+function Orfs(props) {
+  return (
+    <StackedAnnotations
+      {...{ ...props, getExtraInnerCompProps, InnerComp: Orf }}
+    />
+  );
+}
+
+export default Orfs;

package/src/RowItem/ReplacementLayers/style.css

@@ -0,0 +1,5 @@
+.veRowViewReplacementLayers {
+  border: none;
+  opacity: 1;
+  margin-top: 4;
+}

package/src/RowItem/SelectionLayer/index.js

@@ -0,0 +1,184 @@
+// import { onlyUpdateForKeys } from "recompose";
+import draggableClassnames from "../../constants/draggableClassnames";
+import React from "react";
+import Caret from "../Caret";
+import pureNoFunc from "../../utils/pureNoFunc";
+
+import "./style.css";
+
+import getXStartAndWidthOfRangeWrtRow from "../getXStartAndWidthOfRangeWrtRow";
+import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
+import {
+  getSelectionMessage,
+  preventDefaultStopPropagation
+} from "../../utils/editorUtils";
+
+function SelectionLayer(props) {
+  const {
+    charWidth,
+    isDraggable,
+    row,
+    sequenceLength,
+    regions,
+    leftMargin = 0,
+    isProtein,
+    getGaps,
+    hideTitle: topLevelHideTitle,
+    customTitle: topLevelCustomTitle,
+    color: topLevelColor,
+    hideCarets: topLevelHideCarets = false,
+    selectionLayerRightClicked,
+    className: globalClassname = "",
+    onClick
+  } = props;
+  let hasSelection = false;
+
+  const toReturn = (
+    <React.Fragment>
+      {regions.map(function (selectionLayer, topIndex) {
+        const _onClick = onClick
+          ? function (event) {
+              onClick({
+                event,
+                annotation: selectionLayer
+              });
+            }
+          : undefined;
+        const {
+          className = "",
+          style = {},
+          start,
+          end,
+          color,
+          hideTitle,
+          customTitle,
+          hideCarets = false,
+          ignoreGaps,
+          height
+        } = selectionLayer;
+        const selectionMessage =
+          hideTitle || topLevelHideTitle
+            ? ""
+            : getSelectionMessage({
+                selectionLayer,
+                customTitle: customTitle || topLevelCustomTitle,
+                sequenceLength,
+                isProtein
+              });
+        const onSelectionContextMenu = function (event) {
+          selectionLayerRightClicked &&
+            selectionLayerRightClicked({
+              event,
+              annotation: selectionLayer
+            });
+        };
+
+        const classNameToPass = className + " " + globalClassname;
+        if (start > -1) {
+          const overlaps = getOverlapsOfPotentiallyCircularRanges(
+            selectionLayer,
+            row,
+            sequenceLength
+          );
+          //DRAW SELECTION LAYER
+          if (overlaps.length) hasSelection = true;
+          return overlaps.map(function (overlap, index) {
+            const key = topIndex + "-" + index;
+            let isTrueStart = false;
+            let isTrueEnd = false;
+            if (overlap.start === selectionLayer.start) {
+              isTrueStart = true;
+            }
+            if (overlap.end === selectionLayer.end) {
+              isTrueEnd = true;
+            }
+            const { xStart, width } = getXStartAndWidthOfRangeWrtRow({
+              range: overlap,
+              row,
+              charWidth,
+              sequenceLength,
+              ...(ignoreGaps ? {} : getGaps(overlap))
+            });
+            let caretSvgs = [];
+            if (!(hideCarets || topLevelHideCarets)) {
+              //DRAW CARETS
+              caretSvgs = [
+                overlap.start === start && (
+                  <Caret
+                    {...{
+                      leftMargin,
+                      onClick: _onClick || preventDefaultStopPropagation,
+                      onRightClick: onSelectionContextMenu,
+                      charWidth,
+                      row,
+                      style: selectionLayer.style,
+                      getGaps,
+                      isDraggable,
+                      ignoreGaps,
+                      key: key + "caret1",
+                      sequenceLength,
+                      className:
+                        classNameToPass +
+                        " selectionLayerCaret " +
+                        (isDraggable ? draggableClassnames.selectionStart : ""),
+                      caretPosition: overlap.start
+                    }}
+                  />
+                ),
+                overlap.end === end && (
+                  <Caret
+                    {...{
+                      leftMargin,
+                      onClick: _onClick || preventDefaultStopPropagation,
+                      onRightClick: onSelectionContextMenu,
+                      charWidth,
+                      isDraggable,
+                      row,
+                      getGaps,
+                      style: selectionLayer.style,
+                      ignoreGaps,
+                      key: key + "caret2",
+                      sequenceLength,
+                      className:
+                        classNameToPass +
+                        " selectionLayerCaret " +
+                        (isDraggable ? draggableClassnames.selectionEnd : ""),
+                      caretPosition: overlap.end + 1
+                    }}
+                  />
+                )
+              ];
+            }
+            return [
+              <div
+                onClick={_onClick}
+                title={selectionMessage}
+                onContextMenu={onSelectionContextMenu}
+                key={key}
+                className={
+                  classNameToPass +
+                  " veSelectionLayer veRowViewSelectionLayer notCaret " +
+                  (isTrueStart ? " isTrueStart " : "") +
+                  (isTrueEnd ? " isTrueEnd " : "")
+                }
+                style={{
+                  width,
+                  left: leftMargin + xStart,
+                  ...style,
+                  background: color || topLevelColor,
+                  height
+                }}
+              />,
+              ...caretSvgs
+            ];
+          });
+        } else {
+          return null;
+        }
+      })}
+    </React.Fragment>
+  );
+  return hasSelection ? toReturn : null;
+}
+
+export default pureNoFunc(SelectionLayer);

package/src/RowItem/SelectionLayer/style.css

@@ -0,0 +1,21 @@
+.veRowViewSelectionLayer {
+  height: 100%;
+  border: none;
+  background: #0099ff;
+  opacity: 0.3;
+  top: -2px;
+  position: absolute;
+  z-index: 10;
+}
+
+.veCaret {
+  background: black;
+  stroke: black;
+  opacity: 1;
+  cursor: ew-resize;
+  z-index: 10;
+}
+
+.veCaret.veSelectionLayer.cutsiteLabelSelectionLayer {
+  display: none !important;
+}

package/src/RowItem/Sequence.js

@@ -0,0 +1,269 @@
+import React from "react";
+import { times, map } from "lodash";
+import { view } from "@risingstack/react-easy-state";
+import { getVisibleStartEnd } from "../utils/getVisibleStartEnd";
+import { fudge2, realCharWidth } from "./constants";
+import dnaToColor, { getDnaColor } from "../constants/dnaToColor";
+import { hoveredAnnEasyStore } from "../helperComponents/withHover";
+import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
+import { partOverhangs } from "./partOverhangs";
+import { isPositionWithinRange } from "@teselagen/range-utils";
+
+const getChunk = (sequence, chunkSize, chunkNumber) =>
+  sequence.slice(chunkSize * chunkNumber, chunkSize * (chunkNumber + 1));
+
+class Sequence extends React.Component {
+  render() {
+    const {
+      isReplacementLayer,
+      sequence,
+      hideBps,
+      charWidth,
+      containerStyle = {},
+      children,
+      isReverse,
+      height,
+      className,
+      startOffset = 0,
+      chunkSize = 100,
+      scrollData,
+      showDnaColors,
+      fivePrimeThreePrimeHints,
+      alignmentData,
+      sequenceLength,
+      rowStart,
+      rowEnd
+    } = this.props;
+
+    // the fudge factor is used to position the sequence in the middle of the <text> element
+    const fudge = charWidth - realCharWidth;
+    const gapsBeforeSequence = 0;
+    const seqReadWidth = 0;
+
+    const rowSeqLen = sequence.length;
+    let overlapToBold;
+    let isDigestPart;
+    [hoveredAnnEasyStore.hoveredAnn].forEach((ann) => {
+      if (ann && !isReplacementLayer) {
+        let start = ann.start;
+        let end = ann.end - 1;
+
+        partOverhangs.forEach((h) => {
+          if (ann[h]) {
+            isDigestPart = true;
+            if (h.includes("Underhang") && isReverse) {
+              return;
+            } else if (h.includes("Overhang") && !isReverse) {
+              return;
+            }
+            const overhangBps = ann[h];
+            if (h.includes("fivePrime")) {
+              start = start + overhangBps.length;
+            } else {
+              end = end - overhangBps.length;
+            }
+          }
+        });
+
+        overlapToBold = isDigestPart
+          ? getOverlapsOfPotentiallyCircularRanges(
+              { start, end },
+              {
+                start: rowStart,
+                end: rowEnd
+              },
+              sequenceLength
+            )
+          : undefined;
+      }
+    });
+
+    const style = {
+      position: "relative",
+      height,
+      left: gapsBeforeSequence * charWidth,
+      ...containerStyle
+    };
+
+    const width = rowSeqLen * charWidth;
+
+    let inner;
+    const shared = {
+      y: height - height / 4,
+      className:
+        "ve-monospace-font " + (isReverse ? " ve-sequence-reverse" : "")
+    };
+    if (scrollData) {
+      const numChunks = Math.ceil(rowSeqLen / chunkSize);
+      const chunkWidth = chunkSize * charWidth;
+      //we're in the alignment view alignments only
+      const { visibleStart, visibleEnd } = getVisibleStartEnd({
+        scrollData,
+        width
+      });
+      inner = times(numChunks, (i) => {
+        const seqChunk = getChunk(sequence, chunkSize, i);
+        const textLength = charWidth * seqChunk.length;
+        const x = i * chunkWidth;
+        if (x > visibleEnd || x + textLength < visibleStart) return null;
+        return (
+          <text
+            key={i}
+            {...{
+              ...shared,
+              textLength: textLength - fudge - fudge2,
+              x: x + fudge / 2,
+              lengthAdjust: "spacing"
+            }}
+          >
+            {seqChunk}
+          </text>
+        );
+      });
+    } else {
+      inner = (
+        <text
+          {...{
+            ...shared,
+            x: 0 + fudge / 2,
+            textLength: (alignmentData ? seqReadWidth : width) - fudge - fudge2
+          }}
+        >
+          {getBoldRegion({ sequence, overlapToBold, rowStart, sequenceLength })}
+        </text>
+      );
+    }
+    return (
+      <div
+        style={style}
+        className={(className ? className : "") + " ve-row-item-sequence"}
+      >
+        {fivePrimeThreePrimeHints && (
+          <div
+            className={`tg-${
+              isReverse ? "left" : "right"
+            }-prime-direction tg-prime-direction`}
+          >
+            3'
+          </div>
+        )}
+        {fivePrimeThreePrimeHints && (
+          <div
+            className={`tg-${
+              isReverse ? "right" : "left"
+            }-prime-direction tg-prime-direction`}
+          >
+            5'
+          </div>
+        )}
+        {!hideBps && (
+          <svg
+            style={{
+              left: startOffset * charWidth,
+              height,
+              width,
+              position: "absolute"
+            }}
+            ref="rowViewTextContainer"
+            className="rowViewTextContainer"
+            height={Math.max(0, Number(height))}
+          >
+            {showDnaColors && (
+              <ColoredSequence
+                {...{
+                  ...this.props,
+                  fudge,
+                  totalWidth: width
+                }}
+              />
+            )}
+            {inner}
+          </svg>
+        )}
+
+        {children}
+      </div>
+    );
+  }
+}
+
+export default view(Sequence);
+
+class ColoredSequence extends React.Component {
+  shouldComponentUpdate(newProps) {
+    const { props } = this;
+    if (
+      ["charWidth", "sequence", "height", "isReverse", "width"].some(
+        (key) => props[key] !== newProps[key]
+      )
+    )
+      return true;
+    if (!!props.alignmentData !== !!newProps.alignmentData) return true;
+    return false;
+  }
+  drawRects = () => {
+    let {
+      charWidth,
+      sequence,
+      height,
+      isReverse,
+      alignmentData,
+      getGaps,
+      fudge,
+      totalWidth
+    } = this.props;
+    if (alignmentData) {
+      sequence = sequence.replace(/^-+/g, "").replace(/-+$/g, "");
+    }
+    //we use big paths instead of many individual rects to improve performance
+    const colorPaths = Object.values(dnaToColor).reduce((acc, color) => {
+      acc[color] = "";
+      return acc;
+    }, {});
+    const gapsBefore = getGaps ? getGaps({ start: 0, end: 0 }).gapsBefore : 0;
+    sequence.split("").forEach((char, i) => {
+      const width = Number(charWidth);
+      const color = getDnaColor(char, isReverse);
+      const x = (i + gapsBefore) * charWidth;
+      const y = 0;
+      colorPaths[color] =
+        (colorPaths[color] || "") +
+        `M${x},${y} L${x + width},${y} L${x + width},${y + height} L${x},${
+          y + height
+        }`;
+    });
+    const scalex = (totalWidth - fudge) / totalWidth;
+
+    return (
+      <g
+        style={{
+          transform: `scaleX(${scalex})`
+        }}
+      >
+        {map(colorPaths, (d, color) => {
+          return <path transform="tran" key={color} d={d} fill={color} />;
+        })}
+      </g>
+    );
+  };
+  render() {
+    return this.drawRects();
+  }
+}
+
+function getBoldRegion({ sequence, overlapToBold, rowStart, sequenceLength }) {
+  const toRet = [];
+  const [a, b] = overlapToBold || [];
+  for (let index = rowStart; index < sequence.length + rowStart; index++) {
+    const element = sequence[index - rowStart];
+    if (
+      (a && isPositionWithinRange(index, a, sequenceLength, true, true)) ||
+      (b && isPositionWithinRange(index, b, sequenceLength, true, true))
+    ) {
+      toRet.push(<tspan className="isBoldSeq">{element}</tspan>);
+    } else {
+      toRet.push(element);
+    }
+  }
+  return toRet;
+}