@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/AutoAnnotateBpMatchingDialog.js

@@ -1,208 +0,0 @@
-/* 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

@@ -1,151 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,106 +0,0 @@
-/////////////////////////////////////////////////////////
-// 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

@@ -1,63 +0,0 @@
-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);