@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/CutsiteProperties.js

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

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

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

@@ -1,28 +0,0 @@
-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/DropHandler.css

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

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