@teselagen/ove 0.7.26 → 0.7.28

package/createFragmentLines.js

@@ -0,0 +1,120 @@
+// let {getCutsitesFromSequence} = require('@teselagen/sequence-utils');
+// let {assign} = require('lodash');
+
+// module.exports = function createFragmentsLines({input: {geneRuler, enzymes}, state, output}) {
+//     if (geneRuler === "geneRuler1kb") {
+//         geneRuler = [20000, 10000, 7000, 5000, 4000, 3000, 2000, 1500, 1000, 700, 500, 400, 300, 200, 75];
+//     } else {
+//         geneRuler = [3000, 2000, 1500, 1200, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100];
+//     }
+
+//     let cutsites = state.get('digestCutsites');
+//     if (cutsites.length === 0) {
+//         state.set('fragmentsNum', 0);
+//         state.set('fragments', []);
+//         return;
+//     }
+
+//     let sequenceLength = state.get(['sequenceData', 'sequence']).length;
+//     let circular = state.get(['sequenceData', 'circular']);
+
+//     function sortNumber(a,b) {
+//         if (a.position) {
+//             return a.position - b.position;
+//         }
+//         if (a.segmentLength) {
+//             return a.segmentLength - b.segmentLength;
+//         }
+//     }
+
+//     let cutsitesData = [];
+//     let position;
+//     let cutsite;
+//     for (let i = 0; i < cutsites.length; i++) {
+//         cutsite = Object.assign({}, cutsites[i]);
+//         position = Math.floor((cutsite.end + cutsite.start)/2);
+//         cutsite.position = position;
+//         cutsitesData.push(cutsite);
+//     }
+
+//     // circular or linear
+//     cutsitesData = cutsitesData.sort(sortNumber);
+//     if (circular) {
+//         var lines = [ // if circular, fragment wraps around origin
+//             {
+//                 segmentLength: sequenceLength - cutsitesData[cutsitesData.length-1].start + cutsitesData[0].end,
+//                 enzyme1: cutsitesData[cutsitesData.length-1].start + '('+cutsitesData[cutsitesData.length-1].name+')',
+//                 enzyme2: cutsitesData[0].end + '('+cutsitesData[0].name+')'
+//             }
+//         ];
+//     } else {
+//         var lines = [ // if not ciruclar, need to split into two seperate fragments
+//             {
+//                 segmentLength: sequenceLength - cutsitesData[cutsitesData.length-1].start,
+//                 enzyme1: cutsitesData[cutsitesData.length-1].start + '('+cutsitesData[cutsitesData.length-1].name+')',
+//                 enzyme2: sequenceLength
+//             },
+//             {
+//                 segmentLength: cutsitesData[0].end,
+//                 enzyme1: 0,
+//                 enzyme2: cutsitesData[0].end + '('+cutsitesData[0].name+')'
+//             }
+//         ];
+//     }
+
+//     // get fragments
+//     for (let i=0; i<cutsitesData.length-1; i++) {
+//         lines.push({
+//             segmentLength: Math.abs(cutsitesData[i+1].end - cutsitesData[i].start),
+//             enzyme1: cutsitesData[i].start + ' ('+cutsitesData[i].name+')',
+//             enzyme2: cutsitesData[i+1].end + ' ('+cutsitesData[i+1].name+')'
+//         });
+//     }
+
+//     lines = lines.sort(sortNumber).reverse();
+
+//     let fragmentsNum = 0; // counter for number of fragments
+//     let lineWidth = 1;
+//     let boxHeight = 275;
+//     let upperBoundary = lines[0].segmentLength > geneRuler[0] ? lines[0].segmentLength : geneRuler[0];
+//     let fragments = [];
+
+//     // position fragments on the ladder
+//     for (let iLeft = 0, iRight = 0; ; ) {
+//         if (iLeft == geneRuler.length && iRight === lines.length) {
+//             break;
+
+//         } else if (iRight == lines.length || geneRuler[iLeft] >= lines[iRight].segmentLength) {
+//             fragments.push({
+//                 align: "left",
+//                 bottom: (boxHeight * Math.log(geneRuler[iLeft]) / Math.log(upperBoundary)) - 25,
+//                 left: 15,
+//                 width: '25%',
+//                 borderWidth: 1,
+//                 position: geneRuler[iLeft],
+//                 tooltip: geneRuler[iLeft]
+//             });
+//             iLeft++;
+
+//         } else if (iLeft == geneRuler.length || geneRuler[iLeft] < lines[iRight].segmentLength) {
+//             fragments.push({
+//                 align: "right",
+//                 bottom: (boxHeight * Math.log(lines[iRight].segmentLength) / Math.log(upperBoundary)) - 25,
+//                 left: 75,
+//                 width: '75%',
+//                 borderWidth: lineWidth,
+//                 position: lines[iRight].segmentLength,
+//                 tooltip: lines[iRight].segmentLength + ' : ' + lines[iRight].enzyme1 + ' .. ' + lines[iRight].enzyme2
+//             });
+//             fragmentsNum++;
+//             iRight++;
+
+//         } else {
+//             console.warn("error getting digest fragments");
+//             break;
+//         }
+//     }
+
+//     state.set('fragmentsNum', fragmentsNum);
+//     state.set('fragments', fragments);
+// };

