@teselagen/ove 0.0.13 → 0.0.15

package/src/LinearView/index.js

@@ -0,0 +1,374 @@
+import { debounce, noop, startCase } from "lodash";
+import draggableClassnames from "../constants/draggableClassnames";
+import prepareRowData from "../utils/prepareRowData";
+import React from "react";
+import Draggable from "react-draggable";
+import RowItem from "../RowItem";
+import withEditorInteractions from "../withEditorInteractions";
+import { withEditorPropsNoRedux } from "../withEditorProps";
+import "./style.css";
+import {
+  getClientX,
+  getEmptyText,
+  getParedDownWarning,
+  pareDownAnnotations
+} from "../utils/editorUtils";
+import useAnnotationLimits from "../utils/useAnnotationLimits";
+import { SequenceName } from "./SequenceName";
+import classNames from "classnames";
+import { massageTickSpacing } from "../utils/massageTickSpacing";
+import PinchHelper from "../helperComponents/PinchHelper/PinchHelper";
+
+import { updateLabelsForInViewFeatures } from "../utils/updateLabelsForInViewFeatures";
+import { VeTopRightContainer } from "../CircularView/VeTopRightContainer";
+import { ZoomLinearView } from "./ZoomLinearView";
+import {
+  editorDragged,
+  editorDragStarted,
+  editorDragStopped
+} from "../withEditorInteractions/clickAndDragUtils";
+import { store } from "@risingstack/react-easy-state";
+
+const defaultMarginWidth = 10;
+
+
+
+class _LinearView extends React.Component {
+  state = {};
+  bindOutsideChangeHelper = {};
+  getNearestCursorPositionToMouseEvent(rowData, event, callback) {
+    //loop through all the rendered rows to see if the click event lands in one of them
+    let nearestCaretPos = 0;
+    let rowDomNode = this.linearView;
+    rowDomNode = rowDomNode.querySelector(".veRowItem");
+    const boundingRowRect = rowDomNode.getBoundingClientRect();
+    const maxEnd = this.getMaxLength();
+    if (getClientX(event) - boundingRowRect.left < 0) {
+      nearestCaretPos = 0;
+    } else {
+      const clickXPositionRelativeToRowContainer =
+        getClientX(event) - boundingRowRect.left;
+      const numberOfBPsInFromRowStart = Math.floor(
+        (clickXPositionRelativeToRowContainer + this.charWidth / 2) /
+          this.charWidth
+      );
+      nearestCaretPos = numberOfBPsInFromRowStart + 0;
+      if (nearestCaretPos > maxEnd + 1) {
+        nearestCaretPos = maxEnd + 1;
+      }
+    }
+    if (this.props.sequenceData && this.props.sequenceData.isProtein) {
+      nearestCaretPos = Math.round(nearestCaretPos / 3) * 3;
+    }
+    if (maxEnd === 0) nearestCaretPos = 0;
+    const {
+      updateSelectionOrCaret,
+      caretPosition,
+      selectionLayer,
+      caretPositionUpdate,
+      selectionLayerUpdate
+    } = this.props;
+    const callbackVals = {
+      updateSelectionOrCaret,
+      caretPosition,
+      selectionLayer,
+      caretPositionUpdate,
+      selectionLayerUpdate,
+      sequenceLength: maxEnd,
+      doNotWrapOrigin: !(
+        this.props.sequenceData && this.props.sequenceData.circular
+      ),
+      event,
+      shiftHeld: event.shiftKey,
+      nearestCaretPos,
+      // caretGrabbed: event.target.className === "cursor",
+      selectionStartGrabbed: event.target.classList.contains(
+        draggableClassnames.selectionStart
+      ),
+      selectionEndGrabbed: event.target.classList.contains(
+        draggableClassnames.selectionEnd
+      )
+    };
+    callback(callbackVals);
+  }
+  getMaxLength = () => {
+    const { sequenceData = { sequence: "" }, alignmentData } = this.props;
+    const data = alignmentData || sequenceData;
+    return data.noSequence ? data.size : data.sequence.length;
+  };
+
+  getRowData = () => {
+    const {
+      limits,
+      sequenceData = { sequence: "" },
+      maxAnnotationsToDisplay
+    } = this.props;
+    // if (!isEqual(sequenceData, this.oldSeqData)) {
+    this.paredDownMessages = [];
+    const paredDownSeqData = ["parts", "features", "cutsites"].reduce(
+      (acc, type) => {
+        const nameUpper = startCase(type);
+        const maxToShow =
+          (maxAnnotationsToDisplay
+            ? maxAnnotationsToDisplay[type]
+            : limits[type]) || 50;
+        const [annotations, paredDown] = pareDownAnnotations(
+          sequenceData["filtered" + nameUpper] || sequenceData[type] || {},
+          maxToShow
+        );
+
+        if (paredDown) {
+          this.paredDownMessages.push(
+            getParedDownWarning({
+              nameUpper,
+              isAdjustable: !maxAnnotationsToDisplay,
+              maxToShow
+            })
+          );
+        }
+        acc[type] = annotations;
+        return acc;
+      },
+      {}
+    );
+    this.rowData = prepareRowData(
+      {
+        ...sequenceData,
+        ...paredDownSeqData
+      },
+      sequenceData.sequence ? sequenceData.sequence.length : 0
+    );
+    this.oldSeqData = sequenceData;
+    // }
+    return this.rowData;
+  };
+  updateLabelsForInViewFeaturesDebounced = debounce(() => {
+    updateLabelsForInViewFeatures();
+  }, 20);
+  easyStore = store({
+    percentScrolled: 0,
+    viewportWidth: 400
+  });
+
+  render() {
+    const {
+      //currently found in props
+      sequenceData = { sequence: "" },
+      alignmentData,
+      hideName = false,
+      editorClicked = noop,
+      width = 400,
+      className,
+      tickSpacing,
+      scrollDataPassed,
+      caretPosition,
+      backgroundRightClicked = noop,
+      RowItemProps = {},
+      marginWidth = defaultMarginWidth,
+      height,
+      isInAlignment,
+      withZoomLinearView = false,
+      editorName,
+      smallSlider,
+      paddingBottom,
+      linearViewCharWidth,
+      annotationVisibilityOverrides,
+      isProtein,
+      noWarnings,
+      ...rest
+    } = this.props;
+
+    const bpsPerRow = this.getMaxLength();
+    let innerWidth = Math.max(width - marginWidth - 20, 0);
+    if (isNaN(innerWidth)) {
+      innerWidth = 0;
+    }
+    const initialCharWidth = Math.min(innerWidth / bpsPerRow, 20);
+    this.charWidth =
+      this.state.charWidthInLinearView ||
+      linearViewCharWidth ||
+      initialCharWidth;
+    const isLinViewZoomed = this.charWidth !== initialCharWidth;
+    const sequenceName = hideName ? "" : sequenceData.name || "";
+    const rowData = this.getRowData();
+    const linearZoomEnabled = bpsPerRow >= 50 && withZoomLinearView;
+    const minCharWidth = initialCharWidth;
+    const PinchHelperToUse = linearZoomEnabled ? PinchHelper : React.Fragment;
+    const pinchHandler = {
+      onPinch: ({ delta: [d] }) => {
+        if (d === 0) return;
+        this.bindOutsideChangeHelper.triggerChange(({ value, changeValue }) => {
+          // changeValue(d);
+          if (d > 0) {
+            if (value > 8) {
+              changeValue(value + 0.4);
+            } else {
+              changeValue(value + 0.2);
+            }
+          } else if (d < 0) {
+            if (value > 8) {
+              changeValue(value - 0.4);
+            } else {
+              changeValue(value - 0.2);
+            }
+          }
+        });
+        updateLabelsForInViewFeatures();
+      }
+    };
+    return (
+      <Draggable
+        enableUserSelectHack={false} //needed to prevent the input bubble from losing focus post user drag
+        bounds={{ top: 0, left: 0, right: 0, bottom: 0 }}
+        onDrag={(event) => {
+          this.getNearestCursorPositionToMouseEvent(
+            rowData,
+            event,
+            this.props.editorDragged || editorDragged
+          );
+        }}
+        onStart={(event) => {
+          this.getNearestCursorPositionToMouseEvent(
+            rowData,
+            event,
+            this.props.editorDragStarted || editorDragStarted
+          );
+        }}
+        onStop={this.props.editorDragStopped || editorDragStopped}
+      >
+        <div
+          ref={(ref) => (this.linearView = ref)}
+          className={classNames("veLinearView", className, {
+            isLinViewZoomed
+          })}
+          style={{
+            width,
+            ...(height && { height }),
+            paddingLeft: marginWidth / 2,
+            ...(paddingBottom && { paddingBottom })
+          }}
+          onContextMenu={(event) => {
+            this.getNearestCursorPositionToMouseEvent(
+              rowData,
+              event,
+              backgroundRightClicked
+            );
+          }}
+          onClick={(event) => {
+            this.getNearestCursorPositionToMouseEvent(
+              rowData,
+              event,
+              editorClicked
+            );
+          }}
+        >
+          {linearZoomEnabled && ( //so this for conditonal rendering
+            <ZoomLinearView
+              charWidth={this.charWidth}
+              bindOutsideChangeHelper={this.bindOutsideChangeHelper}
+              minCharWidth={minCharWidth}
+              smallSlider={smallSlider}
+              editorName={editorName}
+              setCharWidth={(v) => {
+                this.setState({
+                  charWidthInLinearView: v === initialCharWidth ? undefined : v
+                });
+              }}
+              afterOnChange={() => {
+                updateLabelsForInViewFeatures();
+              }}
+            ></ZoomLinearView>
+          )}
+          {!hideName && (
+            <SequenceName
+              {...{
+                isProtein,
+                sequenceName,
+                sequenceLength: sequenceData.sequence
+                  ? sequenceData.sequence.length
+                  : 0
+              }}
+            />
+          )}
+          {!noWarnings && (
+            <VeTopRightContainer>{this.paredDownMessages}</VeTopRightContainer>
+          )}
+
+          <PinchHelperToUse {...(linearZoomEnabled && pinchHandler)}>
+            <RowItem
+              {...{
+                ...rest,
+                editorName,
+                onScroll: () => {
+                  this.easyStore.viewportWidth = width;
+                  const row =
+                    this.linearView.querySelector(".veRowItemWrapper");
+                  const scrollPercentage =
+                    row.scrollLeft / (row.scrollWidth - row.clientWidth);
+                  this.easyStore.percentScrolled = scrollPercentage;
+                  updateLabelsForInViewFeatures();
+                },
+                rowContainerStyle: {
+                  height: height - 36,
+                  width: innerWidth + 26,
+                  paddingRight: marginWidth / 2,
+                  ...(isLinViewZoomed &&
+                    !isInAlignment && { paddingBottom: 15 })
+                },
+                charWidth: this.charWidth,
+                scrollData:
+                  scrollDataPassed ||
+                  (isLinViewZoomed ? this.easyStore : undefined),
+                caretPosition,
+                isProtein: sequenceData.isProtein,
+                alignmentData,
+                sequenceLength: this.getMaxLength(),
+                bpsPerRow,
+                fullSequence: sequenceData.sequence,
+                emptyText: getEmptyText({ sequenceData, caretPosition }),
+                tickSpacing:
+                  tickSpacing ||
+                  (isLinViewZoomed
+                    ? massageTickSpacing(Math.ceil(120 / this.charWidth))
+                    : Math.floor(
+                        this.getMaxLength() / (sequenceData.isProtein ? 9 : 10)
+                      )),
+                annotationVisibility: {
+                  ...rest.annotationVisibility,
+                  ...((!isLinViewZoomed || this.charWidth < 5) && {
+                    translations: false,
+                    primaryProteinSequence: false,
+                    reverseSequence: false,
+                    sequence: false,
+                    cutsitesInSequence: false
+                  }),
+                  ...annotationVisibilityOverrides
+                },
+                ...RowItemProps
+              }}
+              row={rowData[0]}
+              isLinearView
+            />
+          </PinchHelperToUse>
+        </div>
+      </Draggable>
+    );
+  }
+}
+
+const WithAnnotationLimitsHoc = (Component) => (props) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [limits = {}] = useAnnotationLimits();
+  return <Component limits={limits} {...props}></Component>;
+};
+export const LinearView = WithAnnotationLimitsHoc(_LinearView);
+
+export const NonReduxEnhancedLinearView = withEditorPropsNoRedux(LinearView);
+
+export default withEditorInteractions(LinearView);
+
+export const scrollToCaret = () => {
+  const el = window.document.querySelector(".veLinearView .veRowViewCaret");
+  if (!el) return;
+  el.scrollIntoView({ inline: "center", block: "nearest" });
+};

