@teselagen/ove 0.0.13 → 0.0.15

package/src/AutoAnnotateBpMatchingDialog.js

@@ -0,0 +1,208 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import { Tab, Tabs } from "@blueprintjs/core";
+import { wrapDialog } from "@teselagen/ui";
+
+const highlightStyle = {
+  background: "red",
+  marginTop: 2
+};
+export const AutoAnnotateBpMatchingDialog = wrapDialog({
+  title: "Annotation Matching"
+})(function ({ isRegex }) {
+  return (
+    <div className="bp3-dialog-body">
+      <Tabs defaultSelectedTabId={isRegex ? "regex" : "iupac"}>
+        <Tab
+          id="iupac"
+          title="IUPAC"
+          panel={
+            <div>
+              <p>
+                When in standard (IUPAC) mode, annotations are matched
+                case-insensitively. You can use any degenerate IUPAC base pair
+                as well as a couple special characters.
+              </p>
+              <h4>Special Characters:</h4>
+              <div
+                style={{
+                  display: "grid",
+                  columnGap: 20,
+                  gridTemplateColumns: "1fr 5fr",
+                  maxHeight: 200,
+                  overflow: "auto"
+                }}
+              >
+                <div>#</div>
+                <div>
+                  Any arbitrary string of zero or more bases can be matched
+                  here.
+                </div>
+                <div>{"<"}</div>
+                <div>Any bases before a {"<"} are considered optional</div>
+                <div>{">"}</div>
+                <div>Any bases after a {">"} are considered optional</div>
+                <div>M</div> <div>AC</div>
+                <div>R</div> <div>AG</div>
+                <div>W</div> <div>AT</div>
+                <div>S</div> <div>CG</div>
+                <div>Y</div> <div>CT</div>
+                <div>K</div> <div>GT</div>
+                <div>V</div> <div>ACG</div>
+                <div>H</div> <div>ACT</div>
+                <div>D</div> <div>AGT</div>
+                <div>B</div> <div>CGT</div>
+                <div>X</div> <div>GATC</div>
+                <div>N</div> <div>GATC</div>
+                <div>.</div> <div>GATC</div>
+              </div>
+              <br></br>
+              <h4>Examples:</h4>
+              <div
+                style={{
+                  display: "grid",
+                  columnGap: 20,
+                  gridTemplateColumns: "2fr 5fr"
+                }}
+              >
+                <h6>Annotation</h6>
+                <h6>
+                  Sequence (matches in <span style={highlightStyle}>red</span>)
+                </h6>
+                <div>AATT</div>
+                <div>
+                  AA<span style={highlightStyle}>AATT</span>TTGGGGGCCCCCAAGT
+                </div>
+                <div>aAkT</div>
+                <div>
+                  AA<span style={highlightStyle}>AATT</span>TTGGGGGCCCCC
+                  <span style={highlightStyle}>AAGT</span>
+                </div>
+                <div>ANT</div>
+                <div>
+                  AA<span style={highlightStyle}>AAT</span>TTTGGGGGCCCCCA
+                  <span style={highlightStyle}>AGT</span>
+                </div>
+                <div>T#C</div>
+                <div>
+                  AAAATTT<span style={highlightStyle}>TGGGGGC</span>CCCCAAGT
+                </div>
+                <div>CA{"<"}ATTT</div>
+                <div>
+                  AA<span style={highlightStyle}>AATTT</span>TGGGGGCCCCCAAGT
+                </div>
+                <div>
+                  CA{"<"}ATT{">"}TTGAG
+                </div>
+                <div>
+                  AA<span style={highlightStyle}>AATTTTG</span>GGGGCCCCCAAGT
+                </div>
+              </div>
+
+              <br></br>
+              {/* <ConvertApeToRegexTool></ConvertApeToRegexTool> */}
+            </div>
+          }
+        ></Tab>
+        <Tab
+          id="regex"
+          title="Regex"
+          panel={
+            <div>
+              <p>
+                When in regex mode, you can use any custom regex to match base
+                pairs
+              </p>
+              <p>
+                You can learn more and try out your custom regexes at{" "}
+                <a href="https://regex101.com/">https://regex101.com/</a>
+              </p>
+              <br></br>
+              <h4>Examples:</h4>
+              <div
+                style={{
+                  display: "grid",
+                  columnGap: 20,
+                  gridTemplateColumns: "2fr 5fr"
+                }}
+              >
+                <h6>Annotation</h6>
+                <h6>
+                  Sequence (matches in <span style={highlightStyle}>red</span>)
+                </h6>
+                <div>AATT</div>
+                <div>
+                  AA<span style={highlightStyle}>AATT</span>TTGGGGGCCCCCAAGT
+                </div>
+                <div>aAtT</div>
+                <div>
+                  AA<span style={highlightStyle}>AATT</span>TTGGGGGCCCCCAAGT
+                </div>
+                <div>A.T</div>
+                <div>
+                  AA<span style={highlightStyle}>AAT</span>TTTGGGGGCCCCCA
+                  <span style={highlightStyle}>AGT</span>
+                </div>
+                <div>T.*C</div>
+                <div>
+                  AAAA<span style={highlightStyle}>TTTTGGGGGCCCCC</span>AAGT
+                </div>
+                <div>T[^T]*?C</div>
+                <div>
+                  AAAATTT<span style={highlightStyle}>TGGGGGC</span>CCCCAAGT
+                </div>
+                <div>C?A?ATT</div>
+                <div>
+                  AA<span style={highlightStyle}>AATTT</span>TGGGGGCCCCCAAGT
+                </div>
+                <div>C?A?ATTT?T?C?</div>
+                <div>
+                  AA<span style={highlightStyle}>AATTTT</span>GGGGGCCCCCAAGT
+                </div>
+              </div>
+              <br></br>
+
+              {/* <ConvertApeToRegexTool></ConvertApeToRegexTool> */}
+            </div>
+          }
+        ></Tab>
+      </Tabs>
+    </div>
+  );
+});
+
+// function ConvertApeToRegexTool() {
+//   const [inputVal, setInput] = useState("CA<ANT>TTGAG");
+
+//   let convertedVal = "";
+//   try {
+//     convertedVal = convertApELikeRegexToRegex(inputVal);
+//   } catch (error) {
+//     convertedVal = "Error trying to convert to regex";
+//   }
+//   return (
+//     <div
+//       style={{
+//         display: "grid",
+//         rowGap: 10,
+//         columnGap: 10,
+//         gridTemplateColumns: "1fr 5fr"
+//       }}
+//     >
+//       <div>Input:</div>
+//       <TextArea
+//         value={inputVal}
+//         onChange={e => {
+//           setInput(e.target.value.replace(/\s/g, "X"));
+//         }}
+//       ></TextArea>
+
+//       <div>Output:</div>
+//       <div
+//         style={{ maxHeight: 200, overflowWrap: "anywhere", overflow: "auto" }}
+//       >
+//         {convertedVal}
+//       </div>
+//     </div>
+//   );
+// }

