@teselagen/ove 0.0.14 → 0.0.15

package/src/RowItem/Axis.js

@@ -0,0 +1,149 @@
+import { normalizePositionByRangeLength } from "@teselagen/range-utils";
+import getXStartAndWidthOfRangeWrtRow from "./getXStartAndWidthOfRangeWrtRow";
+import React, { useMemo } from "react";
+import calculateTickMarkPositionsForGivenRange from "../utils/calculateTickMarkPositionsForGivenRange";
+import { divideBy3 } from "../utils/proteinUtils";
+import { view } from "@risingstack/react-easy-state";
+import { getVisibleStartEnd } from "../utils/getVisibleStartEnd";
+
+const Axis = function (props) {
+  const {
+    row,
+    tickSpacing,
+    bpsPerRow,
+    charWidth,
+    annotationHeight,
+    marginTop,
+    sequenceLength,
+    showAxisNumbers = true,
+    getGaps,
+    scrollData,
+    isProtein,
+    style,
+    isLinearView
+  } = props;
+  const noRows = row.start === 0 && row.end === 0;
+  /* eslint-disable react-hooks/exhaustive-deps */
+  //memoize this function because it does the heavy lifting
+  const tickMarkPositions = useMemo(() => {
+    if (noRows) return [];
+    return calculateTickMarkPositionsForGivenRange({
+      tickSpacing,
+      range: row,
+      sequenceLength,
+      isProtein
+    }).map((tickMarkPosition) => {
+      const gaps = getGaps ? getGaps(tickMarkPosition).gapsBefore : 0;
+      const xCenter =
+        (tickMarkPosition - (isProtein ? 1 : 0) + gaps) * charWidth +
+        charWidth / 2;
+      return {
+        tickMarkPosition,
+        xCenter
+      };
+    });
+  }, [
+    noRows,
+    tickSpacing,
+    row.start,
+    row.end,
+    sequenceLength,
+    isProtein,
+    charWidth
+  ]);
+  /* eslint-enable react-hooks/exhaustive-deps*/
+  if (noRows) {
+    return null;
+  }
+  const { xStart, width } = getXStartAndWidthOfRangeWrtRow({
+    row,
+    range: row,
+    charWidth,
+    sequenceLength,
+    ...(getGaps ? getGaps(row) : {})
+  });
+  //this function should take in a desired tickSpacing (eg 10 bps between tick mark)
+  //and output an array of tickMarkPositions for the given row (eg, [0, 10, 20])
+  const xEnd = xStart + width;
+  let visibleStart, visibleEnd;
+  if (scrollData) {
+    const val = getVisibleStartEnd({
+      scrollData,
+      width: sequenceLength * charWidth
+    });
+    //add a small buffer to either side of the visible start/end
+    visibleStart = val.visibleStart - 400;
+    visibleEnd = val.visibleEnd + 400;
+  }
+
+  const yStart = 0;
+  // const yEnd = annotationHeight / 3;
+
+  const tickMarkSVG = [];
+
+  tickMarkPositions.forEach(function ({ tickMarkPosition, xCenter }, i) {
+    // const xCenterPlusXStart = xCenter + xStart;
+
+    if (scrollData && !(xCenter < visibleEnd && xCenter > visibleStart)) return;
+    tickMarkSVG.push(
+      <rect
+        className="veAxisTick"
+        key={"axisTickMarkPath " + i + " " + tickMarkPosition}
+        x={xCenter}
+        width={1}
+        height={5}
+      />
+    );
+    if (showAxisNumbers) {
+      const position =
+        normalizePositionByRangeLength(
+          row.start + tickMarkPosition,
+          sequenceLength
+        ) + (isProtein ? 0 : 1);
+
+      const positionLength = position.toString().length * 4;
+      const textInner = divideBy3(position + (isProtein ? 1 : 0), isProtein);
+
+      let x = xCenter;
+      if (!isLinearView) {
+        x =
+          i === 0 //if first label in row, or last label in row, we add checks to make sure the axis number labels don't go outside of the width of the row
+            ? Math.max(positionLength, xCenter)
+            : i === tickMarkPositions.length - 1
+            ? Math.min(bpsPerRow * charWidth - positionLength, xCenter)
+            : xCenter;
+      }
+      tickMarkSVG.push(
+        <text
+          data-tick-mark={textInner}
+          key={"axisTickMarkText " + i + " " + tickMarkPosition}
+          fill="black"
+          x={x}
+          y={annotationHeight}
+          style={{ textAnchor: "middle", fontSize: 10, fontFamily: "Verdana" }}
+        >
+          {textInner}
+        </text>
+      );
+    }
+  });
+
+  return (
+    <svg
+      className="veRowViewAxis veAxis"
+      height={annotationHeight}
+      style={{ marginTop, overflow: "visible", display: "block", ...style }}
+    >
+      {tickMarkSVG}
+      <path
+        className="veAxisLine"
+        d={"M" + xStart + "," + yStart + " L" + xEnd + "," + yStart}
+        stroke="black"
+      />
+    </svg>
+  );
+};
+
+// export default Axis
+export default view(Axis);
+// export default pureNoFunc(Axis);

