@teselagen/ove 0.0.14 → 0.0.16

package/src/helperComponents/AddOrEditAnnotationDialog/style.css

@@ -0,0 +1,11 @@
+.addAnnNoteKey {
+  margin-top: 5px;
+  margin-right: 10px;
+  max-width: 110px;
+  min-width: 70px;
+}
+.addAnnNoteValue {
+  margin-top: 5px;
+  max-width: 200px;
+  min-width: 150px;
+}

package/src/helperComponents/AddOrEditFeatureDialog/index.js

@@ -0,0 +1,58 @@
+import React from "react";
+import {
+  getFeatureToColorMap,
+  getFeatureTypes
+} from "@teselagen/sequence-utils";
+
+import AddOrEditAnnotationDialog from "../AddOrEditAnnotationDialog";
+import { ReactSelectField } from "@teselagen/ui";
+
+const renderTypes = ({ readOnly }) => (
+  <ReactSelectField
+    inlineLabel
+    tooltipError
+    disabled={readOnly}
+    defaultValue="misc_feature"
+    options={getFeatureTypes().map((type) => {
+      return {
+        label: (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              marginRight: 10
+            }}
+          >
+            <div
+              style={{
+                background: getFeatureToColorMap({ includeHidden: true })[type],
+                height: 15,
+                width: 15,
+                marginRight: 5
+              }}
+            />
+            {type}
+          </div>
+        ),
+        value: type
+      };
+    })}
+    name="type"
+    label="Type"
+  />
+);
+
+export default AddOrEditAnnotationDialog({
+  formName: "AddOrEditFeatureDialog",
+  dialogProps: {
+    // height: 500,
+    width: 400
+  },
+  getProps: (props) => ({
+    upsertAnnotation: props.upsertFeature,
+    // renderLocations: true, //tnw enable this eventually for proteins
+    renderLocations: !props.sequenceData.isProtein,
+    renderTypes: renderTypes({ readOnly: props.readOnly }),
+    annotationTypePlural: "features"
+  })
+});

package/src/helperComponents/AddOrEditPartDialog/index.js

@@ -0,0 +1,101 @@
+import React from "react";
+import AddOrEditAnnotationDialog from "../AddOrEditAnnotationDialog";
+import {
+  ReactSelectField,
+  getTagsAndTagOptions,
+  CheckboxField,
+  InfoHelper
+} from "@teselagen/ui";
+import { getFeatureTypes } from "@teselagen/sequence-utils";
+import { get } from "lodash";
+
+const renderTypes = ({ readOnly }) => (
+  <ReactSelectField
+    inlineLabel
+    tooltipError
+    disabled={readOnly}
+    defaultValue="misc_feature"
+    options={getFeatureTypes().map((type) => {
+      return {
+        label: type,
+        // label: (
+        //   <div
+        //     style={{
+        //       display: "flex",
+        //       alignItems: "center",
+        //       marginRight: 10
+        //     }}
+        //   >
+        //     <div
+        //       style={{
+        //         // background: getFeatureToColorMap()[type], add back in if we want colors. import from vesequtils
+        //         height: 15,
+        //         width: 15,
+        //         marginRight: 5
+        //       }}
+        //     />
+        //     {type}
+        //   </div>
+        // ),
+        value: type
+      };
+    })}
+    name="type"
+    label="Type"
+  />
+);
+const renderAdvancedOptions = ({ readOnly }) => (
+  <CheckboxField
+    inlineLabel
+    tooltipError
+    disabled={readOnly}
+    name="overlapsSelf"
+    label={
+      <div style={{ display: "flex", alignItems: "center" }}>
+        Part Overlaps Self
+        <InfoHelper
+          style={{ paddingLeft: 10, paddingTop: 9 }}
+          isInline
+          content="If checked, this part will span the entire sequence and wrap back around on itself. (Useful for USER cloning and other instances where the part needs to span the entire sequence and then some)"
+        ></InfoHelper>
+      </div>
+    }
+  />
+);
+const getRenderTags = ({ readOnly, editTagsLink, tags }) => {
+  return (
+    <ReactSelectField
+      disabled={readOnly}
+      inlineLabel
+      rightEl={editTagsLink}
+      isTagSelect
+      multi
+      tooltipError
+      options={tags}
+      name="tags"
+      label="Tags"
+    />
+  );
+};
+export default AddOrEditAnnotationDialog({
+  formName: "AddOrEditPartDialog",
+  dialogProps: {
+    width: 450
+  },
+  getProps: (props) => ({
+    upsertAnnotation: props.upsertPart,
+    advancedDefaultOpen: get(props, "initialValues.overlapsSelf"),
+    advancedOptions: props.allowPartsToOverlapSelf
+      ? renderAdvancedOptions({ readOnly: props.readOnly })
+      : undefined,
+    renderTypes: renderTypes({ readOnly: props.readOnly }),
+    renderTags:
+      props.allPartTags &&
+      getRenderTags({
+        readOnly: props.readOnly,
+        editTagsLink: props.editTagsLink,
+        tags: getTagsAndTagOptions(props.allPartTags)
+      }),
+    annotationTypePlural: "parts"
+  })
+});

package/src/helperComponents/AddOrEditPrimerDialog/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)
+//     );
+//   }
+// }