package/src/CircularView/Axis.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+function Axis({
+  radius,
+  showAxisNumbers,
+  tickMarkHeight = 5,
+  textOffset = 15,
+  ringThickness = 4,
+  zoomLevel
+}) {
+  const height =
+    (ringThickness + (showAxisNumbers ? textOffset + tickMarkHeight : 0)) /
+    zoomLevel;
+  const radiusToUse = showAxisNumbers
+    ? radius + textOffset + tickMarkHeight
+    : radius;
+
+  const component = (
+    <g key="veAxis" className="veAxis">
+      <circle
+        className="veAxisLine veAxisOuter"
+        key="circleOuter"
+        r={radiusToUse + ringThickness}
+        style={{ fill: "#ffffff00", stroke: "black", strokeWidth: 0.5 }}
+      />
+      <circle
+        className="veAxisLine veAxisInner"
+        key="circle"
+        r={radiusToUse}
+        style={{ fill: "#ffffff00", stroke: "black", strokeWidth: 0.5 }}
+      />
+    </g>
+  );
+  return {
+    component,
+    height
+  };
+}
+
+export default Axis;

package/src/CircularView/AxisNumbers.js

@@ -0,0 +1,35 @@
+import React from "react";
+import shouldFlipText from "./shouldFlipText";
+import { divideBy3 } from "../utils/proteinUtils";
+
+export function AxisNumbers({
+  rotationRadians,
+  textHeightOffset = -5,
+  annotation,
+  isProtein,
+  hideNumbers
+}) {
+  const shouldFlip = shouldFlipText(annotation.startAngle + rotationRadians);
+  return (
+    <g>
+      <rect y={-17} width={1} height={5} fill="black"></rect>
+      {!hideNumbers && (
+        <text
+          transform={
+            (shouldFlip ? "rotate(180)" : "") +
+            ` translate(0, ${
+              shouldFlip ? -textHeightOffset : textHeightOffset
+            })`
+          }
+          style={{
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fontSize: "small"
+          }}
+        >
+          {divideBy3(annotation.tickPosition + 1, isProtein) + ""}
+        </text>
+      )}
+    </g>
+  );
+}

