@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/EditCaretPosition.js

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

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

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

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

package/FillWindow.js

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

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

@@ -1,117 +0,0 @@
-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);