package/src/RowItem/Caret/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import classnames from "classnames";
+// import pure from "../../utils/pureNoFunc";
+import "./style.css";
+import { getSelectionMessage } from "../../utils/editorUtils";
+// import draggableClassnames from "../../constants/draggableClassnames";
+
+function Caret(props) {
+  const {
+    charWidth,
+    row,
+    sequenceLength,
+    caretPosition,
+    isProtein,
+    onClick,
+    isDraggable,
+    leftMargin = 0,
+    onRightClick,
+    style,
+    selectionMessage,
+    className = ""
+  } = props;
+
+  if (
+    (row.start <= caretPosition && row.end + 1 >= caretPosition) ||
+    (row.end === sequenceLength - 1 && row.end < caretPosition)
+  ) {
+    //the second logical operator catches the special case where we're at the very end of the sequence..
+    const cursorEl = (
+      <div
+        onClick={onClick}
+        onContextMenu={
+          onRightClick
+            ? (e) => {
+                onRightClick(e);
+              }
+            : undefined
+        }
+        title={
+          selectionMessage ||
+          getSelectionMessage({ caretPosition, isProtein, sequenceLength })
+        }
+        className={classnames(
+          {
+            notClickable: !isDraggable
+          },
+          "veCaret",
+          "veRowViewCaret",
+          className
+        )}
+        style={{
+          left: leftMargin + (caretPosition - row.start) * charWidth - 2,
+          ...style
+        }}
+      />
+    );
+    return cursorEl;
+  } else {
+    return null;
+  }
+}
+
+export default Caret;
+// export default pure(Caret);

package/src/RowItem/Caret/style.css

@@ -0,0 +1,8 @@
+.veRowViewCaret {
+  height: 100%;
+  /* background: black; */
+  position: absolute;
+  top: -2px;
+  width: 2px;
+  /* cursor: ew-resize; */
+}

package/src/RowItem/Chromatograms/Chromatogram.js

