@teselagen/ove 0.0.14 → 0.0.16

package/src/RowItem/Cutsites.js

@@ -0,0 +1,271 @@
+import { isPositionWithinRange } from "@teselagen/range-utils";
+import assign from "lodash/assign";
+import React from "react";
+import areNonNegativeIntegers from "validate.io-nonnegative-integer-array";
+import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
+import getXStartAndWidthOfRangeWrtRow from "./getXStartAndWidthOfRangeWrtRow";
+import pureNoFunc from "../utils/pureNoFunc";
+import { connectToEditor } from "../withEditorProps";
+
+let snipStyle = {
+  height: "100%",
+  // background: 'black',
+  position: "absolute",
+  width: "2px"
+};
+let snipConnectorStyle = {
+  height: "2px",
+  // background: 'black',
+  position: "absolute",
+  top: -1
+};
+
+// var cursor = getCursorForRow(caretPosition, row, bpsPerRow, snipStyle, charWidth, true);
+
+function getSnipForRow(
+  isTopStrand,
+  isHovered,
+  snipPosition,
+  row,
+  sequenceLength,
+  bpsPerRow,
+  snipStyle,
+  charWidth,
+  index
+) {
+  if (!isPositionWithinRange(snipPosition, row)) return;
+
+  const { xStart } = getXStartAndWidthOfRangeWrtRow({
+    range: { start: snipPosition, end: snipPosition },
+    row,
+    charWidth,
+    sequenceLength
+  });
+
+  const newCursorStyle = assign({}, snipStyle, {
+    left: xStart
+  });
+  const cursorEl = (
+    <div
+      key={index}
+      className={`veRowViewCutsite snip ${
+        isTopStrand ? "topStrandSnip" : "bottomStrandSnip"
+      } ${isHovered ? "snipHovered" : ""} snipPosition-${snipPosition}`}
+      style={newCursorStyle}
+    />
+  );
+  return cursorEl;
+}
+
+function getSnipConnector(
+  isHovered,
+  snipRange,
+  row,
+  sequenceLength,
+  bpsPerRow,
+  snipConnectorStyle,
+  charWidth,
+  index
+) {
+  //tnr: we basically need to first determine what the range start and end are..
+  // var _snipRange = {
+  //     ...snipRange,
+  //     end: norm(snipRange.end-1,sequenceLength)
+  // }
+  //then mask the range by the row
+
+  const overlaps = getOverlapsOfPotentiallyCircularRanges(
+    snipRange,
+    { ...row, end: row.end + 1 },
+    sequenceLength
+  );
+  return overlaps.map(function (overlap, index2) {
+    let { xStart, width } = getXStartAndWidthOfRangeWrtRow({
+      range: overlap,
+      row,
+      charWidth,
+      sequenceLength
+    });
+    width -= charWidth;
+    //the second logical operator catches the special case where we're at the very end of the sequence..
+    const newCursorStyle = assign({}, snipConnectorStyle, {
+      left: xStart,
+      width
+    });
+    const cursorEl = (
+      <div
+        key={index + index2}
+        className={`veRowViewCutsite snipConnector ${
+          isHovered ? "snipHovered" : ""
+        } `}
+        style={newCursorStyle}
+      />
+    );
+    return cursorEl;
+  });
+}
+
+function Cutsites(props) {
+  const {
+    annotationRanges,
+    charWidth,
+    bpsPerRow,
+    row,
+    sequenceLength,
+    topStrand,
+    hoveredAnnotation
+  } = props;
+  const snips = [];
+  const snipConnectors = [];
+  Object.keys(annotationRanges)
+    .sort((a) =>
+      annotationRanges[a].annotation.id === hoveredAnnotation ? 1 : -1
+    )
+    .forEach(function (key) {
+      const annotationRange = annotationRanges[key];
+      let { annotation } = annotationRange;
+      if (!annotation) {
+        annotation = annotationRange;
+      }
+      let {
+        topSnipPosition,
+        bottomSnipPosition,
+        upstreamBottomSnip,
+        upstreamTopSnip,
+        upstreamTopBeforeBottom,
+        topSnipBeforeBottom
+      } = annotation;
+      topSnipPosition = topSnipPosition && Number(topSnipPosition);
+      bottomSnipPosition = bottomSnipPosition && Number(bottomSnipPosition);
+      upstreamTopSnip = upstreamTopSnip && Number(upstreamTopSnip);
+      upstreamBottomSnip = upstreamBottomSnip && Number(upstreamBottomSnip);
+      const isHovered = annotation.id === hoveredAnnotation;
+      snipStyle = {
+        ...snipStyle,
+        background: annotation.restrictionEnzyme.color
+      };
+      snipConnectorStyle = {
+        ...snipConnectorStyle,
+        background: annotation.restrictionEnzyme.color
+      };
+
+      let newSnip;
+      let newConnector;
+      const snipRange = {};
+
+      if (areNonNegativeIntegers([bottomSnipPosition, topSnipPosition])) {
+        if (topStrand) {
+          newSnip = getSnipForRow(
+            true,
+            isHovered,
+            topSnipPosition,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "downstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+        } else {
+          newSnip = getSnipForRow(
+            false,
+            isHovered,
+            bottomSnipPosition,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "downstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+          if (topSnipBeforeBottom) {
+            snipRange.start = topSnipPosition;
+            snipRange.end = bottomSnipPosition;
+          } else {
+            snipRange.start = bottomSnipPosition;
+            snipRange.end = topSnipPosition;
+          }
+          newConnector = getSnipConnector(
+            isHovered,
+            snipRange,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipConnectorStyle,
+            charWidth,
+            key + "downstreamConnector"
+          );
+          snipConnectors.push(newConnector);
+        }
+      }
+      if (areNonNegativeIntegers([upstreamBottomSnip, upstreamTopSnip])) {
+        if (topStrand) {
+          newSnip = getSnipForRow(
+            true,
+            isHovered,
+            upstreamTopSnip,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "upstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+        } else {
+          newSnip = getSnipForRow(
+            false,
+            isHovered,
+            upstreamBottomSnip,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "upstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+          if (upstreamTopBeforeBottom) {
+            snipRange.start = upstreamTopSnip;
+            snipRange.end = upstreamBottomSnip;
+          } else {
+            snipRange.start = upstreamBottomSnip;
+            snipRange.end = upstreamTopSnip;
+          }
+          newConnector = getSnipConnector(
+            isHovered,
+            snipRange,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipConnectorStyle,
+            charWidth,
+            key + "upstreamConnector"
+          );
+          snipConnectors.push(newConnector);
+        }
+      }
+    });
+  return (
+    <div>
+      {snips}
+      {snipConnectors}
+    </div>
+  );
+}
+
+export default pureNoFunc(
+  connectToEditor(({ hoveredAnnotation }) => ({
+    hoveredAnnotation
+  }))(Cutsites)
+);

package/src/RowItem/DeletionLayers/index.js

@@ -0,0 +1,113 @@
+import AnnotationPositioner from "../AnnotationPositioner";
+import AnnotationContainerHolder from "../AnnotationContainerHolder";
+import React from "react";
+import pureNoFunc from "../../utils/pureNoFunc";
+
+import "./style.css";
+
+import getXStartAndWidthOfRangeWrtRow from "../getXStartAndWidthOfRangeWrtRow";
+import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
+
+function DeletionLayers(props) {
+  const {
+    charWidth,
+    row,
+    sequenceLength,
+    deletionLayerClicked,
+    deletionLayerRightClicked,
+    deletionLayers = {},
+    deletionLineHeight = 6
+  } = props;
+
+  const deletionLayersToUse = Object.keys(deletionLayers).map(function (key) {
+    return deletionLayers[key];
+  });
+  if (!deletionLayersToUse.length) return null;
+  return (
+    <AnnotationContainerHolder
+      className="veRowViewDeletionLayers"
+      containerHeight={deletionLineHeight}
+    >
+      {deletionLayersToUse
+        .sort(function (deletionLayer) {
+          return deletionLayer.inBetweenBps ? 1 : 0;
+        })
+        .map(function (deletionLayer, index) {
+          const rangeSpansSequence =
+            deletionLayer.start === deletionLayer.end + 1 ||
+            (deletionLayer.start === 0 &&
+              deletionLayer.end === sequenceLength - 1);
+          const { /* className = "", style = {},  */ color } = deletionLayer;
+          const overlaps = getOverlapsOfPotentiallyCircularRanges(
+            deletionLayer,
+            row,
+            sequenceLength
+          );
+          return overlaps.map(function (overlap) {
+            const { xStart, width } = getXStartAndWidthOfRangeWrtRow({
+              range: overlap,
+              row,
+              charWidth,
+              sequenceLength
+            });
+            const deletionStart = overlap.start === deletionLayer.start;
+            const deletionEnd = overlap.end === deletionLayer.end;
+
+            return [
+              <AnnotationPositioner
+                height={deletionLineHeight}
+                width={width}
+                key={index}
+                top={0}
+                // className={classnames() }
+                left={
+                  xStart + (deletionLayer.inBetweenBps ? charWidth / 1.2 : 0)
+                }
+              >
+                <g
+                  className="clickable"
+                  onClick={function (event) {
+                    deletionLayerClicked({ annotation: deletionLayer, event });
+                  }}
+                  onContextMenu={function (event) {
+                    deletionLayerRightClicked({
+                      annotation: deletionLayer,
+                      event
+                    });
+                  }}
+                >
+                  <rect
+                    fill={color}
+                    x="0"
+                    y="0"
+                    height={deletionLineHeight}
+                    width={width}
+                  />
+                  {rangeSpansSequence && deletionStart && (
+                    <rect
+                      fill="blue"
+                      x="0"
+                      y="0"
+                      height={deletionLineHeight}
+                      width={4}
+                    />
+                  )}
+                  {rangeSpansSequence && deletionEnd && (
+                    <rect
+                      fill="blue"
+                      x={width - 4}
+                      y="0"
+                      height={deletionLineHeight}
+                      width={4}
+                    />
+                  )}
+                </g>
+              </AnnotationPositioner>
+            ];
+          });
+        })}
+    </AnnotationContainerHolder>
+  );
+}
+
+export default pureNoFunc(DeletionLayers);

package/src/RowItem/DeletionLayers/style.css

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

package/src/RowItem/Labels.js

@@ -0,0 +1,327 @@
+import React from "react";
+import { onlyUpdateForKeys } from "recompose";
+import withHover from "../helperComponents/withHover";
+import getXStartAndWidthOfRowAnnotation from "./getXStartAndWidthOfRowAnnotation";
+import IntervalTree from "node-interval-tree";
+import getYOffset from "../CircularView/getYOffset";
+import { reduce, values, startCase, filter, clamp } from "lodash";
+import { getRangeLength } from "@teselagen/range-utils";
+import { doesLabelFitInAnnotation } from "./utils";
+import getAnnotationNameAndStartStopString from "../utils/getAnnotationNameAndStartStopString";
+
+const BUFFER_WIDTH = 6; //labels shouldn't be less than 6px from eachother on the same line
+
+function Labels(props) {
+  let {
+    annotationRanges = {},
+    bpsPerRow,
+    charWidth,
+    rangeMax,
+    onlyShowLabelsThatDoNotFit,
+    annotationHeight,
+    textWidth = 6,
+    editorName,
+    labelLineIntensity,
+    isProtein,
+    noRedux,
+    readOnly,
+    noLabelLine
+  } = props;
+
+  if (annotationRanges.length === 0) {
+    return null;
+  }
+  const warningMessage = null;
+  // if (Object.keys(annotationRanges).length > 50) {
+  //   warningMessage = (
+  //     <span style={{ color: "red" }}>
+  //       <br />
+  //       Warning: Only the first 50 cutsites will be displayed. Filter the
+  //       cutsites you wish to see using the filter tool <br />
+  //     </span>
+  //   );
+  // }
+
+  const rowLength = bpsPerRow * charWidth;
+  // let counter = 0;
+  let maxAnnotationYOffset = 0;
+  const annotationsSVG = [];
+  const rowCenter = rowLength / 2;
+  const iTree = new IntervalTree(rowCenter);
+
+  annotationRanges = values(
+    reduce(
+      annotationRanges,
+      (accum, annotationRange) => {
+        const identifier =
+          annotationRange.annotation.annotationTypePlural +
+          "--" +
+          annotationRange.id;
+        if (
+          // annotationRange.annotation.annotationTypePlural === "parts" ||
+          !accum[identifier] ||
+          getRangeLength(accum[identifier], rangeMax) <
+            getRangeLength(annotationRange, rangeMax)
+        ) {
+          accum[identifier] = annotationRange;
+          return accum;
+        } else {
+          return accum;
+        }
+      },
+      {}
+    )
+  );
+
+  filter(annotationRanges, (r) => {
+    if (onlyShowLabelsThatDoNotFit) {
+      //tnrtodo: more work needs to be done here to make this actually configurable
+      //check if annotation name will fit
+      if (
+        r.annotation.annotationTypePlural === "cutsites" ||
+        (r.annotation.annotationTypePlural === "primers" && r.annotation.bases)
+      ) {
+        //we don't want to filter out any cutsite labels
+        return true;
+      }
+      return !doesLabelFitInAnnotation(
+        r.annotation.name,
+        { range: r },
+        charWidth
+      );
+    }
+    return true;
+  }).forEach(function (annotationRange, index) {
+    const pluralType = annotationRange.annotation.annotationTypePlural;
+    let annotation = annotationRange.annotation;
+    if (!annotation) {
+      annotation = annotationRange;
+    }
+    const annotationLength =
+      (
+        annotation.name ||
+        (annotation.restrictionEnzyme && annotation.restrictionEnzyme.name) ||
+        ""
+      ).length * textWidth;
+    let { xStart, width } = getXStartAndWidthOfRowAnnotation(
+      annotationRange,
+      bpsPerRow,
+      charWidth
+    );
+
+    xStart =
+      annotation.annotationTypePlural === "cutsites"
+        ? xStart
+        : xStart + width / 2;
+
+    const xStartOriginal = xStart;
+    let xEnd = xStart + annotationLength;
+
+    if (xEnd > rowLength) {
+      xStart = xStart - (xEnd - rowLength);
+      xEnd = rowLength;
+    }
+    xEnd += BUFFER_WIDTH;
+    const yOffset = getYOffset(iTree, xStart, xEnd);
+    iTree.insert(xStart, xEnd, {
+      ...annotationRange,
+      yOffset
+    });
+
+    if (yOffset > maxAnnotationYOffset) {
+      maxAnnotationYOffset = yOffset;
+    }
+    const height = yOffset * annotationHeight;
+    annotationsSVG.push(
+      <DrawLabel
+        id={annotation.id}
+        key={"cutsiteLabel" + index}
+        {...{
+          readOnly,
+          editorName,
+          annotation,
+          noLabelLine,
+          className: `${annotationRange.annotation.labelClassName || ""} ${
+            labelClassNames[pluralType]
+          } veLabel `,
+          isProtein,
+          xStartOriginal,
+          onClick: annotationRange.onClick,
+          onDoubleClick: annotationRange.onDoubleClick,
+          onRightClick: annotationRange.onRightClick,
+          height,
+          xStart,
+          xEnd,
+          textWidth,
+          labelLineIntensity,
+          noRedux
+        }}
+      />
+    );
+  });
+  if (!annotationsSVG.length) return null;
+  const containerHeight = (maxAnnotationYOffset + 1) * annotationHeight;
+  return (
+    <div
+      width="100%"
+      style={{
+        position: "relative",
+        height: containerHeight,
+        display: "block"
+      }}
+      className="veRowViewLabelsContainer"
+    >
+      {annotationsSVG}
+      {warningMessage}
+    </div>
+  );
+}
+
+export default onlyUpdateForKeys([
+  "annotationRanges",
+  "bpsPerRow",
+  "charWidth",
+  "annotationHeight",
+  "spaceBetweenAnnotations",
+  "onClick",
+  "onRightClick",
+  "onDoubleClick",
+  "textWidth",
+  "editorName"
+])(Labels);
+
+const DrawLabel = withHover(
+  class DrawLabelInner extends React.Component {
+    render() {
+      const {
+        hovered,
+        className,
+        annotation,
+        onClick,
+        noLabelLine,
+        onDoubleClick,
+        onRightClick,
+        height,
+        xStartOriginal,
+        xStart,
+        onMouseLeave,
+        isProtein,
+        onMouseOver,
+        editorName,
+        labelLineIntensity,
+        textWidth,
+        readOnly
+      } = this.props;
+      let heightToUse = height;
+      let bottom = 0;
+      if (hovered) {
+        try {
+          const line = this.n;
+          const isRowView = document
+            .querySelector(`.veEditor.${editorName} .veRowView`)
+            .contains(line);
+
+          const el = line
+            .closest(".veRowItem")
+
+            .querySelector(
+              annotation.annotationTypePlural === "cutsites"
+                ? isRowView
+                  ? ".cutsiteLabelSelectionLayer"
+                  : ".veRowViewAxis"
+                : `[data-id="${annotation.id}"].veRowView${startCase(
+                    annotation.annotationTypePlural.slice(0, -1)
+                  )}`
+            );
+          const annDims = el.getBoundingClientRect();
+          const lineDims = line.getBoundingClientRect();
+          const heightDiff =
+            annDims.bottom - lineDims.bottom - annDims.height / 2;
+          heightToUse = height + heightDiff;
+          bottom = -heightDiff;
+        } catch (e) {
+          window.veDebugLabels && console.error(`err computing label line:`, e);
+        }
+      }
+
+      const truncateLabelIfNeeded = (annotationText, xLeftCoord) => {
+        const numberOfCharsToChop =
+          xLeftCoord < 0 ? Math.ceil(Math.abs(xLeftCoord) / textWidth) + 2 : 0;
+        return numberOfCharsToChop > 0
+          ? annotationText.slice(0, -numberOfCharsToChop) + ".."
+          : annotationText;
+      };
+      const titleText = getAnnotationNameAndStartStopString(annotation, {
+        isProtein,
+        readOnly
+      });
+      const labelText = annotation.name || annotation.restrictionEnzyme.name;
+      return (
+        <div>
+          <div
+            {...{ onMouseLeave, onMouseOver }}
+            className={className + " veLabelText ve-monospace-font"}
+            onClick={function (event) {
+              onClick && onClick({ event, annotation });
+              event.stopPropagation();
+            }}
+            onDoubleClick={function (event) {
+              if (onDoubleClick) {
+                onDoubleClick({ event, annotation });
+                event.stopPropagation();
+              }
+            }}
+            onContextMenu={function (event) {
+              onRightClick({ event, annotation });
+              event.stopPropagation();
+            }}
+            title={titleText}
+            style={{
+              cursor: "pointer",
+              position: "absolute",
+              bottom: height,
+              ...(hovered && { textDecoration: "underline" }),
+              ...(annotation.annotationTypePlural !== "cutsites" && {
+                fontStyle: "normal"
+              }),
+              left: clamp(xStart, 0, Number.MAX_VALUE),
+              whiteSpace: "nowrap",
+              color:
+                annotation.annotationTypePlural === "parts"
+                  ? "#ac68cc"
+                  : annotation.labelColor,
+              zIndex: 10
+            }}
+          >
+            {truncateLabelIfNeeded(labelText, xStart)}
+          </div>
+
+          {!noLabelLine && (
+            <div
+              ref={(n) => {
+                if (n) this.n = n;
+              }}
+              className="veLabelLine"
+              style={{
+                zIndex: 50,
+                position: "absolute",
+                left: xStartOriginal,
+                bottom,
+                height: Math.max(heightToUse, 3),
+                width: hovered ? 2 : 1,
+                opacity: hovered ? 1 : labelLineIntensity
+                // background: "black"
+              }}
+            />
+          )}
+        </div>
+      );
+    }
+  }
+);
+
+const labelClassNames = {
+  cutsites: "veCutsiteLabel",
+  parts: "vePartLabel",
+  features: "veFeatureLabel"
+};