package/src/CircularView/Caret.js

@@ -0,0 +1,63 @@
+import isNumber from "lodash/isNumber";
+import { getRangeAngles } from "@teselagen/range-utils";
+import PositionAnnotationOnCircle from "./PositionAnnotationOnCircle";
+import React from "react";
+import draggableClassnames from "../constants/draggableClassnames";
+import pureNoFunc from "../utils/pureNoFunc";
+import { getSelectionMessage } from "../utils/editorUtils";
+
+function Caret({
+  caretPosition,
+  sequenceLength,
+  className,
+  onClick,
+  isSelection,
+  innerRadius,
+  outerRadius,
+  isProtein,
+  selectionMessage
+}) {
+  const { startAngle, endAngle } = getRangeAngles(
+    { start: caretPosition, end: caretPosition },
+    sequenceLength || 1
+  );
+  if (!isNumber(startAngle)) {
+    console.error("we've got a problem!");
+  }
+  const { transform } = PositionAnnotationOnCircle({
+    sAngle: startAngle,
+    eAngle: endAngle,
+    height: 0
+  });
+  return (
+    <g
+      onClick={onClick}
+      transform={transform}
+      className={className + " veCaret " + draggableClassnames.caret}
+    >
+      <title>
+        {selectionMessage ||
+          getSelectionMessage({ caretPosition, isProtein, sequenceLength })}
+      </title>
+      <line
+        strokeWidth="1.5px"
+        x1={0}
+        y1={-innerRadius}
+        x2={0}
+        y2={-outerRadius}
+        // stroke="black"
+      />
+      {isSelection ? (
+        <polygon
+          className="vePolygonCaretHandle"
+          fill="black"
+          points={`0,${-outerRadius + 2} 5,${-outerRadius - 10} -5,${
+            -outerRadius - 10
+          }`}
+        />
+      ) : null}
+    </g>
+  );
+}
+
+export default pureNoFunc(Caret);

package/src/CircularView/CircularDnaSequence.js

