@teselagen/ove 0.7.27 → 0.7.28

package/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/Axis.js

@@ -0,0 +1,151 @@
+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 tickMarkSVG = [];
+
+  tickMarkPositions.forEach(function ({ tickMarkPosition, xCenter }, i) {
+    // const xCenterPlusXStart = xCenter + xStart;
+
+    if (scrollData && !(xCenter < visibleEnd && xCenter > visibleStart)) return;
+    tickMarkSVG.push(
+      <rect
+        className="veAxisTick"
+        data-test={tickMarkPosition + 1}
+        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;
+      }
+      if (i === tickMarkPositions.length - 1) {
+        x = Math.min(x, xEnd - positionLength / 2);
+      }
+      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}
+      width={width}
+      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/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/Browser.js

@@ -0,0 +1,106 @@
+/////////////////////////////////////////////////////////
+// Browser Utils
+//
+/////////////////////////////////////////////////////////
+class Browser {
+  // Check if not running on server
+  static isBrowser() {
+    return typeof window !== "undefined";
+  }
+
+  // // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
+  // static isOpera() {
+  //   return (
+  //     Browser.isBrowser() &&
+  //     (!!window.opera || navigator.userAgent.indexOf(" OPR/") >= 0)
+  //   );
+  // }
+
+  static isOpera() {
+    return Browser.isBrowser() && Browser.getUserAgent().match(/Opera Mini/i);
+  }
+
+  // Firefox 1.0+
+  static isFirefox() {
+    return Browser.isBrowser() && typeof InstallTrigger !== "undefined";
+  }
+
+  // Safari 3.0+
+  static isSafari() {
+    if (!Browser.isBrowser()) {
+      return false;
+    }
+
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  }
+
+  // Internet Explorer 6-11
+  static isIE() {
+    /*@cc_on!@*/
+    return Browser.isBrowser() && !!document.documentMode;
+  }
+
+  // Edge 20+
+  static isEdge() {
+    return Browser.isBrowser() && !Browser.isIE() && !!window.StyleMedia;
+  }
+
+  // Chrome 1+
+  static isChrome() {
+    return Browser.isBrowser() && !!window.chrome && !!window.chrome.webstore;
+  }
+
+  // Blink engine detection
+  static isBlink() {
+    return (
+      Browser.isBrowser() &&
+      (Browser.isChrome() || Browser.isOpera()) &&
+      !!window.CSS
+    );
+  }
+
+  static getUserAgent() {
+    return typeof navigator === "undefined" ? "" : navigator.userAgent;
+  }
+
+  static isAndroid() {
+    return Browser.isBrowser() && Browser.getUserAgent().match(/Android/i);
+  }
+
+  static isBlackBerry() {
+    return Browser.isBrowser() && Browser.getUserAgent().match(/BlackBerry/i);
+  }
+
+  static isIOS() {
+    return (
+      Browser.isBrowser() && Browser.getUserAgent().match(/iPhone|iPad|iPod/i)
+    );
+  }
+
+  static isWindows() {
+    return (
+      (Browser.isBrowser() && Browser.isWindowsDesktop()) ||
+      Browser.isWindowsMobile()
+    );
+  }
+
+  static isWindowsMobile() {
+    return Browser.isBrowser() && Browser.getUserAgent().match(/IEMobile/i);
+  }
+
+  static isWindowsDesktop() {
+    return Browser.isBrowser() && Browser.getUserAgent().match(/WPDesktop/i);
+  }
+
+  static isMobile() {
+    return (
+      Browser.isBrowser() &&
+      (Browser.isWindowsMobile() ||
+        Browser.isBlackBerry() ||
+        Browser.isAndroid() ||
+        Browser.isIOS())
+    );
+  }
+}
+
+export default Browser;

package/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);