@teselagen/ove 0.7.27 → 0.7.28

package/EditCaretPosition.js

@@ -0,0 +1,234 @@
+/* eslint-disable no-var */
+const EditCaretPositioning = {};
+
+export default EditCaretPositioning;
+
+if (window.getSelection && document.createRange) {
+  //saves caret position(s)
+  EditCaretPositioning.saveSelection = function (containerEl) {
+    var range = window.getSelection().getRangeAt(0);
+    var preSelectionRange = range.cloneRange();
+    preSelectionRange.selectNodeContents(containerEl);
+    preSelectionRange.setEnd(range.startContainer, range.startOffset);
+    var start = preSelectionRange.toString().length;
+
+    return {
+      start: start,
+      end: start + range.toString().length
+    };
+  };
+  //restores caret position(s)
+  EditCaretPositioning.restoreSelection = function (containerEl, savedSel) {
+    var charIndex = 0,
+      range = document.createRange();
+    range.setStart(containerEl, 0);
+    range.collapse(true);
+    var nodeStack = [containerEl],
+      node,
+      foundStart = false,
+      stop = false;
+
+    while (!stop && (node = nodeStack.pop())) {
+      if (node.nodeType === 3) {
+        var nextCharIndex = charIndex + node.length;
+        if (
+          !foundStart &&
+          savedSel.start >= charIndex &&
+          savedSel.start <= nextCharIndex
+        ) {
+          range.setStart(node, savedSel.start - charIndex);
+          foundStart = true;
+        }
+        if (
+          foundStart &&
+          savedSel.end >= charIndex &&
+          savedSel.end <= nextCharIndex
+        ) {
+          range.setEnd(node, savedSel.end - charIndex);
+          stop = true;
+        }
+        charIndex = nextCharIndex;
+      } else {
+        var i = node.childNodes.length;
+        while (i--) {
+          nodeStack.push(node.childNodes[i]);
+        }
+      }
+    }
+
+    var sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+  };
+} else if (document.selection && document.body.createTextRange) {
+  //saves caret position(s)
+  EditCaretPositioning.saveSelection = function (containerEl) {
+    var selectedTextRange = document.selection.createRange();
+    var preSelectionTextRange = document.body.createTextRange();
+    preSelectionTextRange.moveToElementText(containerEl);
+    preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
+    var start = preSelectionTextRange.text.length;
+
+    return {
+      start: start,
+      end: start + selectedTextRange.text.length
+    };
+  };
+  //restores caret position(s)
+  EditCaretPositioning.restoreSelection = function (containerEl, savedSel) {
+    var textRange = document.body.createTextRange();
+    textRange.moveToElementText(containerEl);
+    textRange.collapse(true);
+    textRange.moveEnd("character", savedSel.end);
+    textRange.moveStart("character", savedSel.start);
+    textRange.select();
+  };
+}
+
+// getCaretPosition: return [start, end] as offsets to elem.textContent that
+//   correspond to the selected portion of text
+//   (if start == end, caret is at given position and no text is selected)
+
+// export function getCaretPosition(elem) {
+//   const sel = window.getSelection();
+//   let cum_length = [0, 0];
+
+//   if (sel.anchorNode == elem) cum_length = [sel.anchorOffset, sel.extentOffset];
+//   else {
+//     const nodes_to_find = [sel.anchorNode, sel.extentNode];
+//     if (!elem.contains(sel.anchorNode) || !elem.contains(sel.extentNode))
+//       return undefined;
+//     else {
+//       const found = [0, 0];
+//       let i;
+//       node_walk(elem, function (node) {
+//         for (i = 0; i < 2; i++) {
+//           if (node == nodes_to_find[i]) {
+//             found[i] = true;
+//             if (found[i == 0 ? 1 : 0]) return false; // all done
+//           }
+//         }
+
+//         if (node.textContent && !node.firstChild) {
+//           for (i = 0; i < 2; i++) {
+//             if (!found[i]) cum_length[i] += node.textContent.length;
+//           }
+//         }
+//       });
+//       cum_length[0] += sel.anchorOffset;
+//       cum_length[1] += sel.extentOffset;
+//     }
+//   }
+//   if (cum_length[0] <= cum_length[1]) return cum_length;
+//   return [cum_length[1], cum_length[0]];
+// }
+
+// no operation
+const noop = () => null;
+
+/**
+ * @function
+ * @description
+ * @param  {DOMElement} container The container in which the cursor position must be saved
+ * @return {Function}             A function used to restore caret position
+ */
+export function selectionSaveCaretPosition(container) {
+  const selection = window.getSelection();
+
+  if (!selection || selection.rangeCount === 0) {
+    return noop;
+  }
+
+  const range = selection.getRangeAt(0);
+  const clone = range.cloneRange();
+
+  // find the range start index
+  clone.selectNodeContents(container);
+  clone.setStart(container, 0);
+  clone.setEnd(range.startContainer, range.startOffset);
+  const startIndex = clone.toString().length;
+
+  // find the range end index
+  clone.selectNodeContents(container);
+  clone.setStart(container, 0);
+  clone.setEnd(range.endContainer, range.endOffset);
+  const endIndex = clone.toString().length;
+
+  return function restoreCaretPosition() {
+    const start = getTextNodeAtPosition(container, startIndex);
+    const end = getTextNodeAtPosition(container, endIndex);
+    const newRange = new Range();
+
+    newRange.setStart(start.node, start.position);
+    newRange.setEnd(end.node, end.position);
+
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+    container.focus();
+  };
+}
+
+/**
+ * @function
+ * @description This function is used to determine the text node and it's index within
+ * a "root" DOM element.
+ *
+ * @param  {DOMElement} rootEl The root
+ * @param  {Integer} index     The index within the root element of which you want to find the text node
+ * @return {Object}            An object that contains the text node, and the index within that text node
+ */
+function getTextNodeAtPosition(rootEl, index) {
+  const treeWalker = document.createTreeWalker(
+    rootEl,
+    NodeFilter.SHOW_TEXT,
+    function next(elem) {
+      if (index > elem.textContent.length) {
+        index -= elem.textContent.length;
+        return NodeFilter.FILTER_REJECT;
+      }
+      return NodeFilter.FILTER_ACCEPT;
+    }
+  );
+  const node = treeWalker.nextNode();
+
+  return {
+    node: node ? node : rootEl,
+    position: node ? index : 0
+  };
+}
+
+// node_walk: walk the element tree, stop when func(node) returns false
+// function node_walk(node, func) {
+//   let result = func(node);
+//   for (
+//     node = node.firstChild;
+//     result !== false && node;
+//     node = node.nextSibling
+//   )
+//     result = node_walk(node, func);
+//   return result;
+// }
+
+// const charpos = getCaretPosition(inputRef.current);
+
+// let isChangeCloserToEnd;
+// if (charpos && charpos[0]) {
+//   if (charpos[0] > newVal.length - charpos[0]) {
+//     isChangeCloserToEnd = true;
+//   }
+// }
+// if (forward && !isChangeCloserToEnd) {
+//   if (end || end === 0) {
+//     change(
+//       "start",
+//       normalizePositionByRangeLength(end - textLength + 1, seqLen)
+//     );
+//   }
+// } else {
+//   if (start || start === 0) {
+//     change(
+//       "end",
+//       normalizePositionByRangeLength(start + textLength - 1, seqLen)
+//     );
+//   }
+// }