@@ -0,0 +1,73 @@
+import React from "react";
+import shouldFlipText from "./shouldFlipText";
+import { getComplementSequenceString } from "@teselagen/sequence-utils";
+import { getDnaColor } from "../constants/dnaToColor";
+
+export function CircularDnaSequence({
+  rotationRadians,
+  textHeightOffset = -5,
+  annotation,
+  showReverseSequence,
+  showDnaColors,
+  showSeqText,
+  totalAngle,
+  radius
+}) {
+  const shouldFlip = shouldFlipText(annotation.startAngle + rotationRadians);
+  const getShared = ({ textHeightOffset, isReverse }) => ({
+    className: `ve-monospace-font ${isReverse ? "ve-sequence-reverse" : ""}`,
+    transform:
+      (shouldFlip ? "rotate(180)" : "") +
+      ` translate(0, ${shouldFlip ? -textHeightOffset : textHeightOffset})`,
+
+    style: {
+      fontSize: 12,
+      textAnchor: "middle",
+      dominantBaseline: "central"
+    }
+  });
+  let forward = null;
+  let reverse = null;
+  let dnaColors = null;
+  if (showSeqText) {
+    forward = (
+      <text
+        {...getShared({
+          textHeightOffset: showReverseSequence
+            ? textHeightOffset - 15
+            : textHeightOffset
+        })}
+      >
+        {annotation.letter}
+      </text>
+    );
+  }
+  if (showSeqText && showReverseSequence) {
+    reverse = (
+      <text {...getShared({ textHeightOffset, isReverse: true })}>
+        {getComplementSequenceString(annotation.letter)}
+      </text>
+    );
+  }
+  if (!showSeqText || showDnaColors) {
+    const height = showReverseSequence ? 30 : 15;
+    const width = Math.max(totalAngle * radius);
+    dnaColors = (
+      <rect
+        fill={getDnaColor(annotation.letter)}
+        height={height}
+        width={width}
+        transform={`translate(-${width / 2}, -${height - 3})`}
+        className="veDnaColor"
+      ></rect>
+    );
+  }
+
+  return (
+    <g>
+      {dnaColors}
+      {forward}
+      {reverse}
+    </g>
+  );
+}

package/src/CircularView/CircularZoomMinimap.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export function CircularZoomMinimap({ percentOfCircle, rotationRadians }) {
+  const percent = Math.max(2, Math.min(45, percentOfCircle * 100 * 0.9));
+  return (
+    <div
+      className="circularViewMinimap"
+      style={{
+        transform: `scale(-1,1) rotate(${
+          (rotationRadians * 180) / Math.PI - percent * 1.8
+        }deg)`,
+        "--p": percent
+      }}
+    ></div>
+  );
+}

package/src/CircularView/Cutsite.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function Cutsite({
+  annotationHeight,
+  radius
+  // totalAngle,
+  // ...rest
+}) {
+  return (
+    <rect
+      className={"veCutsite"}
+      width={1}
+      y={-radius - 4}
+      height={annotationHeight}
+      // {...rest}
+    />
+  );
+}

package/src/CircularView/Cutsites.js

@@ -0,0 +1,113 @@
+/* @flow */
+import getRangeAngles from "./getRangeAnglesSpecial";
+import PositionAnnotationOnCircle from "./PositionAnnotationOnCircle";
+import React from "react";
+import each from "lodash/each";
+import withHover from "../helperComponents/withHover";
+import pureNoFunc from "../utils/pureNoFunc";
+
+function Cutsites({
+  radius,
+  noRedux,
+  editorName,
+  showCutsiteLabels,
+  cutsiteClicked,
+  cutsiteDoubleClicked,
+  cutsiteRightClicked,
+  cutsites,
+  cutsiteWidth = 1,
+  annotationHeight = 15,
+  sequenceLength
+}) {
+  radius += annotationHeight;
+  const svgGroup = [];
+  const labels = {};
+  let index = 0;
+  if (!Object.keys(cutsites).length) return null;
+  each(cutsites, function (annotation /* key */) {
+    index++;
+
+    if (!(annotation.topSnipPosition > -1)) {
+      //we need this to be present
+    }
+    const { startAngle } = getRangeAngles(
+      { start: annotation.topSnipPosition, end: annotation.topSnipPosition },
+      sequenceLength
+    );
+    if (showCutsiteLabels) {
+      //expand the end angle if annotation spans the origin
+      labels[annotation.id] = {
+        annotationCenterAngle: startAngle,
+        annotationCenterRadius: radius,
+        text: annotation.restrictionEnzyme.name,
+        color: annotation.restrictionEnzyme.color,
+        className: " veCutsiteLabel",
+        id: annotation.id,
+        onClick: (event) => {
+          cutsiteClicked({ event, annotation });
+          event.stopPropagation();
+        },
+        onDoubleClick: (event) => {
+          cutsiteDoubleClicked({ event, annotation });
+          event.stopPropagation();
+        },
+        onContextMenu: (event) => {
+          cutsiteRightClicked({ event, annotation });
+          event.stopPropagation();
+        }
+      };
+    }
+    svgGroup.push(
+      <DrawCutsite
+        key={"cutsite" + index}
+        {...{
+          noRedux,
+          editorName,
+          id: annotation.id,
+          startAngle,
+          radius,
+          cutsiteWidth,
+          annotationHeight
+        }}
+      />
+    );
+  });
+  return {
+    height: annotationHeight,
+    labels,
+    component: (
+      <g key="cutsites" className="cutsites">
+        {svgGroup}
+      </g>
+    )
+  };
+}
+
+export default Cutsites;
+
+const DrawCutsite = pureNoFunc(
+  withHover(function ({
+    className,
+    startAngle,
+    radius,
+    cutsiteWidth,
+    annotationHeight,
+    onMouseLeave,
+    onMouseOver
+  }) {
+    const { transform } = PositionAnnotationOnCircle({
+      sAngle: startAngle,
+      eAngle: startAngle,
+      height: radius
+    });
+    return (
+      <rect
+        {...{ onMouseLeave, onMouseOver }}
+        className={className}
+        transform={transform}
+        width={cutsiteWidth}
+        height={annotationHeight}
+      />
+    );
+  })
+);

