@teselagen/ove 0.0.13 → 0.0.15

package/src/utils/massageTickSpacing.js

@@ -0,0 +1,19 @@
+import { some } from "lodash";
+
+export function massageTickSpacing(spacing) {
+  let toRet = spacing;
+  if (spacing < 15) {
+    return 10;
+  }
+  some(
+    [20, 50, 100, 500, 1000, 2000, 5000, 10000, 50000, 100000, 1000000],
+    (val) => {
+      if (spacing < val) {
+        toRet = val;
+        return true;
+      }
+    }
+  );
+
+  return toRet;
+}

package/src/utils/onlyUpdateForKeysDeep.js

@@ -0,0 +1,31 @@
+import { pick } from "lodash";
+import { shouldUpdate } from "recompose";
+import _ from "lodash";
+
+// import deepEqual from "deep-equal";
+
+const onlyUpdateForKeys = propKeys => {
+  const hoc = shouldUpdate((props, nextProps) => {
+    const a = !isEq(pick(nextProps, propKeys), pick(props, propKeys));
+    return a;
+  });
+
+  // if (process.env.NODE_ENV !== "production") {
+  //   return BaseComponent =>
+  //     setDisplayName(wrapDisplayName(BaseComponent, "onlyUpdateForKeys"))(
+  //       hoc(BaseComponent)
+  //     );
+  // }
+  return hoc;
+};
+
+export default onlyUpdateForKeys;
+
+const isEq = (o1, o2) => {
+  const isEq = _.isEqualWith(o1, o2, function(val1, val2) {
+    if (_.isFunction(val1) && _.isFunction(val2)) {
+      return val1 === val2 || val1.toString() === val2.toString();
+    }
+  });
+  return isEq;
+};

package/src/utils/prepareRowData.js

@@ -0,0 +1,64 @@
+import { mapAnnotationsToRows } from "@teselagen/sequence-utils";
+import { annotationTypes } from "@teselagen/sequence-utils";
+export default function prepareRowData(sequenceData, bpsPerRow) {
+  const sequenceLength = sequenceData.noSequence
+    ? sequenceData.size
+    : sequenceData.sequence.length;
+  const totalRows = Math.ceil(sequenceLength / bpsPerRow) || 1; //this check makes sure there is always at least 1 row!
+  const rows = [];
+  const rowMap = {};
+  if (sequenceData.isProtein) {
+    rowMap.primaryProteinSequence = mapAnnotationsToRows(
+      [
+        {
+          id: "primaryProteinSequence",
+          forward: true,
+          start: 0,
+          end: sequenceLength - 1,
+          proteinSequence: sequenceData.proteinSequence,
+          aminoAcids: sequenceData.aminoAcidDataForEachBaseOfDNA
+        }
+      ],
+      sequenceLength,
+      bpsPerRow
+    );
+  }
+  annotationTypes.forEach(function (type) {
+    rowMap[type] = mapAnnotationsToRows(
+      sequenceData[type],
+      sequenceLength,
+      bpsPerRow,
+      { splitForwardReverse: type === "primers" }
+    );
+  });
+
+  for (let rowNumber = 0; rowNumber < totalRows; rowNumber++) {
+    const row = {};
+    row.rowNumber = rowNumber;
+    row.start = rowNumber * bpsPerRow;
+    row.end =
+      (rowNumber + 1) * bpsPerRow - 1 < sequenceLength
+        ? (rowNumber + 1) * bpsPerRow - 1
+        : sequenceLength - 1;
+    if (row.end < 0) {
+      row.end = 0;
+    }
+    annotationTypes.forEach(function (type) {
+      row[type] = rowMap[type][rowNumber] || [];
+    });
+    if (sequenceData.isProtein) {
+      row.isProtein = true;
+      row.primaryProteinSequence =
+        rowMap.primaryProteinSequence &&
+        (rowMap.primaryProteinSequence[rowNumber] || []);
+    }
+    row.sequence = sequenceData.noSequence
+      ? {
+          length: row.end + 1 - row.start
+        }
+      : sequenceData.sequence.slice(row.start, row.end + 1);
+
+    rows[rowNumber] = row;
+  }
+  return rows;
+}

package/src/utils/proteinUtils.js

@@ -0,0 +1,3 @@
+export function divideBy3(num, shouldDivideBy3) {
+  return shouldDivideBy3 ? Math.floor(num / 3) : num;
+}

package/src/utils/pureNoFunc.js

