@teselagen/ove 0.7.27 → 0.7.28

package/CutsiteProperties.js

@@ -0,0 +1,176 @@
+import React, { useCallback, useMemo } from "react";
+import { DataTable, createCommandMenu } from "@teselagen/ui";
+import { get } from "lodash-es";
+import CutsiteFilter from "../../CutsiteFilter";
+import { Button, ButtonGroup } from "@blueprintjs/core";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+import selectors from "../../selectors";
+import _commands from "../../commands";
+import { userDefinedHandlersAndOpts } from "../../Editor/userDefinedHandlersAndOpts";
+import { pick } from "lodash-es";
+import SingleEnzymeCutsiteInfo from "./SingleEnzymeCutsiteInfo";
+import { withRestrictionEnzymes } from "../../CutsiteFilter/withRestrictionEnzymes";
+import { cutsitesSubmenu } from "../../MenuBar/viewSubmenu";
+import { getVisFilter } from "./GenericAnnotationProperties";
+
+const schema = {
+  fields: [
+    { path: "name", type: "string" },
+    { path: "numberOfCuts", type: "number" },
+    { path: "groups", type: "string" }
+  ]
+};
+
+const defaultValues = { order: ["numberOfCuts"] };
+
+const CutsiteProperties = props => {
+  const commands = _commands({ props });
+  const {
+    allRestrictionEnzymes,
+    allCutsites,
+    annotationVisibilityShow,
+    createNewDigest,
+    dispatch,
+    editorName,
+    filteredCutsites,
+    selectedAnnotationId
+  } = props;
+
+  const SubComponent = useCallback(
+    row => (
+      <SingleEnzymeCutsiteInfo
+        allRestrictionEnzymes={allRestrictionEnzymes}
+        allCutsites={allCutsites}
+        filteredCutsites={filteredCutsites}
+        editorName={editorName}
+        dispatch={dispatch}
+        selectedAnnotationId={selectedAnnotationId}
+        cutsiteGroup={row.original.cutsiteGroup}
+        enzyme={row.original.enzyme}
+      />
+    ),
+    [
+      allCutsites,
+      allRestrictionEnzymes,
+      dispatch,
+      editorName,
+      filteredCutsites,
+      selectedAnnotationId
+    ]
+  );
+
+  const onChangeHook = useCallback(() => {
+    annotationVisibilityShow("cutsites");
+  }, [annotationVisibilityShow]);
+
+  const { cutsitesByName, cutsitesById } = filteredCutsites;
+
+  const cutsitesToUse = useMemo(
+    () =>
+      Object.values(cutsitesByName || {}).map(cutsiteGroup => {
+        const name = cutsiteGroup[0].restrictionEnzyme.name;
+        let groups = "";
+        const exisitingEnzymeGroups = window.getExistingEnzymeGroups();
+
+        Object.keys(exisitingEnzymeGroups).forEach(key => {
+          if (exisitingEnzymeGroups[key].includes(name)) groups += key;
+          groups += " ";
+        });
+
+        return {
+          cutsiteGroup,
+          id: name,
+          name,
+          numberOfCuts: cutsiteGroup.length,
+          enzyme: cutsiteGroup[0].restrictionEnzyme,
+          groups
+        };
+      }),
+    [cutsitesByName]
+  );
+
+  const selectedIds = useMemo(
+    () => get(cutsitesById[selectedAnnotationId], "restrictionEnzyme.name"),
+    [cutsitesById, selectedAnnotationId]
+  );
+
+  return (
+    <>
+      <div
+        style={{
+          marginBottom: 10,
+          paddingTop: 3,
+          display: "flex",
+          // flexWrap: 'wrap',
+          width: "100%",
+          // justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        {getVisFilter(
+          createCommandMenu(cutsitesSubmenu, commands, {
+            useTicks: true
+          })
+        )}
+        <ButtonGroup>
+          <Button
+            intent="success"
+            data-tip="Virtual Digest"
+            icon="cut"
+            style={{ marginLeft: 15, flexGrow: -1 }}
+            onClick={() => {
+              createNewDigest();
+            }}
+          />
+        </ButtonGroup>
+        <CutsiteFilter
+          {...pick(props, userDefinedHandlersAndOpts)}
+          style={{ marginLeft: "auto", marginRight: 3 }}
+          editorName={editorName}
+          manageEnzymesToLeft
+          onChangeHook={onChangeHook}
+        />
+      </div>
+      <DataTable
+        selectedIds={selectedIds}
+        compact
+        noSelect
+        noHeader
+        noFooter
+        withExpandAndCollapseAllButton
+        noFullscreenButton
+        noPadding
+        defaults={defaultValues}
+        formName="cutsiteProperties"
+        noRouter
+        withSearch={false}
+        SubComponent={SubComponent}
+        isInfinite
+        schema={schema}
+        entities={cutsitesToUse}
+      />
+    </>
+  );
+};
+
+export default compose(
+  connectToEditor((editorState, ownProps) => {
+    const cutsites = selectors.filteredCutsitesSelector(
+      editorState,
+      ownProps.additionalEnzymes,
+      ownProps.enzymeGroupsOverride
+    );
+    const allCutsites = selectors.cutsitesSelector(
+      editorState,
+      ownProps.additionalEnzymes
+    );
+    return {
+      annotationVisibility: editorState.annotationVisibility || {},
+      filteredCutsites: cutsites,
+      allCutsites,
+      cutsites: cutsites.cutsitesArray
+    };
+  }),
+  withRestrictionEnzymes
+)(CutsiteProperties);

