@teselagen/ove 0.7.27 → 0.7.28

package/Chromatogram.js

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

@@ -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/CircularView/Labels/index.d.ts

@@ -1,6 +1,6 @@
 export default Labels;
 declare function Labels({ labels, extraSideSpace, smartCircViewLabelRender, radius: outerRadius, editorName, noRedux, rotationRadians, textScalingFactor, labelLineIntensity, labelSize, fontHeightMultiplier, circularViewWidthVsHeightRatio, condenseOverflowingXLabels }: {
-    labels?: any[] | undefined;
+    labels?: never[] | undefined;
     extraSideSpace: any;
     smartCircViewLabelRender: any;
     radius: any;

package/CircularView/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from '../../../../node_modules/react';
-
 export interface CircularViewProps {
   editorName: string; //the name of the editor instance (this should match what you've set up in your redux store)
   maxAnnotationsToDisplay;

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

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

@@ -0,0 +1,44 @@
+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.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import('../../../node_modules/react-redux').ConnectedComponent<import('../../../node_modules/react').ComponentType<import('../../../node_modules/react-redux').Matching<any, unknown>>, {
-    context?: import('../../../node_modules/react').Context<import('../../../node_modules/react-redux').ReactReduxContextValue<any, import('../../../node_modules/redux').AnyAction>> | undefined;
-    store?: import('../../../node_modules/redux').Store<any, import('../../../node_modules/redux').AnyAction> | undefined;
+    context?: import('../../../node_modules/react-redux/es/components/Context').ReactReduxContextInstance | undefined;
+    store?: import('../../../node_modules/redux').Store | undefined;
 } | {
     ref?: import('../../../node_modules/react').LegacyRef<import('../../../node_modules/react').Component<import('../../../node_modules/react-redux').Matching<any, unknown>, any, any>> | undefined;
     key?: import('../../../node_modules/react').Key | null | undefined;
-    context?: import('../../../node_modules/react').Context<import('../../../node_modules/react-redux').ReactReduxContextValue<any, import('../../../node_modules/redux').AnyAction>> | undefined;
-    store?: import('../../../node_modules/redux').Store<any, import('../../../node_modules/redux').AnyAction> | undefined;
+    context?: import('../../../node_modules/react-redux/es/components/Context').ReactReduxContextInstance | undefined;
+    store?: import('../../../node_modules/redux').Store | undefined;
 }>;
 export default _default;

package/CreateAnnotationsPage.js

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

@@ -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}
+    />
+  );
+}