package/createMergedDefaultStateReducer.js

@@ -0,0 +1,30 @@
+import { createReducer } from "redux-act";
+//simple wrapper function around createReducer to keep around the default state if type === VECTOR_EDITOR_UPDATE or meta.mergeStateDeep=true
+// example:
+// defaultState = {features: true, parts: true}
+// newState = {features: false}
+// stateToUse = {features: false, parts: true}
+// instead of
+// stateToUse = {features: false}
+// these will also be handled differently in the reducer. The __shouldUseMergedState
+// attribute will make them not clear unless full overwritten
+export default function createMergedDefaultStateReducer(
+  handlers,
+  defaultState
+) {
+  const reducer = createReducer(handlers);
+  function enhancedReducer(newState = {}, action) {
+    const stateToUse =
+      action &&
+      (action.type === "VECTOR_EDITOR_UPDATE" ||
+        (action.meta && action.meta.mergeStateDeep))
+        ? {
+            ...defaultState,
+            ...newState
+          }
+        : newState;
+    return reducer(stateToUse, action);
+  }
+  enhancedReducer.__shouldUseMergedState = true;
+  return enhancedReducer;
+}

package/createMetaAction.js

@@ -0,0 +1,12 @@
+import { createAction } from "redux-act";
+
+//this makes it so we can call our actionCreator like:
+//addFeature(myFeatureData, {editorName})
+export default function createMetaAction(actionName, payloadHelper) {
+  return createAction(actionName, payloadHelper, function (unused, meta) {
+    return {
+      ...meta,
+      editorName: meta.editorName
+    };
+  });
+}

package/createSequenceInputPopup.js

