@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/createFragmentLines.js

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

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

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

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

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

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

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

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