package/EditTrackNameDialog.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { DialogFooter, InputField, wrapDialog } from "@teselagen/ui";
+import { compose } from "recompose";
+import { reduxForm } from "redux-form";
+
+export const EditTrackNameDialog = compose(
+  wrapDialog({
+    title: "Edit Track Name"
+  }),
+  reduxForm({ form: "EditTrackNameDialog" })
+)(function ({ handleSubmit, updateName, hideModal }) {
+  return (
+    <div>
+      <div className="bp3-dialog-body">
+        <InputField
+          autoFocus
+          label="New Name"
+          isRequired
+          name="name"
+        ></InputField>
+      </div>
+      <DialogFooter
+        onClick={handleSubmit(async ({ name }) => {
+          await updateName({ newName: name });
+          hideModal();
+        })}
+      ></DialogFooter>
+    </div>
+  );
+});

package/Feature.js

@@ -0,0 +1,83 @@
+import { startsWith } from "lodash-es";
+import React from "react";
+
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+import { getInternalLabel } from "./getInternalLabel";
+import shouldFlipText from "./shouldFlipText";
+
+export default function Feature(props) {
+  const {
+    color = "orange",
+    radius,
+    containsLocations,
+    arrowheadLength = 0.5,
+    annotationHeight,
+    className,
+    ellipsizedName,
+    annotationType,
+    arrowheadType,
+    overlapsSelf,
+    rotationRadians,
+    centerAngle,
+    totalAngle,
+    locationNumber
+  } = props;
+  const isPart = annotationType === "part";
+  let colorToUse = color;
+  if (isPart) {
+    colorToUse = startsWith(color, "override_")
+      ? color.replace("override_", "")
+      : "#ac68cc";
+  }
+  const labelNeedsFlip = shouldFlipText(centerAngle + rotationRadians);
+  if (containsLocations) {
+    const path = drawDirectedPiePiece({
+      radius: radius,
+      labelNeedsFlip,
+      annotationHeight: annotationHeight / 8,
+      totalAngle,
+      arrowheadLength: 80 / radius,
+      tailThickness: 1 //feature specific
+    });
+    return (
+      <path
+        className={className}
+        strokeWidth=".5"
+        stroke="black"
+        fill={colorToUse}
+        d={path.print()}
+      />
+    );
+  }
+  const [path, textPath] = drawDirectedPiePiece({
+    returnTextPath: true,
+    overlapsSelf,
+    arrowheadType,
+    hasLabel: ellipsizedName,
+    labelNeedsFlip,
+    radius,
+    annotationHeight,
+    totalAngle,
+    arrowheadLength,
+    tailThickness: 1 //feature specific
+  });
+
+  return (
+    <>
+      <path
+        className={className}
+        strokeWidth=".5"
+        stroke={isPart ? colorToUse : "black"}
+        fill={isPart ? undefined : colorToUse}
+        d={path.print()}
+      />
+      {getInternalLabel({
+        ...props,
+        colorToUse,
+        textPath,
+        isPart,
+        locationNumber
+      })}
+    </>
+  );
+}