@@ -0,0 +1,290 @@
+import { render, unmountComponentAtNode, findDOMNode } from "react-dom";
+
+import { getRangeLength } from "@teselagen/range-utils";
+// import Tether from "tether";
+import Popper from "popper.js";
+
+import {
+  getInsertBetweenVals,
+  convertDnaCaretPositionOrRangeToAA,
+  filterSequenceString
+} from "@teselagen/sequence-utils";
+import React from "react";
+import { divideBy3 } from "../utils/proteinUtils";
+import "./createSequenceInputPopupStyle.css";
+import { Classes } from "@blueprintjs/core";
+import { getNodeToRefocus } from "../utils/editorUtils";
+import { noop } from "lodash-es";
+
+let div;
+
+class SequenceInputNoHotkeys extends React.Component {
+  state = {
+    charsToInsert: "",
+    hasTempError: false
+  };
+  componentDidMount() {
+    document.addEventListener(
+      "mousedown",
+      this.handleUnmountIfClickOustidePopup
+    );
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      "mousedown",
+      this.handleUnmountIfClickOustidePopup
+    );
+  }
+  handleUnmountIfClickOustidePopup = e => {
+    const n = findDOMNode(this);
+    if (!n) return;
+    const node = n.parentNode;
+    if (!node) return;
+    if (node.contains(e.target)) {
+      return;
+    }
+    this.handleUnmount();
+  };
+  handleUnmount = () => {
+    setTimeout(() => {
+      const n = findDOMNode(this);
+      if (!n) return;
+      const node = n.parentNode;
+      if (!node) return;
+      unmountComponentAtNode(node);
+      this.props.nodeToReFocus && this.props.nodeToReFocus.focus();
+      document.getElementById("sequenceInputBubble").outerHTML = "";
+    });
+  };
+  handleInsert() {
+    const { handleInsert = noop, isProtein } = this.props;
+    const { charsToInsert } = this.state;
+    if (!charsToInsert.length) {
+      return;
+    }
+    const seqToInsert = isProtein
+      ? {
+          proteinSequence: charsToInsert
+        }
+      : {
+          sequence: charsToInsert
+        };
+    handleInsert(seqToInsert);
+  }
+  render() {
+    const {
+      isReplace,
+      selectionLayer,
+      sequenceLength,
+      isProtein,
+      caretPosition,
+      sequenceData,
+      maxInsertSize
+    } = this.props;
+    const { charsToInsert, hasTempError } = this.state;
+
+    let message;
+    if (isReplace) {
+      const betweenVals = getInsertBetweenVals(
+        -1,
+        selectionLayer,
+        sequenceLength
+      );
+
+      message = (
+        <span>
+          Press <span style={{ fontWeight: "bolder" }}>ENTER</span> to replace{" "}
+          {divideBy3(getRangeLength(selectionLayer, sequenceLength), isProtein)}{" "}
+          {isProtein ? "AAs" : "base pairs"} between{" "}
+          {isProtein
+            ? convertDnaCaretPositionOrRangeToAA(betweenVals[0])
+            : betweenVals[0]}{" "}
+          and{" "}
+          {isProtein
+            ? convertDnaCaretPositionOrRangeToAA(betweenVals[1] + 2)
+            : betweenVals[1]}
+        </span>
+      );
+    } else {
+      message = (
+        <span>
+          Press <span style={{ fontWeight: "bolder" }}>ENTER</span> to insert{" "}
+          {charsToInsert.length} {isProtein ? "AAs" : "base pairs"} after{" "}
+          {isProtein ? "AA" : "base"}{" "}
+          {isProtein
+            ? convertDnaCaretPositionOrRangeToAA(caretPosition)
+            : caretPosition}
+        </span>
+      );
+    }
+    return (
+      <div className="sequenceInputBubble">
+        <input
+          autoCorrect="off"
+          onKeyDown={e => {
+            if (e.keyCode === 27) {
+              this.handleUnmount();
+            }
+            if (e.keyCode === 13) {
+              this.handleInsert();
+              this.handleUnmount();
+            }
+          }}
+          className={Classes.INPUT}
+          value={charsToInsert}
+          autoFocus
+          style={hasTempError ? { borderColor: "red" } : {}}
+          onChange={e => {
+            const [sanitizedVal, warnings] = filterSequenceString(
+              e.target.value,
+              {
+                ...sequenceData,
+                name: undefined
+              }
+            );
+            if (warnings.length) {
+              this.setState({
+                hasTempError: true
+              });
+              setTimeout(() => {
+                this.setState({
+                  hasTempError: false
+                });
+              }, 200);
+            }
+            if (maxInsertSize && sanitizedVal.lenth > maxInsertSize) {
+              return window.toastr.error(
+                "Sorry, your insert is greater than ",
+                maxInsertSize
+              );
+            }
+            e.target.value = sanitizedVal;
+            this.setState({ charsToInsert: sanitizedVal });
+          }}
+        />
+        <div style={{ marginTop: 10 }}>{message}</div>
+        <div style={{ marginTop: 10 }}>
+          Press <span style={{ fontWeight: "bolder" }}>ESC</span> to{" "}
+          <button className="link-button" onClick={this.handleUnmount}>
+            cancel
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default function createSequenceInputPopup(props) {
+  const { useEventPositioning } = props;
+
+  let caretEl;
+  if (useEventPositioning) {
+    //we have to make a fake event here so that popper.js will position on the page correctly
+    const { e, nodeToReFocus } = useEventPositioning;
+    // e.persist();
+    const top = e.clientY;
+    const right = e.clientX;
+    const bottom = e.clientY;
+    const left = e.clientX;
+    caretEl = {
+      nodeToRefocus: nodeToReFocus,
+      getBoundingClientRect: () => ({
+        top,
+        right,
+        bottom,
+        left
+      }),
+      clientWidth: 0,
+      clientHeight: 0
+    };
+  }
+
+  if (!caretEl || !caretEl === 0 || !isElementInViewport(caretEl)) {
+    const activeEl = getActiveElement();
+    if (activeEl) {
+      caretEl = activeEl.querySelector(".veCaret");
+    }
+  }
+  if (!caretEl || !caretEl === 0 || !isElementInViewport(caretEl)) {
+    caretEl = getActiveElement();
+  }
+  if (!caretEl || !caretEl === 0 || !isElementInViewport(caretEl)) {
+    caretEl = document.querySelector(".veCaret");
+  }
+  if (document.body.classList.contains("sequenceDragging")) {
+    window.toastr.warning("Can't insert new sequence while dragging");
+    //don't allow this
+    return;
+  }
+
+  // function closeInput() {
+  //   sequenceInputBubble.remove();
+  // }
+  div = document.createElement("div");
+  div.style.zIndex = "400000";
+  div.id = "sequenceInputBubble";
+  document.body.appendChild(div);
+
+  const innerEl = (
+    <SequenceInputNoHotkeys
+      nodeToReFocus={caretEl.nodeToRefocus || getNodeToRefocus(caretEl)}
+      {...props}
+    />
+  );
+
+  render(innerEl, div);
+
+  if (!caretEl) {
+    return console.error(
+      "there must be a caret element present in order to display the insertSequence popup"
+    );
+  }
+
+  new Popper(caretEl, div, {
+    placement: "bottom",
+    modifiers: {
+      offset: { offset: "94" }
+    }
+  });
+}
+
+const getActiveElement = function (document) {
+  document = document || window.document;
+
+  // Check if the active element is in the main web or iframe
+  if (
+    document.body === document.activeElement ||
+    /* eslint-disable eqeqeq*/
+
+    document.activeElement.tagName == "IFRAME"
+    /* eslint-enable eqeqeq*/
+  ) {
+    // Get iframes
+    const iframes = document.getElementsByTagName("iframe");
+    for (let i = 0; i < iframes.length; i++) {
+      // Recall
+      const focused = getActiveElement(iframes[i].contentWindow.document);
+      if (focused !== false) {
+        return focused; // The focused
+      }
+    }
+  } else return document.activeElement;
+
+  return false;
+};
+
+function isElementInViewport(el) {
+  const rect = el.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight ||
+        document.documentElement.clientHeight) /*or $(window).height() */ &&
+    rect.right <=
+      (window.innerWidth ||
+        document.documentElement.clientWidth) /*or $(window).width() */
+  );
+}

