@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/MultipleSeqsDetectedOnImportDialog.js

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

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

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

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

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

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

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

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

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

package/PerformantSelectionLayer.js

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

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