package/src/CircularView/DeletionLayer.js

@@ -0,0 +1,28 @@
+import React from "react";
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+
+export default function DeletionLayer({
+  color = "orange",
+  radius,
+  arrowheadLength = 0.5,
+  annotationHeight,
+  totalAngle,
+  ...rest
+}) {
+  const path = drawDirectedPiePiece({
+    radius,
+    annotationHeight,
+    totalAngle,
+    arrowheadLength,
+    tailThickness: 1 //feature specific
+  });
+  return (
+    <path
+      {...rest}
+      strokeWidth=".5"
+      stroke="black"
+      fill={color}
+      d={path.print()}
+    />
+  );
+}

package/src/CircularView/Feature.js

@@ -0,0 +1,83 @@
+import { startsWith } from "lodash";
+import React from "react";
+
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+import { getInternalLabel } from "./getInternalLabel";
+import shouldFlipText from "./shouldFlipText";
+
+export default function Feature(props) {
+  const {
+    color = "orange",
+    radius,
+    containsLocations,
+    arrowheadLength = 0.5,
+    annotationHeight,
+    className,
+    ellipsizedName,
+    annotationType,
+    arrowheadType,
+    overlapsSelf,
+    rotationRadians,
+    centerAngle,
+    totalAngle,
+    locationNumber
+  } = props;
+  const isPart = annotationType === "part";
+  let colorToUse = color;
+  if (isPart) {
+    colorToUse = startsWith(color, "override_")
+      ? color.replace("override_", "")
+      : "#ac68cc";
+  }
+  const labelNeedsFlip = shouldFlipText(centerAngle + rotationRadians);
+  if (containsLocations) {
+    const path = drawDirectedPiePiece({
+      radius: radius,
+      labelNeedsFlip,
+      annotationHeight: annotationHeight / 8,
+      totalAngle,
+      arrowheadLength: 80 / radius,
+      tailThickness: 1 //feature specific
+    });
+    return (
+      <path
+        className={className}
+        strokeWidth=".5"
+        stroke="black"
+        fill={colorToUse}
+        d={path.print()}
+      />
+    );
+  }
+  const [path, textPath] = drawDirectedPiePiece({
+    returnTextPath: true,
+    overlapsSelf,
+    arrowheadType,
+    hasLabel: ellipsizedName,
+    labelNeedsFlip,
+    radius,
+    annotationHeight,
+    totalAngle,
+    arrowheadLength,
+    tailThickness: 1 //feature specific
+  });
+
+  return (
+    <>
+      <path
+        className={className}
+        strokeWidth=".5"
+        stroke={isPart ? colorToUse : "black"}
+        fill={isPart ? undefined : colorToUse}
+        d={path.print()}
+      />
+      {getInternalLabel({
+        ...props,
+        colorToUse,
+        textPath,
+        isPart,
+        locationNumber
+      })}
+    </>
+  );
+}