package/FeatureProperties.js

@@ -0,0 +1,6 @@
+import { featuresSubmenu } from "../../MenuBar/viewSubmenu";
+import genericAnnotationProperties from "./GenericAnnotationProperties";
+export default genericAnnotationProperties({
+  visSubmenu: featuresSubmenu,
+  annotationType: "feature"
+});

package/FillWindow.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { debounce } from "lodash-es";
+
+export default class FillWindow extends React.Component {
+  updateDimensions = debounce(() => {
+    if (this.props.disabled) return;
+    this.setState({ randomRerenderTrigger: Math.random() });
+  }, 100);
+
+  componentDidMount() {
+    window.addEventListener("resize", this.updateDimensions);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateDimensions);
+  }
+  render() {
+    const w = window,
+      d = document,
+      e = d.documentElement,
+      g = d.getElementsByTagName("body")[0],
+      width = w.innerWidth || e.clientWidth || g.clientWidth,
+      height = w.innerHeight || e.clientHeight || g.clientHeight;
+    const windowDimensions = {
+      width,
+      height
+    };
+    const { children, disabled, style, ...rest } = this.props;
+    if (disabled) return children(windowDimensions);
+    return (
+      <div
+        {...rest}
+        style={{
+          zIndex: 10,
+          width,
+          height,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          background: "white",
+          ...style
+        }}
+      >
+        {children(windowDimensions)}
+      </div>
+    );
+  }
+}

package/GenbankView.js

