@teselagen/ove 0.3.11 → 0.3.12

package/src/utils/pureNoFunc.js

@@ -10,7 +10,7 @@ const isEq = (o1, o2) => {
   return isEq;
 };
 
-const pure = (BaseComponent) => {
+const pure = BaseComponent => {
   const hoc = shouldUpdate((props, nextProps) => !isEq(props, nextProps));
   return hoc(BaseComponent);
 };

package/src/utils/shouldRerender.js

@@ -18,7 +18,7 @@ const shouldRerender = (propKeys, stateKeys, that) => {
 export default shouldRerender;
 
 const isEq = (o1, o2) => {
-  const isEq = isEqualWith(o1, o2, function(val1, val2) {
+  const isEq = isEqualWith(o1, o2, function (val1, val2) {
     if (isFunction(val1) && isFunction(val2)) {
       return val1 === val2 || val1.toString() === val2.toString();
     }

package/src/utils/showFileDialog.js

@@ -4,21 +4,20 @@ 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 => {
+    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;
+  hiddenInput.multiple = multiple ? "multiple" : undefined;
   return hiddenInput;
 }
 
-
 export default function showFileDialog({ multiple = false, onSelect }) {
   const input = getInput(multiple);
   callback = onSelect;

package/src/utils/updateLabelsForInViewFeatures.js

@@ -20,7 +20,7 @@ export function updateLabelsForInViewFeatures({
     .querySelector(rectElement)
     .getBoundingClientRect();
 
-  els.forEach((el) => {
+  els.forEach(el => {
     const elBounds = el.getBoundingClientRect();
     const isElIn = isElWithinAnotherEl(elBounds, boundingRect);
 

package/src/utils/useAnnotationLimits.js

@@ -20,7 +20,7 @@ export function LimitAnnotations({ type, ...rest }) {
   const [limits = {}, setLimits] = useAnnotationLimits();
   return (
     <MenuItem icon="blank" shouldDismissPopover={false} {...rest}>
-      {[50, 100, 200, 400].map((n) => (
+      {[50, 100, 200, 400].map(n => (
         <MenuItem
           shouldDismissPopover={false}
           icon={

package/src/withEditorInteractions/Keyboard.js

@@ -24,7 +24,7 @@ class Clipboard extends React.Component {
     this.node.parentNode.removeEventListener("keyup", this.handleKeyUp, false);
   }
 
-  handleKeyDown = (e) => {
+  handleKeyDown = e => {
     if (
       document.activeElement &&
       ["input", "select", "textarea"].indexOf(
@@ -63,7 +63,7 @@ class Clipboard extends React.Component {
     };
     return (
       <input
-        ref={(c) => {
+        ref={c => {
           if (c) {
             this.node = c;
           }
@@ -83,4 +83,3 @@ class Clipboard extends React.Component {
 }
 
 export default Clipboard;
-

package/src/withEditorInteractions/createSequenceInputPopup.js

@@ -35,7 +35,7 @@ class SequenceInputNoHotkeys extends React.Component {
       this.handleUnmountIfClickOustidePopup
     );
   }
-  handleUnmountIfClickOustidePopup = (e) => {
+  handleUnmountIfClickOustidePopup = e => {
     const n = findDOMNode(this);
     if (!n) return;
     const node = n.parentNode;
@@ -122,7 +122,7 @@ class SequenceInputNoHotkeys extends React.Component {
       <div className="sequenceInputBubble">
         <input
           autoCorrect="off"
-          onKeyDown={(e) => {
+          onKeyDown={e => {
             if (e.keyCode === 27) {
               this.handleUnmount();
             }
@@ -135,9 +135,9 @@ class SequenceInputNoHotkeys extends React.Component {
           value={charsToInsert}
           autoFocus
           style={hasTempError ? { borderColor: "red" } : {}}
-          onChange={(e) => {
+          onChange={e => {
             let sanitizedVal = "";
-            e.target.value.split("").forEach((letter) => {
+            e.target.value.split("").forEach(letter => {
               const lowerLetter = letter.toLowerCase();
               if (replaceChars && replaceChars[lowerLetter]) {
                 const isUpper = lowerLetter !== letter;

package/src/withEditorInteractions/index.js

@@ -79,7 +79,7 @@ function VectorInteractionHOC(Component /* options */) {
   return class VectorInteractionWrapper extends React.Component {
     constructor(props) {
       super(props);
-      annotationClickHandlers.forEach((handler) => {
+      annotationClickHandlers.forEach(handler => {
         this[handler] = (...args) => {
           const { clickOverrides = {} } = this.props;
           let preventDefault;
@@ -93,7 +93,7 @@ function VectorInteractionHOC(Component /* options */) {
         };
       });
 
-      this.ConnectedMenu = (p) => {
+      this.ConnectedMenu = p => {
         return <ConnectedMenu {...props} {...p} />;
       };
     }
@@ -110,7 +110,7 @@ function VectorInteractionHOC(Component /* options */) {
       // documentation: https://craig.is/killing/mice
       this.combokeys.bind(
         "-.*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),
-        (event) => {
+        event => {
           this.handleDnaInsert(event);
         }
       );
@@ -140,7 +140,7 @@ function VectorInteractionHOC(Component /* options */) {
       ];
 
       moveCaretBindings.forEach(({ keyCombo, type }) => {
-        this.combokeys.bind(keyCombo, (event) => {
+        this.combokeys.bind(keyCombo, event => {
           const shiftHeld = event.shiftKey;
           const bpsPerRow = getBpsPerRow(this.props);
           const {
@@ -177,7 +177,7 @@ function VectorInteractionHOC(Component /* options */) {
         });
       });
 
-      this.combokeys.bind(["backspace", "del"], (event) => {
+      this.combokeys.bind(["backspace", "del"], event => {
         // Handle shortcut
         this.handleDnaDelete(event);
       });
@@ -206,14 +206,18 @@ function VectorInteractionHOC(Component /* options */) {
       });
     };
 
-    handlePaste = (e) => {
+    handlePaste = e => {
       const {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
         readOnly,
-        onPaste
+        onPaste,
+        disableBpEditing
       } = this.props;
 
+      if (disableBpEditing) {
+        return window.toastr.warning("Sorry the underlying sequence is locked");
+      }
       if (readOnly) {
         return window.toastr.warning("Sorry the sequence is Read-Only");
       }
@@ -253,12 +257,13 @@ function VectorInteractionHOC(Component /* options */) {
       e.preventDefault();
     };
 
-    handleCutOrCopy = (isCut) => (e) => {
+    handleCutOrCopy = isCut => e => {
       const {
         onCopy = noop,
         sequenceData,
         selectionLayer,
         copyOptions,
+        disableBpEditing,
         readOnly
       } = this.props;
       const onCut = this.props.onCut || this.props.onCopy || noop;
@@ -289,7 +294,9 @@ function VectorInteractionHOC(Component /* options */) {
         !seqData.sequence.length
       )
         return window.toastr.warning(
-          `No Sequence Selected To ${isCut && !readOnly ? "Cut" : "Copy"}`
+          `No Sequence Selected To ${
+            isCut && !(readOnly || disableBpEditing) ? "Cut" : "Copy"
+          }`
         );
 
       const clipboardData = e.clipboardData;
@@ -306,7 +313,7 @@ function VectorInteractionHOC(Component /* options */) {
       clipboardData.setData("application/json", JSON.stringify(seqData));
       e.preventDefault();
 
-      if (isCut && !readOnly) {
+      if (isCut && !(readOnly || disableBpEditing) && !disableBpEditing) {
         this.handleDnaDelete(false);
         onCut(
           e,
@@ -319,7 +326,11 @@ function VectorInteractionHOC(Component /* options */) {
         document.body.removeEventListener("copy", this.handleCopy);
       }
       window.toastr.success(
-        `Selection ${isCut && !readOnly ? "Cut" : "Copied"}`
+        `Selection ${
+          isCut && !(readOnly || disableBpEditing) && !disableBpEditing
+            ? "Cut"
+            : "Copied"
+        }`
       );
       this.sequenceDataToCopy = undefined;
     };
@@ -332,14 +343,18 @@ function VectorInteractionHOC(Component /* options */) {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
         sequenceData = { sequence: "" },
-        readOnly
+        readOnly,
+        disableBpEditing
         // updateSequenceData,
         // wrappedInsertSequenceDataAtPositionOrRange
         // handleInsert
       } = this.props;
       const sequenceLength = sequenceData.sequence.length;
       const isReplace = selectionLayer.start > -1;
-      if (readOnly) {
+      if (disableBpEditing) {
+        return window.toastr.warning("Sorry the underlying sequence is locked");
+      }
+      if (readOnly || disableBpEditing) {
         window.toastr.warning("Sorry the sequence is Read-Only");
       } else {
         createSequenceInputPopup({
@@ -351,7 +366,7 @@ function VectorInteractionHOC(Component /* options */) {
           selectionLayer,
           sequenceLength,
           caretPosition,
-          handleInsert: (seqDataToInsert) => {
+          handleInsert: seqDataToInsert => {
             insertAndSelectHelper({
               props: this.props,
               seqDataToInsert
@@ -369,13 +384,17 @@ function VectorInteractionHOC(Component /* options */) {
         selectionLayer = { start: -1, end: -1 },
         sequenceData = { sequence: "" },
         readOnly,
+        disableBpEditing,
         updateSequenceData,
         wrappedInsertSequenceDataAtPositionOrRange,
         caretPositionUpdate
         // handleInsert
       } = this.props;
       const sequenceLength = sequenceData.sequence.length;
-      if (readOnly) {
+      if (disableBpEditing) {
+        return window.toastr.warning("Sorry the underlying sequence is locked");
+      }
+      if (readOnly || disableBpEditing) {
         return window.toastr.warning("Sorry the sequence is Read-Only");
       }
       if (sequenceLength > 0) {
@@ -421,7 +440,7 @@ function VectorInteractionHOC(Component /* options */) {
       }
     };
 
-    caretPositionUpdate = (position) => {
+    caretPositionUpdate = position => {
       const { caretPosition = -1 } = this.props;
       if (caretPosition === position) {
         return;
@@ -429,7 +448,7 @@ function VectorInteractionHOC(Component /* options */) {
       //we only call caretPositionUpdate if we're actually changing something
       this.props.caretPositionUpdate(position);
     };
-    selectionLayerUpdate = (newSelection) => {
+    selectionLayerUpdate = newSelection => {
       const { selectionLayer = { start: -1, end: -1 }, ignoreGapsOnHighlight } =
         this.props;
       if (!newSelection) return;
@@ -537,8 +556,9 @@ function VectorInteractionHOC(Component /* options */) {
     };
 
     // eslint-disable-next-line no-unused-vars
-    getCopyOptions = (annotation) => {
-      const { sequenceData, readOnly, selectionLayer } = this.props;
+    getCopyOptions = annotation => {
+      const { sequenceData, readOnly, disableBpEditing, selectionLayer } =
+        this.props;
       const { isProtein } = sequenceData;
       const makeTextCopyable = (transformFunc, className, action = "copy") => {
         return new Clipboard(`.${className}`, {
@@ -590,7 +610,7 @@ function VectorInteractionHOC(Component /* options */) {
           this.openVeCopyAA && this.openVeCopyAA.destroy();
         },
         didMount: ({ className }) => {
-          this.openVeCopyAA = makeTextCopyable((selectedSeqData) => {
+          this.openVeCopyAA = makeTextCopyable(selectedSeqData => {
             const textToCopy = isProtein
               ? selectedSeqData.proteinSequence.toUpperCase()
               : getAminoAcidStringFromSequenceString(selectedSeqData.sequence);
@@ -604,7 +624,7 @@ function VectorInteractionHOC(Component /* options */) {
       // TODO: maybe stop using Clipboard.js and unify clipboard handling with
       // a more versatile approach
       return [
-        ...(readOnly
+        ...(readOnly || disableBpEditing
           ? []
           : [
               {
@@ -620,7 +640,7 @@ function VectorInteractionHOC(Component /* options */) {
                 didMount: ({ className }) => {
                   // TODO: Maybe use a cut action instead
                   this.openVeCut = makeTextCopyable(
-                    (s) => ({
+                    s => ({
                       ...s,
                       textToCopy: isProtein ? s.proteinSequence : s.sequence
                     }),
@@ -645,7 +665,7 @@ function VectorInteractionHOC(Component /* options */) {
               },
               didMount: ({ className }) => {
                 this.openVeCopy2 = makeTextCopyable(
-                  (s) => ({ ...s, textToCopy: s.sequence }),
+                  s => ({ ...s, textToCopy: s.sequence }),
                   className
                 );
               }
@@ -688,24 +708,17 @@ function VectorInteractionHOC(Component /* options */) {
                 this.openVeCopyAAReverse && this.openVeCopyAAReverse.destroy();
               },
               didMount: ({ className }) => {
-                this.openVeCopyAAReverse = makeTextCopyable(
-                  (selectedSeqData) => {
-                    const revSeqData =
-                      getReverseComplementSequenceAndAnnotations(
-                        selectedSeqData
-                      );
-                    const textToCopy = isProtein
-                      ? revSeqData.proteinSequence.toUpperCase()
-                      : getAminoAcidStringFromSequenceString(
-                          revSeqData.sequence
-                        );
-                    return {
-                      ...revSeqData,
-                      textToCopy
-                    };
-                  },
-                  className
-                );
+                this.openVeCopyAAReverse = makeTextCopyable(selectedSeqData => {
+                  const revSeqData =
+                    getReverseComplementSequenceAndAnnotations(selectedSeqData);
+                  const textToCopy = isProtein
+                    ? revSeqData.proteinSequence.toUpperCase()
+                    : getAminoAcidStringFromSequenceString(revSeqData.sequence);
+                  return {
+                    ...revSeqData,
+                    textToCopy
+                  };
+                }, className);
               }
             },
             {
@@ -728,7 +741,7 @@ function VectorInteractionHOC(Component /* options */) {
       ];
     };
 
-    getSelectionMenuOptions = (annotation) => {
+    getSelectionMenuOptions = annotation => {
       const items = [
         ...this.getCopyOptions(annotation),
         createNewAnnotationMenu,
@@ -756,7 +769,7 @@ function VectorInteractionHOC(Component /* options */) {
       return handler({ event, ...rest }, this.props);
     };
     enhanceRightClickAction = (action, key) => {
-      return (opts) => {
+      return opts => {
         const lastFocusedEl = document.activeElement;
         const { rightClickOverrides = {} } = this.props;
         const items = action(opts);
@@ -821,11 +834,12 @@ function VectorInteractionHOC(Component /* options */) {
       ({ nearestCaretPos, shiftHeld, event }) => {
         this.updateSelectionOrCaret(shiftHeld, nearestCaretPos);
         const {
-          readOnly
+          readOnly,
+          disableBpEditing
           // sequenceData: { circular }
         } = this.props;
         const menu = [
-          ...(readOnly
+          ...(readOnly || disableBpEditing
             ? []
             : [
                 {
@@ -875,8 +889,7 @@ function VectorInteractionHOC(Component /* options */) {
         overlapsSelf: annotation.overlapsSelf
       });
       return [
-        "editPart",
-        "deletePart",
+        ...getEditDeleteHandlers("Part", annotation),
         "--",
         ...this.getSelectionMenuOptions(annotation),
         "--",
@@ -894,7 +907,7 @@ function VectorInteractionHOC(Component /* options */) {
         return [
           {
             text: "View Warning Details",
-            onClick: (event) => {
+            onClick: event => {
               this.warningDoubleClicked({
                 event,
                 annotation,
@@ -919,8 +932,7 @@ function VectorInteractionHOC(Component /* options */) {
         event.persist();
         const { readOnly, annotationsToSupport: { parts } = {} } = this.props;
         return [
-          "editFeature",
-          "deleteFeature",
+          ...getEditDeleteHandlers("Feature", annotation),
           ...this.getSelectionMenuOptions(annotation),
           ...(readOnly
             ? []
@@ -932,7 +944,7 @@ function VectorInteractionHOC(Component /* options */) {
                     onClick: async () => {
                       const { sequenceData, upsertPart } = this.props;
                       if (
-                        some(sequenceData.parts, (part) => {
+                        some(sequenceData.parts, part => {
                           if (
                             part.start === annotation.start &&
                             part.end === annotation.end
@@ -994,8 +1006,7 @@ function VectorInteractionHOC(Component /* options */) {
           end: annotation.end
         });
         return [
-          "editPrimer",
-          "deletePrimer",
+          ...getEditDeleteHandlers("Primer", annotation),
           ...this.getSelectionMenuOptions(annotation),
           "showRemoveDuplicatesDialogPrimers",
           "viewPrimerProperties"
@@ -1127,7 +1138,7 @@ function VectorInteractionHOC(Component /* options */) {
             acc[handler] = this[handler];
             return acc;
           }, {}),
-          editorClicked: (p) => {
+          editorClicked: p => {
             editorClicked({
               ...p,
               updateSelectionOrCaret: this.updateSelectionOrCaret
@@ -1140,7 +1151,7 @@ function VectorInteractionHOC(Component /* options */) {
       return (
         <div
           tabIndex={0} //this helps with focusing using Keyboard's parentElement.focus()
-          ref={(c) => (this.node = c)}
+          ref={c => (this.node = c)}
           className="veVectorInteractionWrapper"
           style={{ position: "relative", ...vectorInteractionWrapperStyle }}
           onFocus={this.handleWrapperFocus}
@@ -1259,3 +1270,30 @@ const insertAndSelectHelper = ({ seqDataToInsert, props }) => {
     end: newSelectionLayerEnd % newSeqData.sequence.length
   });
 };
+
+function getEditDeleteHandlers(type, annotation) {
+  return [
+    ...(annotation.isEditLocked
+      ? [
+          {
+            shouldDismissPopover: false,
+            text: (
+              <div
+                style={{
+                  fontSize: 11,
+                  fontStyle: "italic",
+                  color: "rgba(0,0,0,.5)"
+                }}
+              >
+                {typeof annotation.isEditLocked === "string"
+                  ? annotation.isEditLocked
+                  : `Note: This Annotation is Locked`}
+              </div>
+            )
+          }
+        ]
+      : []),
+    `edit${type}`,
+    ...(annotation.isEditLocked ? [] : [`delete${type}`])
+  ];
+}