@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/Chromatogram.js

@@ -1,293 +0,0 @@
-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;
-  if (chromatogramData.basePos && !chromatogramData.baseTraces) {
-    throw new Error(
-      'Chromatogram data is missing "baseTraces". Be sure to call the convertBasePosTraceToPerBpTrace(_chromData) before passing it to the editor'
-    );
-  }
-  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/CircularDnaSequence.js

@@ -1,73 +0,0 @@
-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/CircularZoomMinimap.js

@@ -1,16 +0,0 @@
-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/ColorPicker.js

@@ -1,30 +0,0 @@
-import React from "react";
-
-export default class ColorPicker extends React.Component {
-  render() {
-    const { onColorSelect } = this.props;
-    return (
-      <div style={{ display: "flex", padding: 20, maxWidth: 300 }}>
-        {["red", "blue", "green", "yellow", "pink"].map(color => {
-          const isSelected = color === "blue";
-          return (
-            <div
-              onClick={() => {
-                onColorSelect(color);
-              }}
-              key={color}
-              style={{
-                margin: 10,
-                height: 20,
-                width: 20,
-                padding: 3,
-                background: color,
-                ...(isSelected && { border: "1px solid black" })
-              }}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-}

package/CommandHotkeyHandler.js

@@ -1,44 +0,0 @@
-import React from "react";
-import { compose } from "redux";
-import withEditorProps from "../withEditorProps";
-import { withHotkeys } from "@teselagen/ui";
-import getCommands from "../commands";
-import {
-  getCommandHotkeys,
-  getCommandHotkeyHandlers,
-  HotkeysDialog
-} from "@teselagen/ui";
-
-class CommandHotkeyHandler extends React.Component {
-  constructor(props) {
-    super(props);
-    const commands = getCommands(this);
-    // Don't bind clipboard shortcuts (use native ones directly)
-    ["cut", "copy", "paste"].forEach(cmdId => delete commands[cmdId]);
-    this.hotkeyDefs = getCommandHotkeys(commands);
-    this.handlers = getCommandHotkeyHandlers(commands);
-
-    this.Handler = withHotkeys(this.hotkeyDefs, this.handlers);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <this.Handler key="handla" />
-        <HotkeysDialog
-          dialogTitle="Editor Hotkeys"
-          key="hotkeyDialog"
-          hotkeySets={{
-            Editor: {
-              "Search File Menu": this.props.menuSearchHotkey || "cmd+/",
-              ...this.hotkeyDefs
-            }
-          }}
-          {...this.props.hotkeyDialogProps}
-        />
-      </React.Fragment>
-    );
-  }
-}
-
-export default compose(withEditorProps)(CommandHotkeyHandler);

package/CreateAnnotationsPage.js

@@ -1,98 +0,0 @@
-import { compose } from "redux";
-import pluralize from "pluralize";
-
-import { formName } from "./constants";
-import { typeField } from "./helperComponents/PropertiesDialog/typeField";
-import {
-  DataTable,
-  DialogFooter,
-  withSelectTableRecords,
-  withSelectedEntities
-} from "@teselagen/ui";
-import { useEffect } from "react";
-import { hideDialog } from "./GlobalDialogUtils";
-import { startCase } from "lodash-es";
-import { tidyUpAnnotation } from "@teselagen/sequence-utils";
-
-const schemaFeatures = ["name", typeField, "start", "end", "strand"];
-const schemaOther = ["name", "start", "end", "strand"];
-export default compose(
-  withSelectedEntities(formName),
-  withSelectTableRecords(formName)
-)(function CreateAnnotationsPage(props) {
-  const {
-    newAnnotations,
-    annotationType,
-    annotationVisibilityShow,
-    beforeAnnotationCreate,
-    handleSubmit,
-    selectTableRecords,
-    sequenceData
-  } = props;
-  const ents = props[`${formName}SelectedEntities`];
-  useEffect(() => {
-    selectTableRecords(newAnnotations);
-  }, [newAnnotations, selectTableRecords]);
-  return (
-    <div className="bp3-dialog-body">
-      <div>
-        The following {annotationType}
-        {newAnnotations.length > 1 ? "s" : ""} will be added:
-        <DataTable
-          isInfinite
-          formName={formName}
-          entities={newAnnotations.map(e => ({
-            ...e,
-            start: e.start + 1,
-            end: e.end + 1
-          }))}
-          withCheckboxes
-          schema={annotationType === "feature" ? schemaFeatures : schemaOther}
-        />
-      </div>
-      <DialogFooter
-        hideModal={hideDialog}
-        onClick={handleSubmit(async () => {
-          const annotationTypePlural = pluralize(annotationType);
-
-          ents.forEach((newAnnotation, i) => {
-            beforeAnnotationCreate &&
-              beforeAnnotationCreate({
-                annotationTypePlural,
-                annotation: newAnnotation,
-                props: props
-              });
-
-            let conditionals = {};
-            if (ents.length > 1) {
-              if (i === 0) {
-                conditionals = {
-                  batchUndoStart: true
-                };
-              } else if (i === ents.length - 1) {
-                conditionals = {
-                  batchUndoEnd: true
-                };
-              } else {
-                conditionals = {
-                  batchUndoMiddle: true
-                };
-              }
-            }
-            props[`upsert${startCase(annotationType)}`](
-              tidyUpAnnotation(newAnnotation, {
-                sequenceData,
-                annotationType: annotationTypePlural
-              }),
-              conditionals
-            );
-            annotationVisibilityShow(annotationTypePlural);
-          });
-
-          hideDialog();
-        })}
-        text="Add"
-      ></DialogFooter>
-    </div>
-  );
-});

package/Cutsite.js

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