@@ -0,0 +1,74 @@
+import React from "react";
+// import { Button } from "@blueprintjs/core";
+import {
+  jsonToGenbank,
+  jsonToFasta,
+  cleanUpTeselagenJsonForExport
+} from "@teselagen/bio-parsers";
+import { HTMLSelect } from "@blueprintjs/core";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+
+class GenbankView extends React.Component {
+  state = {
+    fileTypeToView: "genbank"
+  };
+  select = () => this._input?.select();
+  render() {
+    const { sequenceData = {} } = this.props;
+    let filestring;
+    switch (this.state.fileTypeToView) {
+      case "fasta":
+        filestring = jsonToFasta(sequenceData);
+        break;
+      case "teselagen":
+        filestring = JSON.stringify(
+          cleanUpTeselagenJsonForExport(sequenceData),
+          null,
+          4
+        );
+        break;
+      default:
+        filestring = jsonToGenbank(sequenceData);
+    }
+
+    return (
+      <>
+        <HTMLSelect
+          className="genbankFileView-type"
+          fill={false}
+          options={[
+            { label: "Genbank", value: "genbank" },
+            { label: "Fasta", value: "fasta" },
+            { label: "Teselagen JSON", value: "teselagen" }
+          ]}
+          onChange={e => {
+            this.setState({ fileTypeToView: e.target.value });
+          }}
+        />
+        <textarea
+          data-test="ve-genbank-text"
+          readOnly
+          onClick={this.select}
+          style={{
+            whiteSpace: "pre",
+            overflowWrap: "normal",
+            overflowX: "scroll",
+            fontSize: 11,
+            fontFamily: "monospace",
+            height: 350
+          }}
+          value={filestring}
+        />
+      </>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor(({ sequenceData = {} }) => {
+    return {
+      sequenceData
+    };
+  })
+)(GenbankView);

package/GeneralProperties.js

@@ -0,0 +1,117 @@
+import React from "react";
+import { InputField, TextareaField } from "@teselagen/ui";
+import { reduxForm } from "redux-form";
+import withEditorProps from "../../withEditorProps";
+import { compose } from "recompose";
+import {
+  EditAvailabilityItem,
+  EditCircularityItem,
+  EditReadOnlyItem
+} from "../../StatusBar";
+
+class GeneralProperties extends React.Component {
+  updateSeqDesc = val => {
+    return this.props.sequenceDescriptionUpdate(val);
+  };
+  render() {
+    const {
+      readOnly,
+      showReadOnly = true,
+      isProtein,
+      disableSetReadOnly,
+      sequenceData,
+      onSave,
+      showAvailability,
+      beforeReadOnlyChange,
+      editorName,
+      disableBpEditing,
+      sequenceNameUpdate
+    } = this.props;
+    const {
+      description,
+      name,
+      isOligo,
+      isRna,
+      sequence = "",
+      proteinSequence = ""
+    } = sequenceData || {};
+    return (
+      <React.Fragment>
+        <div className="ve-flex-row">
+          <div className="ve-column-left bp3-label">Name</div>{" "}
+          <div className="ve-column-right">
+            <InputField
+              disabled={readOnly}
+              onFieldSubmit={val => {
+                sequenceNameUpdate(val);
+              }}
+              name="name"
+              enableReinitialize
+              defaultValue={name}
+            />{" "}
+          </div>
+        </div>
+
+        {!isProtein && !isOligo && !isRna && (
+          <div className="ve-flex-row circularLinearSelect">
+            <div className="ve-column-left bp3-label">Circular/Linear</div>{" "}
+            <div className="ve-column-right">
+              {" "}
+              <EditCircularityItem editorName={editorName} showCircularity />
+            </div>
+          </div>
+        )}
+
+        {showAvailability && (
+          <div className="ve-flex-row">
+            <div className="ve-column-left bp3-label">
+              Material Availability
+            </div>{" "}
+            <div className="ve-column-right">
+              {" "}
+              <EditAvailabilityItem editorName={editorName} showAvailability />
+            </div>
+          </div>
+        )}
+        <div className="ve-flex-row">
+          <div className="ve-column-left bp3-label">Length</div>{" "}
+          <div className="ve-column-right">
+            {" "}
+            {isProtein ? proteinSequence.length : sequence.length}
+          </div>
+        </div>
+        {showReadOnly && (
+          <div className="ve-flex-row">
+            <div className="ve-column-left bp3-label">Is Editable</div>{" "}
+            <div className="ve-column-right">
+              {" "}
+              <EditReadOnlyItem
+                beforeReadOnlyChange={beforeReadOnlyChange}
+                editorName={editorName}
+                onSave={onSave}
+                disableBpEditing={disableBpEditing}
+                disableSetReadOnly={disableSetReadOnly}
+                showReadOnly={showReadOnly}
+              />
+            </div>
+          </div>
+        )}
+        <div>Description</div>
+        <TextareaField
+          clickToEdit
+          name="description"
+          onFieldSubmit={this.updateSeqDesc}
+          defaultValue={description}
+          disabled={readOnly}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+export default compose(
+  withEditorProps,
+  reduxForm({
+    form: "GeneralProperties"
+  })
+)(GeneralProperties);