package/CutsiteSelectionLayers.js

@@ -0,0 +1,47 @@
+import React from "react";
+import SelectionLayer from "./SelectionLayer";
+import { connectToEditor } from "../withEditorProps";
+import classNames from "classnames";
+
+export const CutsiteSelectionLayers = connectToEditor(
+  ({ hoveredAnnotation }) => ({
+    hoveredAnnotation
+  })
+)(function CutsiteSelectionLayersInner({
+  hoveredAnnotation,
+  cutsites,
+  annotationCommonProps,
+  showReverseSequence,
+  sequenceHeight,
+  alignmentData,
+  row
+}) {
+  return Object.keys(cutsites)
+    .sort(a => (cutsites[a].id === hoveredAnnotation ? 1 : -1))
+    .map(function (id, index) {
+      const cutsite = cutsites[id];
+      const isHovered = hoveredAnnotation === cutsite.id;
+      const layer = cutsite.annotation.recognitionSiteRange;
+      return (
+        layer.start > -1 && (
+          <SelectionLayer
+            hideTitle
+            key={"restrictionSiteRange" + index}
+            {...annotationCommonProps}
+            {...{
+              id: cutsite.id,
+              height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
+              regions: [layer],
+              row: alignmentData
+                ? { start: 0, end: alignmentData.sequence.length - 1 }
+                : row,
+              className: classNames("cutsiteLabelSelectionLayer", {
+                cutsiteLabelSelectionLayerHovered: isHovered
+              }),
+              hideCarets: true
+            }}
+          />
+        )
+      );
+    });
+});

package/Cutsites.js

