@teselagen/ove 0.0.14 → 0.0.15

package/src/CircularView/normalizeAngle.js

@@ -0,0 +1,3 @@
+export function normalizeAngle(a) {
+  return (a + Math.PI * 2) % (Math.PI * 2);
+}

package/src/CircularView/normalizeAngleRange.js

@@ -0,0 +1,9 @@
+import { normalizeAngle } from "./normalizeAngle";
+
+export function normalizeAngleRange(r) {
+  return {
+    ...r,
+    start: normalizeAngle(r.start),
+    end: normalizeAngle(r.end)
+  };
+}

package/src/CircularView/positionCutsites.js

@@ -0,0 +1,6 @@
+export function positionCutsites(annotation) {
+  return {
+    start: annotation.topSnipPosition,
+    end: annotation.topSnipPosition
+  };
+}

package/src/CircularView/shouldFlipText.js

@@ -0,0 +1,4 @@
+export default function shouldFlipText(_angle) {
+  const angle = _angle > 2 * Math.PI ? _angle - 2 * Math.PI : _angle;
+  return angle > Math.PI * 0.5 && angle < Math.PI * 1.5;
+}

package/src/CircularView/style.css

@@ -0,0 +1,47 @@
+.veCircularViewMiddleOfVectorText {
+  position: absolute;
+  top: 50%;
+  /* position the top  edge of the element at the middle of the parent */
+  left: 49.5%;
+  /* position the left edge of the element at the middle of the parent */
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  text-align: center;
+  /* This is a shorthand of
+                                           translateX(-50%) and translateY(-50%) */
+}
+
+.selectionLayerInverseWrapper {
+  fill: none !important;
+}
+
+.veHideLabels .veLabels,
+.veHideLabels .veCircularViewMiddleOfVectorText {
+  display: none;
+}
+
+.circularViewMinimap {
+  margin: 4px;
+  --v: calc(((18 / 5) * var(--p) - 90) * 1deg);
+  --bg: #fff;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  border-radius: 50%;
+  padding: 5px;
+  background: linear-gradient(var(--bg), var(--bg)) content-box,
+    linear-gradient(var(--v), #ccc 50%, transparent 0) 0 /
+      min(100%, calc(50 - var(--p)) * 100%),
+    linear-gradient(var(--v), transparent 50%, #4ac5ed 0) 0 /
+      min(100%, calc(var(--p) - 50) * 100%),
+    linear-gradient(to right, #ccc 50%, #4ac5ed 0);
+}
+.bp3-dark .circularViewMinimap {
+  --bg: #293742;
+}
+.veCircularView .ve-monospace-font.veCircularViewInternalLabelText {
+  font-size: 13px;
+}
+.veCircularView {
+  pointer-events: initial;
+}

package/src/CircularView/utils/polarToSpecialCartesian.js

@@ -0,0 +1,7 @@
+export default function polarToSpecialCartesian(radius, angle) {
+  //the 0 angle returns the 0,1 point on the unit circle instead of the 1,0 point like normal
+  return {
+    x: radius * Math.cos(angle - Math.PI / 2),
+    y: radius * Math.sin(angle - Math.PI / 2)
+  };
+}

package/src/CreateAnnotationsPage.js

@@ -0,0 +1,96 @@
+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";
+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}
+        ></DataTable>
+      </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/src/CreateCustomEnzyme/index.js

@@ -0,0 +1,337 @@
+import { connect } from "react-redux";
+// import {reduxForm, Field, formValueSelector} from 'redux-form'
+import React from "react";
+import {
+  DialogFooter,
+  InfoHelper,
+  wrapDialog
+} from "@teselagen/ui";
+
+// import './style.css';
+import { cutSequenceByRestrictionEnzyme } from "@teselagen/sequence-utils";
+// import QuestionTooltip from '../../components/QuestionTooltip';
+import {
+  defaultEnzymesByName,
+  getReverseComplementSequenceString
+} from "@teselagen/sequence-utils";
+import EnzymeViewer from "../EnzymeViewer";
+import "./style.css";
+import { connectToEditor } from "../withEditorProps";
+import { compose } from "recompose";
+import { Callout } from "@blueprintjs/core";
+import { addCustomEnzyme } from "../utils/editorUtils";
+
+const CreateCustomEnzyme = function (props) {
+  const paddingStart = "-------";
+  const paddingEnd = "-------";
+  const {
+    inputSequenceToTestAgainst = "", //pass this prop in!
+    seqName = "Destination Vector",
+    createYourOwnEnzyme,
+    dispatch,
+    hideModal,
+    editorName
+  } = props;
+
+  createYourOwnEnzyme.chop_top_index = Number(
+    createYourOwnEnzyme.chop_top_index
+  );
+  createYourOwnEnzyme.chop_bottom_index = Number(
+    createYourOwnEnzyme.chop_bottom_index
+  );
+
+  const {
+    sequence = "",
+    chop_top_index = 0,
+    chop_bottom_index = 0,
+    name = ""
+  } = createYourOwnEnzyme;
+  const regexString = bpsToRegexString(sequence);
+  const enzyme = {
+    name: name,
+    site: sequence,
+    forwardRegex: regexString,
+    reverseRegex: getReverseComplementSequenceString(regexString),
+    topSnipOffset: chop_top_index,
+    bottomSnipOffset: chop_bottom_index,
+    usForward: 0,
+    usReverse: 0,
+    color: "black"
+  };
+  let invalid;
+  if (
+    !enzyme.name ||
+    !enzyme.site ||
+    !enzyme.forwardRegex ||
+    !enzyme.reverseRegex ||
+    (!enzyme.topSnipOffset && enzyme.topSnipOffset !== 0) ||
+    (!enzyme.bottomSnipOffset && enzyme.bottomSnipOffset !== 0)
+  ) {
+    invalid = true;
+  }
+
+  let matches;
+  if (regexString.length === 0) {
+    matches = [];
+  } else {
+    matches = cutSequenceByRestrictionEnzyme(
+      inputSequenceToTestAgainst,
+      true,
+      enzyme
+    );
+  }
+
+  const errors = validate(createYourOwnEnzyme);
+  if (Object.keys(errors || {}).length) {
+    invalid = true;
+  }
+  function onChange(updatedVal) {
+    dispatch({
+      type: "CREATE_YOUR_OWN_ENZYME_UPDATE",
+      payload: {
+        ...createYourOwnEnzyme,
+        ...updatedVal
+      }
+    });
+  }
+
+  return (
+    <div className="createYourOwnEnzyme">
+      <Callout intent="primary">
+        This enzyme will be added to the "My Enzymes" group
+      </Callout>
+      <CustomInput
+        error={errors["name"]}
+        value={name}
+        onChange={onChange}
+        name="name"
+        label="Name:"
+      />
+      <CustomInput
+        error={errors["sequence"]}
+        value={sequence}
+        onChange={onChange}
+        name="sequence"
+        label={
+          <div className="labelWithIcon">
+            <InfoHelper>
+              <div className="taLineHolder">
+                <Line> Special Characters: </Line>
+                <Line> R = G A (purine) </Line>
+                <Line> Y = T C (pyrimidine) </Line>
+                <Line> K = G T (keto) </Line>
+                <Line> M = A C (amino) </Line>
+                <Line> S = G C (strong bonds) </Line>
+                <Line> W = A T (weak bonds) </Line>
+                <Line> B = G T C (all but A) </Line>
+                <Line> D = G A T (all but C) </Line>
+                <Line> H = A C T (all but G) </Line>
+                <Line> V = G C A (all but T) </Line>
+                <Line> N = A G C T (any) </Line>
+              </div>
+            </InfoHelper>
+            <span>Recognition sequence:</span>
+          </div>
+        }
+        onInput={function (input) {
+          const inputValue = input.target.value;
+          const cleanInput = inputValue.replace(/[^rykmswbdhvnagct]/gi, "");
+          input.target.value = cleanInput;
+        }}
+      />
+
+      <CustomInput
+        error={errors["chop_top_index"]}
+        value={chop_top_index}
+        onChange={onChange}
+        name="chop_top_index"
+        label="Chop top index:"
+        type="number"
+      />
+      <CustomInput
+        error={errors["chop_bottom_index"]}
+        value={chop_bottom_index}
+        onChange={onChange}
+        name="chop_bottom_index"
+        label="Chop bottom index:"
+        type="number"
+      />
+
+      <EnzymeViewer
+        {...{
+          forwardSnipPosition: chop_top_index,
+          paddingEnd,
+          paddingStart,
+          reverseSnipPosition: chop_bottom_index,
+          sequence
+        }}
+      />
+      <br />
+
+      <h3 className={"cutnumber " + (matches.length === 0 && "invalid")}>
+        {matches.length > 10
+          ? `Cuts more than 10 times in ${seqName}`
+          : `Cuts ${matches.length} time${
+              matches.length === 1 ? "" : "s"
+            } in ${seqName}`}
+      </h3>
+      <DialogFooter
+        hideModal={hideModal}
+        disabled={invalid}
+        onClick={() => {
+          addCustomEnzyme(enzyme);
+          dispatch({
+            type: "FILTERED_RESTRICTION_ENZYMES_ADD", //filteredRestrictionEnzymesAdd
+            payload: {
+              value: name
+            },
+            meta: {
+              editorName
+            }
+          });
+          hideModal && hideModal();
+        }}
+      ></DialogFooter>
+      {/* <div className="buttonHolder">
+        <Button
+          className="addAdditionalEnzymeBtn"
+          onClick={stopCreatingYourOwnEnzyme}
+        >
+          Back
+        </Button>
+        <Button
+          className={
+            " ta_useCutsite addAdditionalEnzymeBtn " + (invalid && "disabled")
+          }
+          onClick={function () {}}
+        >
+          Use Enzyme
+        </Button>
+      </div> */}
+    </div>
+  );
+};
+
+export default compose(
+  wrapDialog({
+    title: "Create Custom Enzyme"
+  }),
+  connectToEditor(({ sequenceData = {} }) => {
+    return {
+      seqName: sequenceData.name,
+      inputSequenceToTestAgainst: sequenceData.sequence || ""
+    };
+  }),
+  connect(function (state) {
+    return {
+      createYourOwnEnzyme:
+        state.VectorEditor.__allEditorsOptions.createYourOwnEnzyme
+    };
+  })
+)(CreateCustomEnzyme);
+
+function validate(values) {
+  const errors = {};
+
+  if (!values.name || values.name.trim() === "") {
+    errors.name = "Input cannot be blank";
+  } else if (defaultEnzymesByName[values.name.toLowerCase()]) {
+    errors.name = `The name ${values.name} is already taken.`;
+  }
+
+  if (
+    !values.sequence ||
+    values.sequence.trim() === "" ||
+    values.sequence.trim().length < 4
+  ) {
+    errors.sequence = "Enzyme recognition sequence must be at least 4bps long";
+  }
+
+  if (
+    values.sequence &&
+    values.sequence.replace(/[^atgcrykmswbdhvn]/gi, "").length !==
+      values.sequence.length
+  ) {
+    errors.sequence = "Sequence must only contain valid bases";
+  }
+
+  if (!values.chop_top_index && values.chop_top_index !== 0) {
+    errors.chop_top_index = "Input cannot be blank";
+  }
+  if (!values.chop_bottom_index && values.chop_bottom_index !== 0) {
+    errors.chop_bottom_index = "Input cannot be blank";
+  }
+  return errors;
+}
+
+// connect(
+//   function(state, props) {
+//     const editorState = state.VectorEditor[props.editorName];
+//     let selectedEnzymes = s.restrictionEnzymesSelector(editorState, props.additionalEnzymes);
+//     return {
+//       selectedEnzymes
+//     };
+//   },
+//   { createYourOwnEnzymeClose }
+// )(ManageEnzymes);
+
+// export default ManageEnzymes;
+
+function bpsToRegexString(bps) {
+  let regexString = "";
+  if (typeof bps === "string") {
+    bps.split("").forEach(function (bp) {
+      if (bp === "r") {
+        regexString += "[ga]";
+      } else if (bp === "y") {
+        regexString += "[tc]";
+      } else if (bp === "k") {
+        regexString += "[gt]";
+      } else if (bp === "m") {
+        regexString += "[ac]";
+      } else if (bp === "s") {
+        regexString += "[gc]";
+      } else if (bp === "w") {
+        regexString += "[at]";
+      } else if (bp === "b") {
+        regexString += "[gtc]";
+      } else if (bp === "d") {
+        regexString += "[gat]";
+      } else if (bp === "h") {
+        regexString += "[act]";
+      } else if (bp === "v") {
+        regexString += "[gca]";
+      } else if (bp === "n") {
+        regexString += "[agct]";
+      } else {
+        regexString += bp;
+      }
+    });
+  }
+  return regexString;
+}
+
+function CustomInput({ name, value, onChange, onInput, label, error, type }) {
+  return (
+    <div className={"inputHolder " + (error && "error")}>
+      <div>
+        <span>{label}</span>
+        <input
+          value={value}
+          onChange={function (e) {
+            onChange({
+              [name]: e.target.value
+            });
+          }}
+          onInput={onInput}
+          type={type}
+        />
+      </div>
+      {error && <p className="errorMessage">{error}</p>}
+    </div>
+  );
+}
+
+function Line({ children }) {
+  return <div className="taLine"> {children}</div>;
+}

package/src/CreateCustomEnzyme/style.css

@@ -0,0 +1,100 @@
+.inputHolder {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.inputHolder.error input {
+  background: pink;
+}
+.inputHolder.error .errorMessage {
+  color: red;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-left: 95px;
+}
+.inputHolder > div {
+  display: flex;
+  align-items: center;
+}
+.inputHolder > div > span {
+  width: 210px;
+  margin-right: 0.5em;
+  text-align: right;
+}
+
+.addAdditionalEnzymeBtn {
+  width: 120px !important;
+  margin: 10px;
+}
+
+.addAdditionalEnzyme {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.addAdditionalEnzyme > span {
+  max-width: 350px;
+}
+
+.createYourOwnEnzyme {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.createYourOwnEnzyme .inputHolder input {
+  flex: 1;
+  display: block;
+  min-width: 0;
+  margin: 10px;
+}
+.createYourOwnEnzyme .buttonHolder {
+  display: flex;
+}
+.createYourOwnEnzyme .cutnumber.invalid {
+  color: red;
+}
+
+.ta_useCutsite {
+  margin: 10px;
+}
+.ta_useCutsite.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.labelWithIcon {
+  display: flex;
+  justify-content: flex-end;
+}
+.labelWithIcon > div {
+  padding-right: 10px;
+}
+
+.createYourOwnButton {
+  padding-top: 40px;
+  display: flex;
+  align-items: center;
+}
+.createYourOwnButton > span {
+  width: 250px;
+}
+
+.filterAndButton {
+  display: flex;
+  align-items: center;
+}
+
+.taLine {
+  text-align: left;
+}
+
+.taLineHolder {
+  width: 100%;
+}
+.taLineHolder div {
+  width: 100%;
+}