@@ -0,0 +1,18 @@
+import { shouldUpdate } from "recompose";
+import _ from "lodash";
+
+const isEq = (o1, o2) => {
+  const isEq = _.isEqualWith(o1, o2, function (val1, val2) {
+    if (_.isFunction(val1) && _.isFunction(val2)) {
+      return val1 === val2 || val1.toString() === val2.toString();
+    }
+  });
+  return isEq;
+};
+
+const pure = (BaseComponent) => {
+  const hoc = shouldUpdate((props, nextProps) => !isEq(props, nextProps));
+  return hoc(BaseComponent);
+};
+
+export default pure;

package/src/utils/selectionLayer.js

@@ -0,0 +1,25 @@
+export function getAllSelectionLayers({
+  additionalSelectionLayers = [],
+  searchLayers = [],
+  selectionLayer
+}) {
+  const selectionLayers = [
+    ...additionalSelectionLayers,
+    ...searchLayers,
+    ...(Array.isArray(selectionLayer) ? selectionLayer : [selectionLayer])
+  ];
+  const doubleWrappedColor = "#edb2f1";
+  // const doubleWrappedColor = "#abdbfb";
+
+  if (selectionLayer.overlapsSelf) {
+    selectionLayers.push({
+      start: selectionLayer.end + 1,
+      end: selectionLayer.start - 1,
+      color: selectionLayer.isWrappedAddon ? undefined : doubleWrappedColor
+    });
+    if (selectionLayer.isWrappedAddon) {
+      selectionLayer.color = doubleWrappedColor;
+    }
+  }
+  return selectionLayers;
+}

package/src/utils/shouldRerender.js

@@ -0,0 +1,27 @@
+import { pick, isEqualWith, isFunction } from "lodash";
+const shouldRerender = (propKeys, stateKeys, that) => {
+  if (!that.hasRendered) {
+    that.hasRendered = true;
+    return true;
+  }
+  const nextProps = that.props;
+  const oldProps = that.oldProps || {};
+  const a = !isEq(pick(nextProps, propKeys), pick(oldProps, propKeys));
+  that.oldProps = nextProps;
+  const nextState = that.state;
+  const oldState = that.oldState || {};
+  const b =
+    !isEq(pick(nextState, stateKeys), pick(oldState, stateKeys)) || !isEq;
+  that.oldState = nextState;
+  return a || b;
+};
+export default shouldRerender;
+
+const isEq = (o1, o2) => {
+  const isEq = isEqualWith(o1, o2, function(val1, val2) {
+    if (isFunction(val1) && isFunction(val2)) {
+      return val1 === val2 || val1.toString() === val2.toString();
+    }
+  });
+  return isEq;
+};

package/src/utils/showFileDialog.js

@@ -0,0 +1,26 @@
+// TODO maybe move to TRC or elsewhere
+let hiddenInput;
+let callback;
+
+function getInput(multiple) {
+  if (!hiddenInput) {
+    hiddenInput = document.createElement('input');
+    hiddenInput.type = 'file';
+    hiddenInput.style.position = 'absolute';
+    hiddenInput.style.visibility = 'hidden';
+    hiddenInput.addEventListener('change', event => {
+      callback(event.target.files);
+    });
+
+    document.body.appendChild(hiddenInput);
+  }
+  hiddenInput.multiple = multiple ? 'multiple' : undefined;
+  return hiddenInput;
+}
+
+
+export default function showFileDialog({ multiple = false, onSelect }) {
+  const input = getInput(multiple);
+  callback = onSelect;
+  input.click();
+}

package/src/utils/updateLabelsForInViewFeatures.js