package/createSequenceInputPopupStyle.css

@@ -0,0 +1,87 @@
+.insertReplaceButton {
+  width: 140px;
+}
+
+.insertInputBubble {
+  height: 140px !important;
+}
+
+.borderRed {
+  box-shadow: 0 0 5px red !important;
+  outline: none;
+  border: 1px solid red !important;
+}
+
+.sequenceInputBubble {
+  position: relative;
+  width: 230px;
+  padding: 8px;
+  font-size: 14px;
+  background: #e9e9e9;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.3);
+}
+
+.sequenceInputBubble.tether-out-of-bounds-right {
+  position: relative;
+  padding: 8px;
+  background: #e9e9e9;
+  margin-left: -165px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.3);
+}
+
+.sequenceInputBubble.tether-element-attached-bottom {
+  margin-top: -28px;
+}
+
+.sequenceInputBubble:after {
+  content: "";
+  position: absolute;
+  border-style: solid;
+  border-color: #e9e9e9 transparent;
+  display: block;
+  width: 0;
+  left: 9px;
+  border-width: 0 13px 12px;
+  top: -12px;
+}
+
+.sequenceInputBubble.tether-element-attached-bottom:after {
+  border-width: 12px 13px 0;
+  top: 100%;
+}
+
+.sequenceInputBubble.tether-out-of-bounds-right:after {
+  left: 76%;
+}
+
+.sequenceInputBubble.tether-out-of-bounds-top,
+.sequenceInputBubble.tether-out-of-bounds-bottom {
+  display: none;
+}
+
+.sequenceInputBubble input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px;
+  border: solid 1px #dcdcdc;
+  transition:
+    box-shadow 0.3s,
+    border 0.3s;
+}
+
+.sequenceInputBubble input:focus,
+.sequenceInputBubble input.focus {
+  border: solid 1px #1585c5;
+}
+.bp3-dark .sequenceInputBubble {
+  background: #394b59;
+}
+.bp3-dark .sequenceInputBubble:after {
+  border-color: #394b59 transparent;
+}