@@ -0,0 +1,289 @@
+import { showContextMenu } from "@teselagen/ui";
+import React, { useEffect, useRef, useState } from "react";
+import { Button } from "@blueprintjs/core";
+import {
+  chromatogramMenu,
+  useShowChromQualScores
+} from "../../utils/useChromatogramPrefs";
+import classNames from "classnames";
+
+export default function Chromatogram(props) {
+  const { isRowView, chromatogramData, row, getGaps, charWidth } = props;
+  const [showChromQualScores] = useShowChromQualScores();
+  let [scalePct, setScalePct] = useState(0.05);
+  const [hasDrawnOnce, setHasDrawnOnce] = useState(false);
+  if (props.scalePct) scalePct = props.scalePct;
+  if (props.setScalePct) setScalePct = props.setScalePct;
+  const canvasRef = useRef();
+  const gapsBeforeRow = getGaps(row.start).gapsBefore;
+  useEffect(() => {
+    if (
+      !chromatogramData ||
+      !chromatogramData.baseTraces ||
+      !canvasRef.current
+    ) {
+      return true;
+    }
+    const painter = new drawTrace({
+      isRowView,
+      showChromQualScores,
+      peakCanvas: canvasRef.current,
+      traceData: chromatogramData,
+      charWidth: charWidth,
+      startBp: row.start,
+      endBp: row.end,
+      getGaps,
+      gapsBeforeRow,
+      scalePct: scalePct
+    });
+    painter.paintCanvas();
+    setHasDrawnOnce(true);
+  }, [
+    setHasDrawnOnce,
+    showChromQualScores,
+    chromatogramData,
+    charWidth,
+    row.start,
+    row.end,
+    gapsBeforeRow,
+    isRowView,
+    scalePct,
+    getGaps,
+    canvasRef
+  ]);
+  const marginLeft = gapsBeforeRow * charWidth;
+
+  return (
+    <div
+      className={classNames("chromatogram", {
+        noQualityScores: !showChromQualScores
+      })}
+      style={{
+        position: "relative"
+      }}
+      onContextMenu={(e) => {
+        showContextMenu([chromatogramMenu], undefined, e);
+      }}
+    >
+      <Button
+        minimal
+        data-tip="Scale Chromatogram Up"
+        className="scaleChromatogramButtonUp"
+        icon="caret-up"
+        onClick={(e) => {
+          e.stopPropagation();
+          setScalePct(scalePct + 0.01);
+        }}
+        style={{
+          zIndex: 10,
+          position: "sticky",
+          left: 145
+        }}
+      />
+      <Button
+        minimal
+        data-tip="Scale Chromatogram Down"
+        className="scaleChromatogramButtonDown"
+        icon="caret-down"
+        onClick={(e) => {
+          e.stopPropagation();
+          setScalePct(scalePct - 0.01);
+        }}
+        style={{
+          zIndex: 10,
+          position: "sticky",
+          left: 175
+        }}
+      />
+      <br />
+
+      <div
+        className={classNames({
+          "chromatogram-trace": true,
+          "chromatogram-trace-initialized": hasDrawnOnce
+        })}
+        style={{
+          zIndex: 1,
+          position: "relative",
+          left: 0,
+          // left: posOfSeqRead,
+          display: "inline-block"
+        }}
+        // tnr comment back in for start of tooltip work
+        // onMouseEnter={() => {
+        //   this.setState({ showTooltip: true });
+        // }}
+        // onMouseLeave={() => {
+        //   this.setState({ showTooltip: false });
+        // }}
+        // onMouseMove={(e) => {
+        //   const { row } = this.props;
+        //   const boundingRowRect =
+        //     this.chromatogramRef.getBoundingClientRect();
+        //   let nearestCaretPos;
+        //   if (
+        //     getClientY(e) > boundingRowRect.top &&
+        //     getClientY(e) < boundingRowRect.top + boundingRowRect.height
+        //   ) {
+        //     if (getClientX(e) - boundingRowRect.left < 0) {
+        //       nearestCaretPos = row.start;
+        //     } else {
+        //       const clickXPositionRelativeToRowContainer =
+        //         getClientX(e) - boundingRowRect.left;
+        //       const numberOfBPsInFromRowStart = Math.floor(
+        //         (clickXPositionRelativeToRowContainer + charWidth / 2) /
+        //           charWidth
+        //       );
+        //       nearestCaretPos = numberOfBPsInFromRowStart + row.start;
+        //       if (nearestCaretPos > row.end + 1) {
+        //         nearestCaretPos = row.end + 1;
+        //       }
+        //     }
+        //     this.setState({
+        //       nearestCaretPos
+        //     });
+        //     if (this.tooltipRef) {
+        //       this.tooltipRef.style.left =
+        //         getClientX(e) - boundingRowRect.left + "px";
+        //       this.tooltipRef.style.top =
+        //         getClientY(e) - boundingRowRect.top + "px";
+        //     }
+        //     if (this.tooltipHolderRef) {
+        //       this.tooltipHolderRef.reposition();
+        //     }
+        //   }
+        // }}
+        // ref={(n) => {
+        //   if (n) this.chromatogramRef = n;
+        // }}
+      >
+        {/* tnr comment back in for start of tooltip work {this.state.showTooltip && (
+          <div
+            style={{
+              position: "absolute",
+              height: 1,
+              width: 1,
+              background: "white",
+              top: this.state.tooltipTop,
+              left: this.state.tooltipLeft
+            }}
+            ref={(n) => {
+              if (n) this.tooltipRef = n;
+            }}
+            className="tg-chromatogram-tooltip"
+          >
+            <Tooltip
+              hoverOpenDelay={300}
+              ref={(n) => {
+                if (n) this.tooltipHolderRef = n;
+              }}
+              isOpen={true}
+              content={<div>{this.state.nearestCaretPos + 1}</div>}
+            >
+              <div></div>
+            </Tooltip>
+          </div>
+        )} */}
+
+        <canvas style={{ marginLeft }} ref={canvasRef} height="100" />
+      </div>
+    </div>
+  );
+}
+
+function drawTrace({
+  traceData,
+  charWidth,
+  startBp,
+  peakCanvas,
+  endBp,
+  getGaps,
+  gapsBeforeRow,
+  showChromQualScores,
+  // isRowView,
+  scalePct
+}) {
+  const colors = {
+    adenine: "green",
+    thymine: "red",
+    guanine: "black",
+    cytosine: "blue",
+    other: "#ac68cc"
+  };
+  const ctx = peakCanvas.getContext("2d");
+
+  const bottomBuffer = 0;
+  const maxHeight = peakCanvas.height;
+
+  const seqLengthWithGaps =
+    endBp - startBp + 1 + getGaps(endBp).gapsBefore - gapsBeforeRow;
+  const maxWidth = seqLengthWithGaps * charWidth;
+
+  peakCanvas.width = maxWidth;
+
+  const scaledHeight = maxHeight - bottomBuffer;
+
+  this.drawPeaks = function (traceType, lineColor) {
+    ctx.beginPath();
+    //loop through base positions [ 43, 53, 70, 77, ...]
+    // looping through the entire sequence length
+    for (let baseIndex = startBp; baseIndex <= endBp; baseIndex++) {
+      // each base's beginning and end of its peak
+      // grab the start and end (43, 53) , (53, 70) ...
+      // looping through each base's peak
+      const traceForIndex = traceData.baseTraces[baseIndex][traceType];
+      const gapsBefore = getGaps(baseIndex - 1).gapsBefore || 0;
+      const gapsAt = getGaps(baseIndex).gapsBefore;
+      const startXPosition =
+        (baseIndex + gapsAt - startBp - gapsBeforeRow) * charWidth;
+      const hasGaps = gapsBefore !== gapsAt;
+      const traceLength = traceForIndex.length;
+      const tracePointSpacing = charWidth / traceLength;
+      // eslint-disable-next-line no-loop-func
+      traceForIndex.forEach((_tracePoint, tracePointIndex) => {
+        const tracePoint = scaledHeight - scalePct * _tracePoint;
+        if (hasGaps && tracePointIndex === 0) {
+          ctx.moveTo(startXPosition, tracePoint);
+        }
+        ctx.lineTo(
+          startXPosition + tracePointSpacing * tracePointIndex,
+          tracePoint
+        );
+      });
+    }
+    ctx.strokeStyle = lineColor;
+    ctx.stroke();
+  };
+
+  this.drawQualityScoreHistogram = function () {
+    if (!traceData.qualNums || !showChromQualScores) return;
+    const qualMax = Math.max(...traceData.qualNums);
+    const scalePctQual = scaledHeight / qualMax;
+
+    for (let baseIndex = startBp; baseIndex <= endBp; baseIndex++) {
+      const gapsAt = getGaps(baseIndex).gapsBefore;
+      const startXPosition =
+        (baseIndex + gapsAt - startBp - gapsBeforeRow) * charWidth;
+
+      ctx.rect(
+        startXPosition,
+        scaledHeight - traceData.qualNums[baseIndex] * scalePctQual,
+        charWidth,
+        traceData.qualNums[baseIndex] * scalePctQual
+      );
+    }
+    ctx.fillStyle = "#cfc3c3";
+    ctx.fill();
+    ctx.strokeStyle = "#e9e3f4";
+    ctx.stroke();
+  };
+
+  this.paintCanvas = function () {
+    this.drawQualityScoreHistogram();
+    this.drawPeaks("aTrace", colors.adenine);
+    this.drawPeaks("tTrace", colors.thymine);
+    this.drawPeaks("gTrace", colors.guanine);
+    this.drawPeaks("cTrace", colors.cytosine);
+    ctx.closePath();
+  };
+}

