@teselagen/ove 0.7.27 → 0.7.28

package/MultipleSeqsDetectedOnImportDialog.js

@@ -0,0 +1,74 @@
+import { DialogFooter, wrapDialog } from "@teselagen/ui";
+
+import { Button, Callout, Card } from "@blueprintjs/core";
+
+import { hideDialog } from "../GlobalDialogUtils";
+import SimpleCircularOrLinearView from "../SimpleCircularOrLinearView";
+import React, { useState } from "react";
+import { tidyUpSequenceData } from "@teselagen/sequence-utils";
+
+export const MultipleSeqsDetectedOnImportDialog = wrapDialog({
+  title: "Multiple Sequences Detected"
+  // style: { height: 600, width: 800 }
+})(({ results, finishDisplayingSeq }) => {
+  const [_selectedSeqData, setSelectedSeqData] = useState(
+    results[0].parsedSequence
+  );
+  const selectedSeqData = tidyUpSequenceData(_selectedSeqData);
+  return (
+    <div>
+      <div className="bp3-dialog-body">
+        <Callout intent="primary">
+          Multiple sequences were detected in the input file. Please choose one
+          to continue
+        </Callout>
+        <br></br>
+        <div style={{ display: "flex" }}>
+          <div style={{ maxHeight: 300, overflowY: "auto" }}>
+            {results.map((res, i) => {
+              const { parsedSequence } = res;
+              if (!parsedSequence) return null;
+              const { name } = parsedSequence;
+              return (
+                <div key={i}>
+                  <Button
+                    active={parsedSequence === selectedSeqData}
+                    onClick={() => {
+                      setSelectedSeqData(parsedSequence);
+                    }}
+                    minimal
+                  >
+                    {name}
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+          &nbsp;
+          <Card elevation={1}>
+            <SimpleCircularOrLinearView
+              sequenceData={selectedSeqData || { sequence: "" }}
+              // tabHeight={tabHeight}
+              editorName="previewEditor"
+              height={null}
+              isProtein={selectedSeqData && selectedSeqData.isProtein}
+              annotationLabelVisibility={{
+                features: true,
+                parts: true,
+                cutsites: false,
+                primers: true
+              }}
+            ></SimpleCircularOrLinearView>
+          </Card>
+        </div>
+      </div>
+      <DialogFooter
+        text="Select"
+        onClick={() => {
+          finishDisplayingSeq(selectedSeqData);
+          hideDialog();
+        }}
+      ></DialogFooter>
+    </div>
+  );
+});

package/Orf.js

@@ -0,0 +1,109 @@
+import getAnnotationNameAndStartStopString from "../utils/getAnnotationNameAndStartStopString";
+import React from "react";
+import orfFrameToColorMap from "../constants/orfFrameToColorMap";
+
+function Orf(props) {
+  const {
+    height,
+    rangeType,
+    normalizedInternalStartCodonIndices = [],
+    forward,
+    frame = 0,
+    annotation,
+    width,
+    onClick,
+    isProtein,
+    onRightClick,
+    charWidth,
+    readOnly,
+    gapsInside,
+    gapsBefore
+  } = props;
+  const heightToUse = height / 1.5;
+  const color = orfFrameToColorMap[frame];
+  let arrow = null;
+  let endCircle = null;
+  const circle = (
+    <circle
+      key="circle"
+      r={heightToUse / 2}
+      cx={heightToUse / 2}
+      cy={heightToUse / 2}
+    />
+  );
+  if (rangeType === "end" || rangeType === "beginningAndEnd") {
+    arrow = (
+      <path
+        transform={`translate(${
+          width + gapsInside - Math.max(charWidth, 5)
+        },0) scale(${Math.max(charWidth, 8) / 64},${heightToUse / 64})`}
+        d={
+          rangeType === "start"
+            ? "M0 16 L0 48 L16 64 L48 64 L64 48 L64 16 L48 0 L16 0 Z"
+            : "M0 64 L64 32 L0 0 Z"
+        }
+      />
+    );
+  }
+  if (rangeType === "start" || rangeType === "beginningAndEnd") {
+    endCircle = circle;
+  }
+  const internalStartCodonCircles = normalizedInternalStartCodonIndices.map(
+    function (internalStartCodon, index) {
+      return React.cloneElement(circle, {
+        key: index,
+        transform: `translate(${charWidth * internalStartCodon},0)`
+      });
+    }
+  );
+  return (
+    <g
+      onClick={function (event) {
+        onClick({ annotation, event, gapsInside, gapsBefore });
+      }}
+      onContextMenu={function (event) {
+        onRightClick({ annotation, event, gapsInside, gapsBefore });
+      }}
+      className={`veRowViewOrf clickable frame${frame}`}
+      strokeWidth="1"
+      stroke={color}
+      fillOpacity={1}
+      fill={color}
+      transform={
+        forward ? null : `translate(${width + gapsInside},0) scale(-1,1)`
+      }
+    >
+      <path
+        transform={
+          (rangeType === "start" ? `translate(${charWidth},0)` : "") +
+          `scale(${
+            (width + gapsInside - (rangeType === "middle" ? 0 : charWidth)) / 64
+          },${heightToUse / 64})`
+        }
+        d="M0 40 L64 40 L64 20 L0 20 Z"
+      />
+      {arrow}
+      {endCircle}
+      {internalStartCodonCircles}
+      <title>
+        {" "}
+        {getAnnotationNameAndStartStopString(annotation, {
+          startText: "Open Reading Frame:",
+          isProtein,
+          readOnly
+        })}{" "}
+      </title>
+    </g>
+  );
+}
+
+// Orf.propTypes = {
+//   width: PropTypes.number.isRequired,
+//   charWidth: PropTypes.number.isRequired,
+//   frame: PropTypes.number.isRequired,
+//   height: PropTypes.number.isRequired,
+//   rangeType: PropTypes.string.isRequired,
+//   forward: PropTypes.bool.isRequired
+// };
+
+export default Orf;

package/OrfProperties.js

@@ -0,0 +1,117 @@
+import React from "react";
+import {
+  DataTable,
+  withSelectedEntities,
+  createCommandMenu
+} from "@teselagen/ui";
+import { map } from "lodash-es";
+// import { Button } from "@blueprintjs/core";
+import { getRangeLength } from "@teselagen/range-utils";
+import { getOrfColor } from "../../constants/orfFrameToColorMap";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+import selectors from "../../selectors";
+
+import getCommands from "../../commands";
+import { sizeSchema } from "./utils";
+import { orfsSubmenu } from "../../MenuBar/viewSubmenu";
+import { getVisFilter } from "./GenericAnnotationProperties";
+
+class OrfProperties extends React.Component {
+  constructor(props) {
+    super(props);
+    this.commands = getCommands(this);
+  }
+  onRowSelect = ([record]) => {
+    if (!record) return;
+    const { dispatch, editorName } = this.props;
+    dispatch({
+      type: "SELECTION_LAYER_UPDATE",
+      payload: record,
+      meta: {
+        editorName
+      }
+    });
+  };
+  render() {
+    const { orfs, sequenceLength, annotationVisibility } = this.props;
+    const orfsToUse = map(orfs, orf => {
+      return {
+        ...orf,
+        color: getOrfColor(orf),
+        frame: orf.frame + 1,
+        ...(orf.strand === undefined && {
+          strand: orf.forward ? 1 : -1
+        }),
+        size: getRangeLength(orf, sequenceLength),
+        sizeAa: Math.floor(getRangeLength(orf, sequenceLength) / 3 - 1)
+      };
+    });
+    return (
+      <React.Fragment>
+        <DataTable
+          topLeftItems={getVisFilter(
+            createCommandMenu(orfsSubmenu, this.commands, {
+              useTicks: true
+            })
+          )}
+          annotationVisibility={annotationVisibility} //we need to pass this in order to force the DT to rerender
+          noPadding
+          noFullscreenButton
+          onRowSelect={this.onRowSelect}
+          withSearch={false}
+          formName="orfProperties"
+          noRouter
+          compact
+          isInfinite
+          schema={{
+            fields: [
+              {
+                path: "color",
+                type: "string",
+                render: color => {
+                  return (
+                    <div style={{ height: 20, width: 20, background: color }} />
+                  );
+                }
+              },
+              {
+                path: "sizeAa",
+                displayName: "Size (aa)",
+                type: "number"
+              },
+              sizeSchema(this.props.isProtein),
+              { path: "frame", type: "number" },
+              { path: "strand", type: "number" }
+            ]
+          }}
+          entities={orfsToUse}
+        />
+        <br />
+      </React.Fragment>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor(editorState => {
+    const {
+      readOnly,
+      annotationVisibility = {},
+      sequenceData: { sequence = "" } = {},
+      sequenceData,
+      minimumOrfSize,
+      useAdditionalOrfStartCodons
+    } = editorState;
+    return {
+      readOnly,
+      annotationVisibility,
+      useAdditionalOrfStartCodons,
+      orfs: selectors.orfsSelector(editorState),
+      sequenceLength: sequence.length,
+      sequenceData,
+      minimumOrfSize
+    };
+  }),
+  withSelectedEntities("orfProperties")
+)(OrfProperties);

package/Orfs.js

@@ -0,0 +1,35 @@
+import React from "react";
+import Orf from "./Orf";
+import StackedAnnotations from "./StackedAnnotations";
+
+function getExtraInnerCompProps(annotationRange, props) {
+  const { row } = props;
+  const { annotation, start, end } = annotationRange;
+  const { frame, internalStartCodonIndices = [] } = annotation;
+  const normalizedInternalStartCodonIndices = internalStartCodonIndices
+    .filter(function (position) {
+      if (
+        position >= row.start &&
+        position >= start &&
+        position <= end &&
+        position <= row.end
+      ) {
+        return true;
+      } else return false;
+    })
+    .map(function (position) {
+      return position - start;
+    });
+
+  return { normalizedInternalStartCodonIndices, frame };
+}
+
+function Orfs(props) {
+  return (
+    <StackedAnnotations
+      {...{ ...props, getExtraInnerCompProps, InnerComp: Orf }}
+    />
+  );
+}
+
+export default Orfs;

package/PCRTool.js

@@ -0,0 +1,179 @@
+import { compose } from "recompose";
+import React from "react";
+
+import withEditorInteractions from "../withEditorInteractions";
+import { ReactSelectField, tgFormValues } from "@teselagen/ui";
+import { reduxForm } from "redux-form";
+import { flatMap, forEach, keyBy } from "lodash-es";
+import SimpleCircularOrLinearView from "../SimpleCircularOrLinearView";
+import {
+  getReverseComplementSequenceString,
+  getSequenceDataBetweenRange,
+  tidyUpSequenceData,
+  shiftAnnotationsByLen
+} from "@teselagen/sequence-utils";
+import { getRangeLength, getSequenceWithinRange } from "@teselagen/range-utils";
+
+function PCRTool(props) {
+  const {
+    sequenceData,
+    dimensions: { width, height },
+    forwardPrimer,
+    reversePrimer,
+    primerClicked
+  } = props;
+  const origSeqLen = sequenceData.sequence.length;
+  forEach(sequenceData.primers, p => (p.originalId = p.id));
+  const fPrimer = sequenceData.primers[forwardPrimer];
+  const rPrimer = sequenceData.primers[reversePrimer];
+  let seqBetween;
+  if (fPrimer && rPrimer) {
+    const r = {
+      start: fPrimer.start,
+      end: rPrimer.end
+    };
+
+    const newSeqData = getSequenceDataBetweenRange(sequenceData, r);
+
+    if (rPrimer.bases) {
+      // remove rPrimer length from end of seq
+      const rPrimerLen = getRangeLength(rPrimer, origSeqLen);
+
+      newSeqData.sequence = getSequenceWithinRange(
+        { start: 0, end: newSeqData.sequence.length - rPrimerLen - 1 },
+        newSeqData.sequence
+      );
+      // tack back in the rPrimer.bases
+      newSeqData.sequence =
+        newSeqData.sequence + getReverseComplementSequenceString(rPrimer.bases);
+      const newRPrimer = keyBy(newSeqData.primers, "id")[reversePrimer];
+
+      newRPrimer.end = newSeqData.sequence.length - 1;
+    }
+    if (fPrimer.bases) {
+      const fPrimerLength = getRangeLength(fPrimer, origSeqLen);
+      const newSeqLen1 = newSeqData.sequence.length;
+      // remove fPrimer length from start of seq
+      newSeqData.sequence = getSequenceWithinRange(
+        { start: fPrimerLength, end: newSeqData.sequence.length },
+        newSeqData.sequence
+      );
+      // add back in the fPrimer.bases
+      newSeqData.sequence = fPrimer.bases + newSeqData.sequence;
+      // shift the existing annotations by the difference in seqLen before and after that operation
+      const newSeqLen2 = newSeqData.sequence.length;
+      const diff = newSeqLen2 - newSeqLen1;
+      shiftAnnotationsByLen({
+        seqData: newSeqData,
+        insertLength: diff,
+        caretPosition: 0
+      });
+      const newFPrimer = keyBy(newSeqData.primers, "id")[forwardPrimer];
+      newFPrimer.start = 0;
+    }
+
+    seqBetween = tidyUpSequenceData(newSeqData, {
+      provideNewIdsForAnnotations: true
+    });
+    seqBetween.name = `PCR Product from ${sequenceData.name} `;
+  }
+  const getPrimers = opts => {
+    return flatMap(
+      sequenceData.primers,
+      ({ name, id, forward, start, end }) => {
+        if (opts.forward && !forward) return [];
+        if (!opts.forward && forward) return [];
+        return {
+          label: (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              }}
+            >
+              <div>{name}</div>
+              <div
+                style={{
+                  marginLeft: 8,
+                  fontStyle: "italic",
+                  color: "grey",
+                  fontSize: 11
+                }}
+              >
+                ({start + 1} - {end + 1})
+              </div>
+            </div>
+          ),
+          value: id
+        };
+      }
+    );
+  };
+  const forwardPrimers = getPrimers({ forward: true });
+  const reversePrimers = getPrimers({ forward: false });
+  return (
+    <div
+      className="createPcrTool"
+      style={{ padding: 10, overflowY: "auto", height }}
+    >
+      <ReactSelectField
+        noResultsText="Create a new primer in the forward direction to use it in this tool"
+        inlineLabel
+        tooltipError
+        options={forwardPrimers}
+        defaultValue={
+          forwardPrimer ??
+          (forwardPrimers[0] ? forwardPrimers[0].value : undefined)
+        }
+        name="forwardPrimer"
+        label="Forward Primer:"
+      />
+      <ReactSelectField
+        noResultsText="Create a new primer in the reverse direction to use it in this tool"
+        inlineLabel
+        tooltipError
+        options={reversePrimers}
+        defaultValue={
+          reversePrimer ??
+          (reversePrimers[0] ? reversePrimers[0].value : undefined)
+        }
+        name="reversePrimer"
+        label="Reverse Primer:"
+      />
+      <div style={{ fontWeight: "600", fontSize: 13 }}>Output Product:</div>
+      {seqBetween ? (
+        <SimpleCircularOrLinearView
+          noWarnings
+          withZoomLinearView
+          withZoomCircularView
+          withChoosePreviewType
+          withDownload
+          smallSlider
+          withCaretEnabled
+          width={width - 50}
+          height={Math.max(height - 250, 400)}
+          sequenceData={seqBetween}
+          primerClicked={args => {
+            primerClicked({
+              ...args,
+              annotation: sequenceData.primers[args.annotation.originalId]
+            });
+          }}
+        ></SimpleCircularOrLinearView>
+      ) : (
+        <div style={{ marginTop: 5, fontStyle: "italic", color: "grey" }}>
+          Please choose a forward and reverse primer to see the resulting PCR
+          sequence
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default compose(
+  withEditorInteractions,
+  reduxForm({ form: "PCRTool" }),
+  tgFormValues("forwardPrimer", "reversePrimer")
+)(PCRTool);

package/PairwiseAlignmentView.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { getPairwiseOverviewLinearViewOptions } from "./getPairwiseOverviewLinearViewOptions";
+import { AlignmentView } from "./index";
+
+//this view is shown if we detect pairwise alignments
+export class PairwiseAlignmentView extends React.Component {
+  state = {
+    currentPairwiseAlignmentIndex: undefined
+  };
+  render() {
+    const { pairwiseAlignments, pairwiseOverviewAlignmentTracks } = this.props;
+    const { currentPairwiseAlignmentIndex } = this.state;
+    if (currentPairwiseAlignmentIndex > -1) {
+      //we can render the AlignmentView directly
+      //get the alignmentTracks based on currentPairwiseAlignmentIndex
+      const alignmentTracks = pairwiseAlignments[currentPairwiseAlignmentIndex];
+
+      const templateLength = alignmentTracks[0].alignmentData.sequence.length;
+      return (
+        <AlignmentView
+          {...{
+            ...this.props,
+            sequenceData: {
+              //pass fake seq data in so editor interactions work
+              sequence: Array.from(templateLength)
+                .map(() => "a")
+                .join("")
+            },
+            allowTrackRearrange: false,
+            alignmentTracks,
+            hasTemplate: true,
+            isPairwise: true,
+            currentPairwiseAlignmentIndex,
+            handleBackButtonClicked: () => {
+              this.setState({
+                currentPairwiseAlignmentIndex: undefined
+              });
+            }
+          }}
+        />
+      );
+    } else {
+      //we haven't yet selected an alignment to view
+      // render the AlignmentView zoomed out for each track in pairwiseOverviewAlignmentTracks
+      // when the view eye icon is hit (maybe next to the name?)
+      return (
+        <AlignmentView
+          {...{
+            ...this.props,
+            alignmentTracks: pairwiseOverviewAlignmentTracks,
+            allowTrackRearrange: false,
+            allowTrimming: false,
+            hasTemplate: true,
+            isPairwise: true,
+            isInPairwiseOverviewView: true,
+            isFullyZoomedOut: true,
+            noClickDragHandlers: true,
+            linearViewOptions: getPairwiseOverviewLinearViewOptions,
+            handleSelectTrack: trackIndex => {
+              //set currentPairwiseAlignmentIndex
+              this.setState({ currentPairwiseAlignmentIndex: trackIndex - 1 });
+            }
+          }}
+        />
+      );
+    }
+  }
+}

package/Part.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { startsWith } from "lodash-es";
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+
+export default function Part({
+  radius,
+  arrowheadLength = 0.5,
+  annotationHeight,
+  totalAngle,
+  color,
+  overlapsSelf,
+  className
+}) {
+  const path = drawDirectedPiePiece({
+    radius,
+    overlapsSelf,
+    annotationHeight,
+    totalAngle,
+    arrowheadLength,
+    tailThickness: 1 //feature specific
+  });
+  const colorToUse = startsWith(color, "override_")
+    ? color.replace("override_", "")
+    : "#ac68cc";
+  return (
+    <path
+      className={className}
+      strokeWidth="0.5"
+      stroke={colorToUse}
+      // fill={colorToUse}
+      d={path.print()}
+    />
+  );
+}

package/PartProperties.js

@@ -0,0 +1,9 @@
+import { partsSubmenu } from "../../MenuBar/viewSubmenu";
+import genericAnnotationProperties from "./GenericAnnotationProperties";
+export default genericAnnotationProperties({
+  annotationType: "part",
+  noColor: true,
+  visSubmenu: partsSubmenu,
+  withTags: true,
+  noType: true
+});

package/PassThrough.js

@@ -0,0 +1,3 @@
+export default function ({ children }) {
+  return children;
+}

package/PerformantSelectionLayer.js

@@ -0,0 +1,32 @@
+import React from "react";
+import SelectionLayer from "../RowItem/SelectionLayer";
+import { view } from "@risingstack/react-easy-state";
+
+export const PerformantSelectionLayer = view(({ easyStore, ...rest }) => {
+  const seqLen = rest.sequenceLength - 1;
+
+  return (
+    <SelectionLayer
+      regions={[
+        { ...easyStore.selectionLayer, ignoreGaps: true },
+        {
+          start: Math.floor(
+            (easyStore.percentScrolledPreZoom || easyStore.percentScrolled) *
+              seqLen
+          ),
+          end: Math.floor(
+            (easyStore.percentScrolledPreZoom || easyStore.percentScrolled) *
+              seqLen
+          ),
+          className: "zoomSelection",
+          ignoreGaps: true,
+          style: {
+            zIndex: -1,
+            opacity: 0
+          }
+        }
+      ]}
+      {...rest}
+    />
+  );
+});

package/PinchHelper.js

@@ -0,0 +1,24 @@
+import { usePinch } from "@use-gesture/react";
+import React from "react";
+/**
+ * wrapper for the react usePinch gesture
+ * @param {*} children child components to be enveloped
+ * @param {*} onPinch the action to be performed when pinch gesture is registered
+ */
+export default function PinchHelper({ children, onPinch }) {
+  const target = React.useRef();
+
+  usePinch(
+    arg => {
+      if (onPinch) onPinch(arg);
+    },
+    {
+      target
+    }
+  );
+  return (
+    <div ref={target} className="tg-pinch-helper">
+      {children}
+    </div>
+  );
+}