@@ -0,0 +1,55 @@
+import {
+  isElWithinAnotherEl,
+  isElWithinAnotherElWithDiff
+} from "../withEditorInteractions/isElementInViewport";
+
+export function updateLabelsForInViewFeatures({
+  rectElement = ".veLinearView"
+} = {}) {
+  const feats = Array.from(
+    document.querySelectorAll(`.veLinearView .veRowViewFeature`)
+  );
+  const parts = Array.from(
+    document.querySelectorAll(`.veLinearView .veRowViewPart`)
+  );
+  const primers = Array.from(
+    document.querySelectorAll(`.veLinearView .veRowViewPrimer`)
+  );
+  const els = [...feats, ...parts, ...primers];
+  const boundingRect = document
+    .querySelector(rectElement)
+    .getBoundingClientRect();
+
+  els.forEach((el) => {
+    const elBounds = el.getBoundingClientRect();
+    const isElIn = isElWithinAnotherEl(elBounds, boundingRect);
+
+    if (isElIn) {
+      const label = el.querySelector(".veLabelText");
+      if (!label) return;
+      const labelBounds = label.getBoundingClientRect();
+      const [isLabelIn, diff] = isElWithinAnotherElWithDiff(labelBounds, {
+        left: Math.max(boundingRect.left, elBounds.left),
+        right: Math.min(boundingRect.right, elBounds.right)
+      });
+      if (!isLabelIn) {
+        const l = window.getComputedStyle(label, null),
+          t = l.getPropertyValue("transform");
+
+        // If t return other than "none"
+        // Split content into several value
+        // The fourth one is the translateX value
+
+        if (t !== "none") {
+          const v = t.split("(")[1],
+            // w = v.split(")")[0],
+            x = v.split(",");
+
+          const newX = Number(x[4]) + diff;
+          const newY = Number(x[5].replace(")", ""));
+          label.setAttribute("transform", `translate(${newX},${newY})`);
+        }
+      }
+    }
+  });
+}

package/src/utils/updateLabelsForInViewFeaturesCircView.js

@@ -0,0 +1,41 @@
+// import {
+//   isElWithinAnotherEl,
+//   isElWithinAnotherElWithDiff
+// } from "../withEditorInteractions/isElementInViewport";
+
+// export function updateLabelsForInViewFeaturesCircView({
+//   rectElement = ".veCircularView",
+//   radius
+// } = {}) {
+//   const feats = Array.from(
+//     document.querySelectorAll(`.veCircularView .veFeature`)
+//   );
+//   // const parts = Array.from(
+//   //   document.querySelectorAll(`.veCircularView .vePart`)
+//   // );
+//   // const primers = Array.from(
+//   //   document.querySelectorAll(`.veCircularView .vePrimer`)
+//   // );
+//   const els = [...feats];
+//   // const els = [...feats, ...parts, ...primers];
+//   const boundingRect = document
+//     .querySelector(rectElement)
+//     .getBoundingClientRect();
+//   els.forEach((el) => {
+//     // const elBounds = el.getBoundingClientRect();
+//     // const isElIn = isElWithinAnotherEl(elBounds, boundingRect);
+//     const label = el.querySelector(".veLabelText");
+//     if (!label) return;
+//     const labelBounds = label.getBoundingClientRect();
+//     const [isLabelIn, diff] = isElWithinAnotherElWithDiff(labelBounds, {
+//       left: Math.max(boundingRect.left, 0 /*  elBounds.left */),
+//       right: Math.min(boundingRect.right, 0 /*  elBounds.right */)
+//     });
+//     if (!isLabelIn) {
+//       label.setAttribute("transform", `rotate(-40)`);
+//     }
+//     // if (isElIn) {
+
+//     // }
+//   });
+// }

package/src/utils/useAAColorType.js

@@ -0,0 +1,8 @@
+import tgUseLocalStorageState from "tg-use-local-storage-state";
+
+const useAAColorType = () =>
+  tgUseLocalStorageState("aaColorType", {
+    isSimpleString: true,
+    defaultValue: "byHydrophobicity"
+  });
+export default useAAColorType;

package/src/utils/useAnnotationLimits.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { MenuItem } from "@blueprintjs/core";
+import tgUseLocalStorageState from "tg-use-local-storage-state";
+
+const useAnnotationLimits = () =>
+  tgUseLocalStorageState("annotationLimits", {
+    defaultValue: {
+      features: 50,
+      parts: 50,
+      primers: 50,
+      warnings: 50,
+      assemblyPieces: 50,
+      lineageAnnotations: 50,
+      cutsites: 100
+    }
+  });
+export default useAnnotationLimits;
+
+export function LimitAnnotations({ type, ...rest }) {
+  const [limits = {}, setLimits] = useAnnotationLimits();
+  return (
+    <MenuItem icon="blank" shouldDismissPopover={false} {...rest}>
+      {[50, 100, 200, 400].map((n) => (
+        <MenuItem
+          shouldDismissPopover={false}
+          icon={
+            (
+              !limits[type]
+                ? n === 50 //if this hasn't been set yet, default it here
+                : limits[type] === n
+            )
+              ? "small-tick"
+              : "blank"
+          }
+          key={n}
+          text={n}
+          onClick={() => setLimits({ ...limits, [type]: n })}
+        ></MenuItem>
+      ))}
+    </MenuItem>
+  );
+}