package/src/RowItem/CutsiteSelectionLayers.js

@@ -0,0 +1,47 @@
+import React from "react";
+import SelectionLayer from "./SelectionLayer";
+import { connectToEditor } from "../withEditorProps";
+import classNames from "classnames";
+
+export const CutsiteSelectionLayers = connectToEditor(
+  ({ hoveredAnnotation }) => ({
+    hoveredAnnotation
+  })
+)(function CutsiteSelectionLayersInner({
+  hoveredAnnotation,
+  cutsites,
+  annotationCommonProps,
+  showReverseSequence,
+  sequenceHeight,
+  alignmentData,
+  row
+}) {
+  return Object.keys(cutsites)
+    .sort((a) => (cutsites[a].id === hoveredAnnotation ? 1 : -1))
+    .map(function (id, index) {
+      const cutsite = cutsites[id];
+      const isHovered = hoveredAnnotation === cutsite.id;
+      const layer = cutsite.annotation.recognitionSiteRange;
+      return (
+        layer.start > -1 && (
+          <SelectionLayer
+            hideTitle
+            {...annotationCommonProps}
+            {...{
+              id: cutsite.id,
+              key: "restrictionSiteRange" + index,
+              height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
+              regions: [layer],
+              row: alignmentData
+                ? { start: 0, end: alignmentData.sequence.length - 1 }
+                : row,
+              className: classNames("cutsiteLabelSelectionLayer", {
+                cutsiteLabelSelectionLayerHovered: isHovered
+              }),
+              hideCarets: true
+            }}
+          />
+        )
+      );
+    });
+});