package/src/LinearView/style.css

@@ -0,0 +1,12 @@
+.veLinearView .veRowItemWrapper {
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+}
+
+/* .tg-pinch-helper {
+  touch-action: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  user-select: none;
+} */

package/src/ManageEnzymes/index.js

@@ -0,0 +1,326 @@
+import { connect } from "react-redux";
+// import {reduxForm, Field, formValueSelector} from 'redux-form'
+import React from "react";
+import { DialogFooter, InfoHelper } 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";
+
+let CreateCustomEnzyme = function (props) {
+  const paddingStart = "-------";
+  const paddingEnd = "-------";
+  const {
+    // filteredRestrictionEnzymesAdd,
+    // addRestrictionEnzyme,
+    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>
+  );
+};
+
+CreateCustomEnzyme = compose(
+  connectToEditor(({ sequenceData = {} }) => {
+    return {
+      seqName: sequenceData.name,
+      inputSequenceToTestAgainst: sequenceData.sequence || ""
+    };
+  }),
+  connect(function (state) {
+    return {
+      createYourOwnEnzyme:
+        state.VectorEditor.__allEditorsOptions.createYourOwnEnzyme
+    };
+  })
+)(CreateCustomEnzyme);
+
+export default 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;
+}
+
+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, type, label, onInput}) {
+// return <Field name={name} label={label} type={type} onInput={onInput} component={RenderInput} >
+// </Field>
+// }
+
+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>;
+}