@@ -0,0 +1,271 @@
+import { isPositionWithinRange } from "@teselagen/range-utils";
+import assign from "lodash/assign";
+import React from "react";
+import areNonNegativeIntegers from "validate.io-nonnegative-integer-array";
+import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
+import getXStartAndWidthOfRangeWrtRow from "./getXStartAndWidthOfRangeWrtRow";
+import pureNoFunc from "../utils/pureNoFunc";
+import { connectToEditor } from "../withEditorProps";
+
+let snipStyle = {
+  height: "100%",
+  // background: 'black',
+  position: "absolute",
+  width: "2px"
+};
+let snipConnectorStyle = {
+  height: "2px",
+  // background: 'black',
+  position: "absolute",
+  top: -1
+};
+
+// var cursor = getCursorForRow(caretPosition, row, bpsPerRow, snipStyle, charWidth, true);
+
+function getSnipForRow(
+  isTopStrand,
+  isHovered,
+  snipPosition,
+  row,
+  sequenceLength,
+  bpsPerRow,
+  snipStyle,
+  charWidth,
+  index
+) {
+  if (!isPositionWithinRange(snipPosition, row)) return;
+
+  const { xStart } = getXStartAndWidthOfRangeWrtRow({
+    range: { start: snipPosition, end: snipPosition },
+    row,
+    charWidth,
+    sequenceLength
+  });
+
+  const newCursorStyle = assign({}, snipStyle, {
+    left: xStart
+  });
+  const cursorEl = (
+    <div
+      key={index}
+      className={`veRowViewCutsite snip ${
+        isTopStrand ? "topStrandSnip" : "bottomStrandSnip"
+      } ${isHovered ? "snipHovered" : ""} snipPosition-${snipPosition}`}
+      style={newCursorStyle}
+    />
+  );
+  return cursorEl;
+}
+
+function getSnipConnector(
+  isHovered,
+  snipRange,
+  row,
+  sequenceLength,
+  bpsPerRow,
+  snipConnectorStyle,
+  charWidth,
+  index
+) {
+  //tnr: we basically need to first determine what the range start and end are..
+  // var _snipRange = {
+  //     ...snipRange,
+  //     end: norm(snipRange.end-1,sequenceLength)
+  // }
+  //then mask the range by the row
+
+  const overlaps = getOverlapsOfPotentiallyCircularRanges(
+    snipRange,
+    { ...row, end: row.end + 1 },
+    sequenceLength
+  );
+  return overlaps.map(function (overlap, index2) {
+    let { xStart, width } = getXStartAndWidthOfRangeWrtRow({
+      range: overlap,
+      row,
+      charWidth,
+      sequenceLength
+    });
+    width -= charWidth;
+    //the second logical operator catches the special case where we're at the very end of the sequence..
+    const newCursorStyle = assign({}, snipConnectorStyle, {
+      left: xStart,
+      width
+    });
+    const cursorEl = (
+      <div
+        key={index + index2}
+        className={`veRowViewCutsite snipConnector ${
+          isHovered ? "snipHovered" : ""
+        } `}
+        style={newCursorStyle}
+      />
+    );
+    return cursorEl;
+  });
+}
+
+function Cutsites(props) {
+  const {
+    annotationRanges,
+    charWidth,
+    bpsPerRow,
+    row,
+    sequenceLength,
+    topStrand,
+    hoveredAnnotation
+  } = props;
+  const snips = [];
+  const snipConnectors = [];
+  Object.keys(annotationRanges)
+    .sort(a =>
+      annotationRanges[a].annotation.id === hoveredAnnotation ? 1 : -1
+    )
+    .forEach(function (key) {
+      const annotationRange = annotationRanges[key];
+      let { annotation } = annotationRange;
+      if (!annotation) {
+        annotation = annotationRange;
+      }
+      let {
+        topSnipPosition,
+        bottomSnipPosition,
+        upstreamBottomSnip,
+        upstreamTopSnip,
+        upstreamTopBeforeBottom,
+        topSnipBeforeBottom
+      } = annotation;
+      topSnipPosition = topSnipPosition && Number(topSnipPosition);
+      bottomSnipPosition = bottomSnipPosition && Number(bottomSnipPosition);
+      upstreamTopSnip = upstreamTopSnip && Number(upstreamTopSnip);
+      upstreamBottomSnip = upstreamBottomSnip && Number(upstreamBottomSnip);
+      const isHovered = annotation.id === hoveredAnnotation;
+      snipStyle = {
+        ...snipStyle,
+        background: annotation.restrictionEnzyme.color
+      };
+      snipConnectorStyle = {
+        ...snipConnectorStyle,
+        background: annotation.restrictionEnzyme.color
+      };
+
+      let newSnip;
+      let newConnector;
+      const snipRange = {};
+
+      if (areNonNegativeIntegers([bottomSnipPosition, topSnipPosition])) {
+        if (topStrand) {
+          newSnip = getSnipForRow(
+            true,
+            isHovered,
+            topSnipPosition,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "downstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+        } else {
+          newSnip = getSnipForRow(
+            false,
+            isHovered,
+            bottomSnipPosition,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "downstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+          if (topSnipBeforeBottom) {
+            snipRange.start = topSnipPosition;
+            snipRange.end = bottomSnipPosition;
+          } else {
+            snipRange.start = bottomSnipPosition;
+            snipRange.end = topSnipPosition;
+          }
+          newConnector = getSnipConnector(
+            isHovered,
+            snipRange,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipConnectorStyle,
+            charWidth,
+            key + "downstreamConnector"
+          );
+          snipConnectors.push(newConnector);
+        }
+      }
+      if (areNonNegativeIntegers([upstreamBottomSnip, upstreamTopSnip])) {
+        if (topStrand) {
+          newSnip = getSnipForRow(
+            true,
+            isHovered,
+            upstreamTopSnip,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "upstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+        } else {
+          newSnip = getSnipForRow(
+            false,
+            isHovered,
+            upstreamBottomSnip,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipStyle,
+            charWidth,
+            key + "upstream"
+          );
+          if (newSnip) {
+            snips.push(newSnip);
+          }
+          if (upstreamTopBeforeBottom) {
+            snipRange.start = upstreamTopSnip;
+            snipRange.end = upstreamBottomSnip;
+          } else {
+            snipRange.start = upstreamBottomSnip;
+            snipRange.end = upstreamTopSnip;
+          }
+          newConnector = getSnipConnector(
+            isHovered,
+            snipRange,
+            row,
+            sequenceLength,
+            bpsPerRow,
+            snipConnectorStyle,
+            charWidth,
+            key + "upstreamConnector"
+          );
+          snipConnectors.push(newConnector);
+        }
+      }
+    });
+  return (
+    <div>
+      {snips}
+      {snipConnectors}
+    </div>
+  );
+}
+
+export default pureNoFunc(
+  connectToEditor(({ hoveredAnnotation }) => ({
+    hoveredAnnotation
+  }))(Cutsites)
+);

package/DeletionLayer.js

@@ -0,0 +1,28 @@
+import React from "react";
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+
+export default function DeletionLayer({
+  color = "orange",
+  radius,
+  arrowheadLength = 0.5,
+  annotationHeight,
+  totalAngle,
+  ...rest
+}) {
+  const path = drawDirectedPiePiece({
+    radius,
+    annotationHeight,
+    totalAngle,
+    arrowheadLength,
+    tailThickness: 1 //feature specific
+  });
+  return (
+    <path
+      {...rest}
+      strokeWidth=".5"
+      stroke="black"
+      fill={color}
+      d={path.print()}
+    />
+  );
+}

package/DigestTool/Ladder.d.ts

@@ -1,6 +1,6 @@
 export default function Ladder({ boxHeight, lanes, digestLaneRightClicked, selectedFragment, ladders }: {
     boxHeight?: number | undefined;
-    lanes?: any[] | undefined;
+    lanes?: never[] | undefined;
     digestLaneRightClicked: any;
     selectedFragment: any;
     ladders?: {

package/DropHandler.css

@@ -0,0 +1,21 @@
+.dropzone-dragging-message {
+  position: absolute;
+  z-index: -1;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  top: 30%;
+  width: 310px;
+  border-radius: 3px;
+  border: 7px dotted lightblue;
+  background: rgb(232, 232, 232);
+  padding: 30px;
+  font-size: 24px;
+  opacity: 0;
+  transition: 0.5s all;
+}
+.veEditor.isActive .dropzone-dragging-message {
+  z-index: 10;
+  opacity: 1;
+}

package/DropHandler.js

@@ -0,0 +1,64 @@
+import React from "react";
+import Dropzone from "react-dropzone";
+import classNames from "classnames";
+import "./DropHandler.css";
+
+export default class DropHandler extends React.Component {
+  handleDrop = files => {
+    if (!files || !files.length) {
+      return window.toastr.warning("Unrecognized File Type");
+    }
+    this.props.importSequenceFromFile(files[0]);
+  };
+  render() {
+    const { children, style, className, disabled } = this.props;
+    return (
+      <Dropzone
+        disabled={disabled}
+        onClick={evt => evt.preventDefault()}
+        multiple={false}
+        accept={[
+          ".gb",
+          ".gbk",
+          ".fasta",
+          ".fa",
+          ".geneious",
+          ".gp",
+          ".txt",
+          ".dna",
+          ".prot",
+          ".ab1",
+          ".json"
+        ]}
+        onDropRejected={() => {
+          window.toastr.error("Error: Incorrect File Type");
+        }}
+        onDrop={this.handleDrop}
+      >
+        {({ getRootProps, isDragActive, isDragReject }) => (
+          <div
+            {...getRootProps()}
+            {...{
+              style,
+              className: classNames(className, {
+                isActive: isDragActive,
+                isRejected: isDragReject
+              })
+            }}
+          >
+            <DraggingMessage />
+            {children}
+          </div>
+        )}
+      </Dropzone>
+    );
+  }
+}
+function DraggingMessage() {
+  return (
+    <div className="dropzone-dragging-message">
+      Drop Fasta or Genbank files to view them in the editor. The following
+      extensions are accepted: .gb .gbk .fasta .fa .gp .txt
+    </div>
+  );
+}