package/createSimpleDialog.js

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { reduxForm } from "redux-form";
+import { startCase } from "lodash-es";
+import { withProps } from "recompose";
+import { InputField, wrapDialog } from "@teselagen/ui";
+import { compose } from "redux";
+import { Button, Intent, Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./simpleDialog.css";
+import { tryToRefocusEditor } from "../utils/editorUtils";
+
+// TODO: move to TRC
+class SimpleGenericDialogForm extends React.Component {
+  render() {
+    const {
+      hideModal,
+      handleSubmit,
+      fields,
+      buttonText = "OK",
+      showCancel = true,
+      onSubmit,
+      invalid,
+      extraProps = {}
+    } = this.props;
+    return (
+      <form
+        onSubmit={handleSubmit(data => {
+          if (onSubmit) onSubmit(data);
+          hideModal();
+          tryToRefocusEditor();
+        })}
+        className={classNames(
+          Classes.DIALOG_BODY,
+          "tg-min-width-dialog simple-dialog"
+        )}
+      >
+        {fields.map((field, i) => {
+          const { component, isRequired, ...props } = field;
+          const FieldComp = component || InputField;
+          const fieldProps = {
+            autoFocus: i === 0,
+            ...props,
+            ...extraProps[props.name]
+          };
+          fieldProps.label =
+            fieldProps.label || startCase(fieldProps.name) + ":";
+          if (isRequired) fieldProps.validate = required;
+          return <FieldComp key={field.name} {...fieldProps} />;
+        })}
+        <div className="dialog-buttons">
+          {showCancel && (
+            <Button
+              onClick={() => {
+                hideModal();
+                tryToRefocusEditor();
+              }}
+              text="Cancel"
+            />
+          )}
+          <Button
+            type="submit"
+            intent={Intent.PRIMARY}
+            text={buttonText}
+            disabled={invalid}
+          />
+        </div>
+      </form>
+    );
+  }
+}
+
+function required(val) {
+  if (!val) return "Required";
+}
+
+export default function createSimpleDialog(props) {
+  return compose(
+    wrapDialog({
+      isDraggable: true,
+      width: 400,
+      ...props.withDialogProps
+    }),
+    reduxForm({
+      form: props.formName
+    }),
+    withProps(props)
+  )(SimpleGenericDialogForm);
+}

package/createYourOwnEnzyme.js

@@ -0,0 +1,39 @@
+//./selectionLayer.js
+import { createReducer, createAction } from "redux-act";
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const createYourOwnEnzymeUpdate = createAction(
+  "CREATE_YOUR_OWN_ENZYME_UPDATE"
+);
+export const createYourOwnEnzymeReset = createAction(
+  "CREATE_YOUR_OWN_ENZYME_RESET"
+);
+export const createYourOwnEnzymeClose = createAction(
+  "CREATE_YOUR_OWN_ENZYME_CLOSE"
+);
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const initialValues = {
+  name: "Example Enzyme",
+  sequence: "ggatcc",
+  chop_top_index: 1,
+  chop_bottom_index: 5,
+  isOpen: false
+};
+export default createReducer(
+  {
+    [createYourOwnEnzymeClose]: () => {
+      return { ...initialValues, isOpen: false };
+    },
+    [createYourOwnEnzymeReset]: (state, payload = {}) => {
+      return { ...initialValues, ...payload };
+    },
+    [createYourOwnEnzymeUpdate]: (state, payload) => {
+      return payload;
+    }
+  },
+  initialValues
+);

package/cutsiteLabelColorSelector.js

@@ -0,0 +1,6 @@
+import { createSelector } from "reselect";
+import sequenceDataSelector from "./sequenceDataSelector";
+
+export default createSelector(sequenceDataSelector, function (sequenceData) {
+  return sequenceData.cutsiteLabelColors;
+});