package/src/utils/useChromatogramPrefs.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { MenuItem } from "@blueprintjs/core";
+import tgUseLocalStorageState from "tg-use-local-storage-state";
+
+const useShowChromQualScores = () => {
+  return tgUseLocalStorageState("showChromQualScores", { defaultValue: true });
+};
+
+const ShowChromQualScoresMenu = () =>
+  function ShowChromQualScoresMenu(props) {
+    const [showChromQualScores, setShowChromQualScores] =
+      useShowChromQualScores();
+    return (
+      <MenuItem
+        {...props}
+        text="Show Quality Scores"
+        shouldDismissPopover={false}
+        onClick={() => {
+          setShowChromQualScores(!showChromQualScores);
+        }}
+        icon={showChromQualScores ? "small-tick" : "blank"}
+      ></MenuItem>
+    );
+  };
+const chromatogramMenu = {
+  text: "Chromatogram (Quality Scores)",
+  cmd: "showChromQualScoresMenu",
+  component: ShowChromQualScoresMenu(),
+  shouldDismissPopover: false
+};
+export { chromatogramMenu, useShowChromQualScores };

package/src/utils/useLadders.js

@@ -0,0 +1,6 @@
+import tgUseLocalStorageState from "tg-use-local-storage-state";
+
+const useLadders = () => {
+  return tgUseLocalStorageState("tg-additional-ladder", { defaultValue: [] });
+};
+export default useLadders;

package/src/utils/useMeltingTemp.js

@@ -0,0 +1,7 @@
+import tgUseLocalStorageState from "tg-use-local-storage-state";
+
+const useMeltingTemp = () => {
+  return tgUseLocalStorageState("showMeltingTemp");
+};
+
+export default useMeltingTemp;

package/src/utils/useTmType.js

@@ -0,0 +1,10 @@
+import tgUseLocalStorageState from "tg-use-local-storage-state";
+
+const useTmType = () => {
+  return tgUseLocalStorageState("tmType", {
+    isSimpleString: true,
+    defaultValue: "default"
+  });
+};
+
+export default useTmType;

package/src/withEditorInteractions/Keyboard.js

@@ -0,0 +1,86 @@
+import { noop } from "lodash";
+import React from "react";
+
+class Clipboard extends React.Component {
+  // static propTypes = {
+  //   value: PropTypes.string.isRequired
+  // };
+
+  static defaultProps = {
+    className: "clipboard"
+  };
+
+  componentDidMount() {
+    this.node.parentNode.addEventListener("keydown", this.handleKeyDown, false);
+    this.node.parentNode.addEventListener("keyup", this.handleKeyUp, false);
+  }
+
+  componentWillUnmount() {
+    this.node.parentNode.removeEventListener(
+      "keydown",
+      this.handleKeyDown,
+      false
+    );
+    this.node.parentNode.removeEventListener("keyup", this.handleKeyUp, false);
+  }
+
+  handleKeyDown = (e) => {
+    if (
+      document.activeElement &&
+      ["input", "select", "textarea"].indexOf(
+        document.activeElement.tagName.toLowerCase()
+      ) !== -1
+    ) {
+      return; //stop early if we're inside an input
+    }
+    const metaKeyIsDown = e.ctrlKey || e.metaKey;
+    if (!metaKeyIsDown || !["x", "c", "v"].includes(e.key)) {
+      this.origFocusedElement = null;
+      return;
+    }
+    this.origFocusedElement = document.activeElement;
+    this.node.select();
+  };
+
+  handleKeyUp = () => {
+    if (this.origFocusedElement) {
+      this.origFocusedElement.focus();
+    }
+  };
+
+  render() {
+    const value = this.props.value;
+    const style = {
+      position: "fixed",
+      width: 1,
+      height: 1,
+      opacity: 0,
+      left: 0,
+      padding: 0,
+      top: 0,
+      margin: 0,
+      zIndex: 100
+    };
+    return (
+      <input
+        ref={(c) => {
+          if (c) {
+            this.node = c;
+          }
+        }}
+        style={style}
+        type="text"
+        value={value}
+        onChange={noop}
+        readOnly
+        className="clipboard"
+        onPaste={this.props.onPaste}
+        onCopy={this.props.onCopy}
+        onCut={this.props.onCut}
+      />
+    );
+  }
+}
+
+export default Clipboard;
+