@teselagen/ove 0.3.11 → 0.3.13

package/index.umd.js

@@ -57193,12 +57193,20 @@
     return toString$4.call(it).slice(8, -1);
   };
 
-  // fallback for non-array-like ES3 and non-enumerable old V8 strings
-  var cof$2 = _cof;
-  // eslint-disable-next-line no-prototype-builtins
-  var _iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
-    return cof$2(it) == 'String' ? it.split('') : Object(it);
-  };
+  var _iobject;
+  var hasRequired_iobject;
+
+  function require_iobject () {
+  	if (hasRequired_iobject) return _iobject;
+  	hasRequired_iobject = 1;
+  	// fallback for non-array-like ES3 and non-enumerable old V8 strings
+  	var cof = _cof;
+  	// eslint-disable-next-line no-prototype-builtins
+  	_iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
+  	  return cof(it) == 'String' ? it.split('') : Object(it);
+  	};
+  	return _iobject;
+  }
 
   // 7.2.1 RequireObjectCoercible(argument)
   var _defined = function (it) {
@@ -57207,7 +57215,7 @@
   };
 
   // to indexed object, toObject with fallback for non-array-like ES3 strings
-  var IObject = _iobject;
+  var IObject = require_iobject();
   var defined$2 = _defined;
   var _toIobject = function (it) {
     return IObject(defined$2(it));
@@ -57354,7 +57362,7 @@
   	var gOPS = _objectGops;
   	var pIE = require_objectPie();
   	var toObject = _toObject;
-  	var IObject = _iobject;
+  	var IObject = require_iobject();
   	var $assign = Object.assign;
 
   	// should work with symbols and should have deterministic property order (V8 bug)
@@ -113755,13 +113763,7 @@
         return {};
       }
       const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
-      const {
-        formName,
-        urlConnected,
-        history,
-        defaults,
-        onlyOneFilter
-      } = mergedOpts;
+      const { formName, urlConnected, history, defaults, onlyOneFilter } = mergedOpts;
       function updateSearch(val) {
         setTimeout(function() {
           dispatch(change(formName, "reduxFormSearchInput", val || ""));
@@ -113800,12 +113802,7 @@
           action(...args, currentParams);
         };
       });
-      const {
-        variables,
-        selectedEntities,
-        mergedOpts,
-        ...restStateProps
-      } = stateProps;
+      const { variables, selectedEntities, mergedOpts, ...restStateProps } = stateProps;
       const changeFormValue = (...args) => dispatchProps.dispatch(change(formName, ...args));
       const tableParams = {
         changeFormValue,
@@ -117701,7 +117698,9 @@
                   return doNotTriggerClick();
               }
               const parentEl = r.current?.closest(".bp3-dialog-container");
-              const dialogs = document.querySelectorAll(".bp3-dialog-container");
+              const dialogs = document.querySelectorAll(
+                ".bp3-dialog-container"
+              );
               const numDialogs = dialogs?.length;
               if (numDialogs > 1) {
                 const topMostDialog = dialogs[numDialogs - 1];
@@ -118040,6 +118039,7 @@
               marginBottom: 10,
               marginLeft: 20,
               fontSize: 10
+              /* color: Colors.RED1 */
             }
           },
           userMatchedHeader && [
@@ -120028,10 +120028,7 @@
         if (props.filesWIssues.length > 0) {
           const reduxFormEntitiesArray = [];
           const finishedFiles = props.filesWIssues.map((f, i) => {
-            const {
-              reduxFormEntities,
-              reduxFormCellValidation
-            } = formValueSelector(`editableCellTable-${i}`)(
+            const { reduxFormEntities, reduxFormCellValidation } = formValueSelector(`editableCellTable-${i}`)(
               state,
               "reduxFormEntities",
               "reduxFormCellValidation"
@@ -120408,6 +120405,8 @@
       userSchema = exampleData,
       initialEntities
     } = props;
+    const rerenderKey = reactExports.useRef(0);
+    rerenderKey.current = rerenderKey.current + 1;
     const data = userSchema.userData && userSchema.userData.length && userSchema.userData.map((row) => {
       const toRet = {
         _isClean: row._isClean
@@ -120454,6 +120453,7 @@
       {
         maxWidth: 800,
         maxHeight: 500,
+        rerenderKey: rerenderKey.current,
         destroyOnUnmount: false,
         doNotValidateUntouchedRows: true,
         formName: datatableFormName || "editableCellTable",
@@ -132275,7 +132275,14 @@
       }
     }),
     branch(({ navTo }) => navTo, withRouter$1)
-  )(function({ navTo, context, staticContext, didMount, willUnmount, ...props }) {
+  )(function({
+    navTo,
+    context,
+    staticContext,
+    didMount,
+    willUnmount,
+    ...props
+  }) {
     let MenuItemComp = MenuItem;
     if (navTo) {
       MenuItemComp = MenuItemLink;
@@ -133333,11 +133340,7 @@
     return handlers;
   }
 
-  const withCommand = (mappings) => (WrappedComponent) => ({
-    cmd,
-    cmdOptions = {},
-    ...props
-  }) => {
+  const withCommand = (mappings) => (WrappedComponent) => ({ cmd, cmdOptions = {}, ...props }) => {
     const mappedProps = {};
     Object.keys(mappings).forEach((k) => {
       mappedProps[k] = mappings[k] === "execute" ? (event) => cmd.execute({ event }) : typeof mappings[k] === "function" ? mappings[k](cmd, props) : cmd[mappings[k]];
@@ -134484,9 +134487,9 @@
       }
     },
     {
-      "1": false,
-      "2": false,
-      "3": false,
+      1: false,
+      2: false,
+      3: false,
       "-1": false,
       "-2": false,
       "-3": false
@@ -135215,9 +135218,14 @@
 
   function checkIfPotentiallyCircularRangesOverlap(range, comparisonRange) {
     return splitRangeIntoTwoPartsIfItIsCircular(range, Infinity).some(function(splitRange) {
-      return splitRangeIntoTwoPartsIfItIsCircular(comparisonRange, Infinity).some(function(splitComparisonRange) {
-        return checkIfNonCircularRangesOverlap(splitRange, splitComparisonRange);
-      });
+      return splitRangeIntoTwoPartsIfItIsCircular(comparisonRange, Infinity).some(
+        function(splitComparisonRange) {
+          return checkIfNonCircularRangesOverlap(
+            splitRange,
+            splitComparisonRange
+          );
+        }
+      );
     });
   }
 
@@ -135227,15 +135235,19 @@
       return overlaps;
     } else if (overlaps.length === 2) {
       if (overlaps[0].start === 0 && overlaps[1].end + 1 === sequenceLength && !originalRangeLinear) {
-        return [{
-          start: overlaps[1].start,
-          end: overlaps[0].end
-        }];
+        return [
+          {
+            start: overlaps[1].start,
+            end: overlaps[0].end
+          }
+        ];
       } else if (overlaps[1].start === 0 && overlaps[0].end + 1 === sequenceLength && !originalRangeLinear) {
-        return [{
-          start: overlaps[0].start,
-          end: overlaps[1].end
-        }];
+        return [
+          {
+            start: overlaps[0].start,
+            end: overlaps[1].end
+          }
+        ];
       } else {
         return overlaps;
       }
@@ -135243,17 +135255,29 @@
       const firstOverlap = overlaps[0];
       const secondOverlap = overlaps[1];
       const thirdOverlap = overlaps[2];
-      let collapsedOverlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible([firstOverlap, secondOverlap], sequenceLength, optionalOriginalRange);
+      let collapsedOverlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible(
+        [firstOverlap, secondOverlap],
+        sequenceLength,
+        optionalOriginalRange
+      );
       if (collapsedOverlaps.length === 1) {
         collapsedOverlaps.push(thirdOverlap);
         return collapsedOverlaps;
       } else {
-        collapsedOverlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible([firstOverlap, thirdOverlap], sequenceLength, optionalOriginalRange);
+        collapsedOverlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible(
+          [firstOverlap, thirdOverlap],
+          sequenceLength,
+          optionalOriginalRange
+        );
         if (collapsedOverlaps.length === 1) {
           collapsedOverlaps.push(secondOverlap);
           return collapsedOverlaps;
         } else {
-          collapsedOverlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible([secondOverlap, thirdOverlap], sequenceLength, optionalOriginalRange);
+          collapsedOverlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible(
+            [secondOverlap, thirdOverlap],
+            sequenceLength,
+            optionalOriginalRange
+          );
           if (collapsedOverlaps.length === 1) {
             collapsedOverlaps.push(firstOverlap);
             return collapsedOverlaps;
@@ -135275,11 +135299,18 @@
   }
 
   function convertRangeTo0Based(range) {
-    return convertRangeIndices(range, { inclusive1BasedStart: true, inclusive1BasedEnd: true });
+    return convertRangeIndices(range, {
+      inclusive1BasedStart: true,
+      inclusive1BasedEnd: true
+    });
   }
 
   function convertRangeTo1Based(range) {
-    return convertRangeIndices(range, {}, { inclusive1BasedStart: true, inclusive1BasedEnd: true });
+    return convertRangeIndices(
+      range,
+      {},
+      { inclusive1BasedStart: true, inclusive1BasedEnd: true }
+    );
   }
 
   function provideInclusiveOptions(funToWrap) {
@@ -135384,7 +135415,11 @@
     let endMoved = true;
     if (range.end >= position) {
       if (position + maxLength - range.start > range.end - position) {
-        newRange.end = normalizePositionByRangeLength(position - 1, maxLength, false);
+        newRange.end = normalizePositionByRangeLength(
+          position - 1,
+          maxLength,
+          false
+        );
       } else {
         newRange.start = position;
         endMoved = false;
@@ -135457,19 +135492,31 @@
     if (range.start > range.end) {
       return expandOrContractCircularRangeToPosition(range, position, maxLength);
     } else {
-      return expandOrContractNonCircularRangeToPosition(range, position);
+      return expandOrContractNonCircularRangeToPosition(
+        range,
+        position);
     }
   }
 
   function translateRange(rangeToBeAdjusted, translateBy, rangeLength) {
     return lodashExports.assign({}, rangeToBeAdjusted, {
-      start: normalizePositionByRangeLength(rangeToBeAdjusted.start + translateBy, rangeLength),
-      end: normalizePositionByRangeLength(rangeToBeAdjusted.end + translateBy, rangeLength)
+      start: normalizePositionByRangeLength(
+        rangeToBeAdjusted.start + translateBy,
+        rangeLength
+      ),
+      end: normalizePositionByRangeLength(
+        rangeToBeAdjusted.end + translateBy,
+        rangeLength
+      )
     });
   }
 
   function flipRelativeRange(innerRange, outerRange, sequenceLength, options) {
-    const isFullyContained = isRangeWithinRange(innerRange, outerRange, sequenceLength);
+    const isFullyContained = isRangeWithinRange(
+      innerRange,
+      outerRange,
+      sequenceLength
+    );
     if (isFullyContained) {
       return flipFullyContainedRange(innerRange, outerRange, sequenceLength);
     } else {
@@ -135477,40 +135524,91 @@
     }
   }
   function flipNonFullyContainedRange(innerRange, outerRange, sequenceLength, options) {
-    const outerFullyContained = isRangeWithinRange(outerRange, innerRange, sequenceLength);
+    const outerFullyContained = isRangeWithinRange(
+      outerRange,
+      innerRange,
+      sequenceLength
+    );
     let flippedInnerRange;
     if (outerFullyContained) {
-      const expandBy1 = getRangeLength({
-        start: innerRange.start,
-        end: outerRange.start
-      }, sequenceLength) - 1;
-      flippedInnerRange = expandOrContractRangeByLength(outerRange, expandBy1, false, sequenceLength);
-      const expandBy2 = getRangeLength({
-        end: innerRange.end,
-        start: outerRange.end
-      }, sequenceLength) - 1;
-      flippedInnerRange = expandOrContractRangeByLength(flippedInnerRange, expandBy2, true, sequenceLength);
+      const expandBy1 = getRangeLength(
+        {
+          start: innerRange.start,
+          end: outerRange.start
+        },
+        sequenceLength
+      ) - 1;
+      flippedInnerRange = expandOrContractRangeByLength(
+        outerRange,
+        expandBy1,
+        false,
+        sequenceLength
+      );
+      const expandBy2 = getRangeLength(
+        {
+          end: innerRange.end,
+          start: outerRange.end
+        },
+        sequenceLength
+      ) - 1;
+      flippedInnerRange = expandOrContractRangeByLength(
+        flippedInnerRange,
+        expandBy2,
+        true,
+        sequenceLength
+      );
     } else {
-      const overlaps = getOverlapsOfPotentiallyCircularRanges(innerRange, outerRange, sequenceLength);
+      const overlaps = getOverlapsOfPotentiallyCircularRanges(
+        innerRange,
+        outerRange,
+        sequenceLength
+      );
       if (overlaps.length >= 1) {
         let overlapExtendsForward;
         const firstOverlap = overlaps[0];
         overlapExtendsForward = firstOverlap.start !== outerRange.start;
-        const flippedTruncatedInner = flipFullyContainedRange(firstOverlap, outerRange, sequenceLength);
+        const flippedTruncatedInner = flipFullyContainedRange(
+          firstOverlap,
+          outerRange,
+          sequenceLength
+        );
         const lengthToExtend = getRangeLength(innerRange, sequenceLength) - getRangeLength(flippedTruncatedInner, sequenceLength);
-        flippedInnerRange = expandOrContractRangeByLength(flippedTruncatedInner, lengthToExtend, overlapExtendsForward, sequenceLength);
+        flippedInnerRange = expandOrContractRangeByLength(
+          flippedTruncatedInner,
+          lengthToExtend,
+          overlapExtendsForward,
+          sequenceLength
+        );
       } else {
-        throw new Error("This case (relative ranges that do not overlap) is unsupported! ");
+        throw new Error(
+          "This case (relative ranges that do not overlap) is unsupported! "
+        );
       }
     }
     return flippedInnerRange;
   }
   function flipFullyContainedRange(innerRange, outerRange, sequenceLength, options) {
     const translateBy = -outerRange.start;
-    const translatedOuterRange = translateRange(outerRange, translateBy, sequenceLength);
-    const translatedInnerRange = translateRange(innerRange, translateBy, sequenceLength);
-    const translatedFlippedInnerRange = flipNonOriginSpanningContainedRange(translatedInnerRange, translatedOuterRange, sequenceLength);
-    const flippedInnerRange = translateRange(translatedFlippedInnerRange, -translateBy, sequenceLength);
+    const translatedOuterRange = translateRange(
+      outerRange,
+      translateBy,
+      sequenceLength
+    );
+    const translatedInnerRange = translateRange(
+      innerRange,
+      translateBy,
+      sequenceLength
+    );
+    const translatedFlippedInnerRange = flipNonOriginSpanningContainedRange(
+      translatedInnerRange,
+      translatedOuterRange,
+      sequenceLength
+    );
+    const flippedInnerRange = translateRange(
+      translatedFlippedInnerRange,
+      -translateBy,
+      sequenceLength
+    );
     return flippedInnerRange;
   }
   function flipNonOriginSpanningContainedRange(innerRange, outerRange, sequenceLength) {
@@ -135682,9 +135780,15 @@
   }
 
   function zeroSubrangeByContainerRange(subRange, containerRange, sequenceLength) {
-    const trimmedSubRange = trimRangeByAnotherRange(subRange, containerRange, sequenceLength);
+    const trimmedSubRange = trimRangeByAnotherRange(
+      subRange,
+      containerRange,
+      sequenceLength
+    );
     if (trimmedSubRange) {
-      throw new Error("subRange must be fully contained by containerRange! Otherwise this function does not make sense");
+      throw new Error(
+        "subRange must be fully contained by containerRange! Otherwise this function does not make sense"
+      );
     }
     const newSubrange = {};
     newSubrange.start = subRange.start - containerRange.start;
@@ -135711,12 +135815,24 @@
   }
 
   function getZeroedRangeOverlaps(annotation, selection, sequenceLength) {
-    const overlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible(getOverlapsOfPotentiallyCircularRanges(annotation, selection, sequenceLength), sequenceLength, annotation);
+    const overlaps = collapseOverlapsGeneratedFromRangeComparisonIfPossible(
+      getOverlapsOfPotentiallyCircularRanges(
+        annotation,
+        selection,
+        sequenceLength
+      ),
+      sequenceLength,
+      annotation
+    );
     const zeroedOverlaps = overlaps.map((overlap) => {
-      return zeroSubrangeByContainerRange(overlap, {
-        start: selection.start,
-        end: normalizePositionByRangeLength(selection.start - 1, sequenceLength)
-      }, sequenceLength);
+      return zeroSubrangeByContainerRange(
+        overlap,
+        {
+          start: selection.start,
+          end: normalizePositionByRangeLength(selection.start - 1, sequenceLength)
+        },
+        sequenceLength
+      );
     });
     return zeroedOverlaps;
   }
@@ -142069,9 +142185,9 @@
   function filterAminoAcidSequenceString(sequenceString, options) {
     options = options || {};
     if (options.includeStopCodon) {
-      return sequenceString.replace(/[^xtgalmfwkqespvicyhrndu.*]/gi, "");
+      return sequenceString?.replace(/[^xtgalmfwkqespvicyhrndu.*]/gi, "");
     }
-    return sequenceString.replace(/[^xtgalmfwkqespvicyhrndu]/gi, "");
+    return sequenceString?.replace(/[^xtgalmfwkqespvicyhrndu]/gi, "");
   }
 
   function getDegenerateDnaStringFromAAString(aaString) {
@@ -142422,7 +142538,7 @@
     calculateTemperature: function(sequence, type, A, R, C, Na) {
       if (typeof type === "undefined") {
         type = this.TABLE_BRESLAUER;
-      } else if (type != this.TABLE_BRESLAUER && (type != this.TABLE_UNIFIED && type != this.TABLE_SUGIMOTO)) {
+      } else if (type != this.TABLE_BRESLAUER && type != this.TABLE_UNIFIED && type != this.TABLE_SUGIMOTO) {
         throw new Error("Invalid table type!");
       }
       if (!A) {
@@ -150681,12 +150797,7 @@
     return matches;
   }
   function findSequenceMatchesTopStrand(sequence, searchString, options = {}) {
-    const {
-      isCircular,
-      isAmbiguous,
-      isProteinSequence,
-      isProteinSearch
-    } = options;
+    const { isCircular, isAmbiguous, isProteinSequence, isProteinSearch } = options;
     let searchStringToUse = escapeStringRegexp(searchString);
     if (isAmbiguous) {
       if (isProteinSearch || isProteinSequence) {
@@ -150768,7 +150879,10 @@
 
   function getComplementSequenceString(sequence, isRna) {
     let complementSeqString = "";
-    const complementMap = lodashExports.merge(DNAComplementMap, isRna ? { a: "u", A: "U" } : { a: "t", A: "T" });
+    const complementMap = lodashExports.merge(
+      DNAComplementMap,
+      isRna ? { a: "u", A: "U" } : { a: "t", A: "T" }
+    );
     for (let i = 0; i < sequence.length; i++) {
       let complementChar = complementMap[sequence[i]];
       if (!complementChar) {
@@ -163439,10 +163553,7 @@
           });
         }
       });
-      const toRet = lodashExports.filter(
-        resultArray,
-        (r) => r?.parsedSequence?.sequence?.length
-      );
+      const toRet = lodashExports.filter(resultArray, (r) => r?.parsedSequence?.sequence?.length);
       if (toRet.length)
         return toRet;
       return onFileParsed(resultArray);
@@ -163544,10 +163655,7 @@
           messages: ["Error while parsing JBEI format"]
         });
       }
-      const toRet = lodashExports.filter(
-        resultArray,
-        (r) => r?.parsedSequence?.sequence?.length
-      );
+      const toRet = lodashExports.filter(resultArray, (r) => r?.parsedSequence?.sequence?.length);
       if (toRet.length)
         return toRet;
       return onFileParsed(resultArray);
@@ -166822,10 +166930,7 @@
     lastSavedIdUpdate
   }, Symbol.toStringTag, { value: 'Module' }));
 
-  const toggleReadOnlyMode = createMetaAction(
-    "TOGGLE_READ_ONLY_MODE",
-    lodashExports.noop
-  );
+  const toggleReadOnlyMode = createMetaAction("TOGGLE_READ_ONLY_MODE", lodashExports.noop);
   const updateReadOnlyMode = createMetaAction("UPDATE_READ_ONLY_MODE");
   const readOnly = createReducer(
     {
@@ -169804,6 +169909,9 @@
       overrideName: `AddOrEdit${nameUpper}DialogOverride`,
       dialogType,
       props: {
+        ...annotation.isEditLocked && {
+          readOnly: typeof annotation.isEditLocked === "string" ? annotation.isEditLocked : "This annotation is locked"
+        },
         dialogProps: {
           title: annotation && annotation.id ? `Edit ${nameUpper}` : `New ${nameUpper}`
         },
@@ -170445,7 +170553,8 @@
       editorName,
       sequenceData: sequenceDataFromProps,
       allowSeqDataOverride,
-      allowMultipleFeatureDirections
+      allowMultipleFeatureDirections,
+      readOnly
     } = ownProps;
     const editorState = getEditorState(state, editorName);
     const meta = { editorName };
@@ -170505,6 +170614,7 @@
     const f = getFindTool(findTool, matchesTotal);
     return {
       ...editorState,
+      readOnly: readOnly || editorState.readOnly,
       meta,
       annotationToAdd,
       ...newSelection && { selectionLayer: newSelection },
@@ -188651,7 +188761,7 @@ double click --> edit`}`;
   }
 
   const name = "@teselagen/ove";
-  const version = "0.3.10";
+  const version = "0.3.12";
   const main = "./src/index.js";
   const exports$1 = {
   	".": {
@@ -189193,6 +189303,184 @@ double click --> edit`}`;
     );
   }
 
+  const style$i = '';
+
+  class ToolbarItem extends React$3.Component {
+    toggleDropdown = ({ forceClose } = {}) => {
+      const { toolName, isOpen } = this.props;
+      this.props.openToolbarItemUpdate(isOpen || forceClose ? "" : toolName);
+    };
+    render() {
+      const { overrides = {} } = this.props;
+      const {
+        isOpen,
+        index,
+        Icon: Icon$1,
+        // dynamicIcon,
+        onIconClick = lodashExports.noop,
+        tooltip = "",
+        tooltipToggled,
+        dropdowntooltip = "",
+        Dropdown,
+        disabled,
+        isHidden,
+        renderIconAbove,
+        noDropdownIcon,
+        IconWrapper,
+        editorName,
+        popoverDisabled,
+        IconWrapperProps,
+        toolName,
+        dropdownicon,
+        tooltipDisabled,
+        toggled = false,
+        ...rest
+      } = { ...this.props, ...overrides };
+      if (!toolName)
+        console.warn("toolName is required!");
+      if (isHidden)
+        return null;
+      let tooltipToDisplay = tooltip;
+      if (toggled && tooltipToggled) {
+        tooltipToDisplay = tooltipToggled;
+      }
+      const buttonTarget = /* @__PURE__ */ React$3.createElement(
+        "div",
+        {
+          className: `veToolbarItemOuter ve-tool-container-${toolName}` + (disabled ? " disabled " : "")
+        },
+        renderIconAbove && /* @__PURE__ */ React$3.createElement("div", null, /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarItem" }, Icon$1)),
+        Icon$1 && !renderIconAbove && /* @__PURE__ */ React$3.createElement(
+          Tooltip,
+          {
+            disabled: tooltipDisabled,
+            portalClassName: "ve-toolbar-item-popover",
+            content: tooltipToDisplay
+          },
+          /* @__PURE__ */ React$3.createElement(
+            AnchorButton,
+            {
+              intent: Intent.PRIMARY,
+              onClick: onIconClick === "toggleDropdown" ? this.toggleDropdown : onIconClick,
+              active: toggled,
+              disabled,
+              minimal: true,
+              icon: React$3.isValidElement(Icon$1) ? Icon$1 : /* @__PURE__ */ React$3.createElement(Icon$1, { toggleDropdown: this.toggleDropdown })
+            }
+          )
+        ),
+        Dropdown && !noDropdownIcon ? /* @__PURE__ */ React$3.createElement(Tooltip, { disabled: tooltipDisabled, content: dropdowntooltip }, /* @__PURE__ */ React$3.createElement(
+          "div",
+          {
+            className: (isOpen ? " isOpen " : "") + (dropdownicon ? "" : " veToolbarDropdown"),
+            onClick: this.toggleDropdown
+          },
+          dropdownicon ? /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarIcon" }, /* @__PURE__ */ React$3.createElement("div", null, dropdownicon)) : isOpen ? /* @__PURE__ */ React$3.createElement(
+            Icon,
+            {
+              "data-test": toolName + "Dropdown",
+              iconSize: 13,
+              icon: "caret-up"
+            }
+          ) : /* @__PURE__ */ React$3.createElement(
+            Icon,
+            {
+              "data-test": toolName + "Dropdown",
+              iconSize: 13,
+              icon: "caret-down"
+            }
+          )
+        )) : null
+      );
+      const content = /* @__PURE__ */ React$3.createElement(
+        "div",
+        {
+          ref: (n) => {
+            if (n)
+              this.dropdownNode = n;
+          },
+          style: { padding: 10, minWidth: 250, maxWidth: 350 },
+          className: "ve-toolbar-dropdown content"
+        },
+        Dropdown && /* @__PURE__ */ React$3.createElement(
+          Dropdown,
+          {
+            ...rest,
+            editorName,
+            toggleDropdown: this.toggleDropdown
+          }
+        )
+      );
+      const target = IconWrapper ? /* @__PURE__ */ React$3.createElement(IconWrapper, { ...IconWrapperProps }, ({ getRootProps, getInputProps }) => /* @__PURE__ */ React$3.createElement("div", { ...getRootProps() }, /* @__PURE__ */ React$3.createElement("input", { ...getInputProps() }), buttonTarget)) : buttonTarget;
+      return /* @__PURE__ */ React$3.createElement("div", { style: { display: "flex", alignItems: "center" } }, index !== 0 && /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarSpacer" }), /* @__PURE__ */ React$3.createElement(
+        Popover,
+        {
+          disabled: popoverDisabled,
+          isOpen: !!Dropdown && isOpen,
+          onClose: (e) => {
+            let srcElement;
+            if (e) {
+              srcElement = e.srcElement || e.target;
+            }
+            if (e && srcElement && this.dropdownNode && (this.dropdownNode.contains(srcElement) || !document.body.contains(srcElement))) {
+              return;
+            }
+            this.toggleDropdown({ forceClose: true });
+          },
+          canEscapeKeyClose: true,
+          minimal: true,
+          position: Position.BOTTOM,
+          target,
+          content
+        }
+      ));
+    }
+  }
+  const ToolbarItem$1 = connectToEditor(({ toolBar = {} }, { toolName }) => ({
+    isOpen: toolBar.openItem === toolName
+  }))(ToolbarItem);
+
+  const editTool = connectToEditor((editorState) => {
+    return {
+      readOnly: editorState.readOnly
+    };
+  })((props) => {
+    const { toolbarItemProps, readOnly, disableSetReadOnly } = props;
+    const [isLoading, setIsLoading] = reactExports.useState(false);
+    const readOnlyTooltip = ({ readOnly: readOnly2, disableSetReadOnly: disableSetReadOnly2 }) => {
+      if (isLoading) {
+        return "Loading...";
+      } else if (disableSetReadOnly2) {
+        return "You do not have permission to edit locks on this sequence";
+      }
+      return readOnly2 ? "Click to enable editing" : "Click to disable editing";
+    };
+    return /* @__PURE__ */ React$3.createElement(
+      ToolbarItem$1,
+      {
+        ...{
+          disabled: isLoading || disableSetReadOnly,
+          Icon: /* @__PURE__ */ React$3.createElement(Icon, { icon: readOnly ? "lock" : "unlock" }),
+          onIconClick: () => handleReadOnlyChange(!readOnly, { ...props, setIsLoading }),
+          tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),
+          ...toolbarItemProps
+        }
+      }
+    );
+  });
+  async function handleReadOnlyChange(newVal, { beforeReadOnlyChange, updateReadOnlyMode, setIsLoading = () => {
+  } }) {
+    if (beforeReadOnlyChange) {
+      setIsLoading(true);
+      const shouldChange = await beforeReadOnlyChange(newVal);
+      setIsLoading(false);
+      if (shouldChange === false) {
+        return;
+      }
+    }
+    updateReadOnlyMode(newVal);
+  }
+
   const isProtein = (props) => props.sequenceData && props.sequenceData.isProtein;
   const isOligo = (props) => props.sequenceData && props.sequenceData.isOligo;
   const isRna = (props) => props.sequenceData && props.sequenceData.isRna;
@@ -189261,7 +189549,7 @@ double click --> edit`}`;
       isHidden: isProtein
     },
     deleteSequence: {
-      isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || !props.onDelete,
+      isDisabled: (props) => props.disableBpEditing && bpEditingDisabledTooltip || props.readOnly && readOnlyDisabledTooltip || !props.onDelete,
       isHidden: (props) => !props.onDelete,
       handler: (props) => props.onDelete(props.sequenceData)
     },
@@ -189276,7 +189564,7 @@ double click --> edit`}`;
       isDisabled: (props) => props.disableSetReadOnly || !props.onSave,
       isHidden: (props) => !props.toggleReadOnlyMode,
       isActive: (props) => props.readOnly,
-      handler: (props) => props.toggleReadOnlyMode()
+      handler: (props) => handleReadOnlyChange(!props.readOnly, props)
     },
     importSequence: {
       isHidden: (props) => props.hideSingleImport,
@@ -189460,6 +189748,7 @@ double click --> edit`}`;
     };
   });
   const readOnlyDisabledTooltip = "Sorry this function is not allowed in Read-Only Mode";
+  const bpEditingDisabledTooltip = "Sequence Editing Disabled";
   const noSelection = ({ selectionLayer = {} }) => !(selectionLayer.start > -1 && selectionLayer.end > -1) && "Selection Required";
   const triggerClipboardCommand = (type) => {
     const wrapper = document.querySelector(".veVectorInteractionWrapper");
@@ -189491,8 +189780,8 @@ double click --> edit`}`;
       handler: lodashExports.noop
     },
     cut: {
-      isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || props.sequenceLength === 0,
-      isHidden: (props) => props.readOnly,
+      isDisabled: (props) => props.disableBpEditing && bpEditingDisabledTooltip || props.readOnly && readOnlyDisabledTooltip || props.sequenceLength === 0,
+      isHidden: (props) => props.readOnly || props.disableBpEditing,
       handler: () => {
         triggerClipboardCommand("cut");
       },
@@ -189517,7 +189806,7 @@ double click --> edit`}`;
     },
     paste: {
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip,
-      isHidden: (props) => props.readOnly,
+      isHidden: (props) => props.readOnly || props.disableBpEditing,
       handler: () => triggerClipboardCommand("paste"),
       hotkey: "mod+v"
     },
@@ -189671,12 +189960,12 @@ double click --> edit`}`;
       hotkey: "mod+i"
     },
     complementSelection: {
-      isHidden: (props) => props.readOnly || isProtein(props),
+      isHidden: (props) => props.readOnly || isProtein(props) || props.disableBpEditing,
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || noSelection(props),
       handler: (props) => props.handleComplementSelection()
     },
     complementEntireSequence: {
-      isHidden: (props) => props.readOnly || isProtein(props),
+      isHidden: (props) => props.readOnly || isProtein(props) || props.disableBpEditing,
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || props.sequenceLength === 0,
       handler: (props) => props.handleComplementSequence()
     },
@@ -189828,13 +190117,13 @@ double click --> edit`}`;
     //   }
     // },
     reverseComplementSelection: {
-      isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || noSelection(props),
+      isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || noSelection(props) || props.disableBpEditing,
       isHidden: (props) => props.readOnly || isProtein(props),
       handler: (props) => props.handleReverseComplementSelection(),
       hotkey: "mod+e"
     },
     reverseComplementEntireSequence: {
-      isHidden: (props) => props.readOnly || isProtein(props),
+      isHidden: (props) => props.readOnly || isProtein(props) || props.disableBpEditing,
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || props.sequenceLength === 0,
       handler: (props) => props.handleReverseComplementSequence()
     },
@@ -189984,7 +190273,7 @@ double click --> edit`}`;
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || props.sequenceLength === 0
     },
     rotateToCaretPosition: {
-      isHidden: (props) => props.readOnly || isProtein(props),
+      isHidden: (props) => props.readOnly || isProtein(props) || props.disableBpEditing,
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip || props.caretPosition === -1 && "You must first place cursor" || !props.sequenceData.circular && "Disabled for Linear Sequences" || props.sequenceLength === 0,
       handler: (props) => props.handleRotateToCaretPosition(),
       hotkey: "mod+b"
@@ -189993,13 +190282,13 @@ double click --> edit`}`;
   };
   const cirularityCommandDefs = {
     circular: {
-      isHidden: (props) => props.readOnly || isProtein(props),
+      isHidden: (props) => props.readOnly || isProtein(props) || props.disableBpEditing,
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip,
       handler: (props) => props.updateCircular(true),
       isActive: (props) => props && props.sequenceData.circular
     },
     linear: {
-      isHidden: (props) => props.readOnly,
+      isHidden: (props) => props.readOnly || props.disableBpEditing,
       isDisabled: (props) => props.readOnly && readOnlyDisabledTooltip,
       handler: (props) => props.updateCircular(false),
       isActive: (props) => props && !props.sequenceData.circular
@@ -190026,29 +190315,27 @@ double click --> edit`}`;
     }
   ];
   const labelToggleCommandDefs = {};
-  ["feature", "part", "cutsite", "primer", ...nicheAnnotations].forEach(
-    (_type) => {
-      let rest = {};
-      let type = _type;
-      if (_type.type) {
-        type = _type.type.slice(0, -1);
-        rest = _type;
-      }
-      const cmdId = `toggle${lodashExports.upperFirst(type)}Labels`;
-      const plural = type + "s";
-      labelToggleCommandDefs[cmdId] = {
-        toggle: ["show", "hide"],
-        handler: (props) => props.annotationLabelVisibilityToggle(plural),
-        isHidden: (props) => {
-          return props && props.typesToOmit && props.typesToOmit[plural] === false;
-        },
-        ...rest,
-        isActive: (props) => {
-          return props && props.annotationLabelVisibility[plural];
-        }
-      };
-    }
-  );
+  ["feature", "part", "cutsite", "primer", ...nicheAnnotations].forEach((_type) => {
+    let rest = {};
+    let type = _type;
+    if (_type.type) {
+      type = _type.type.slice(0, -1);
+      rest = _type;
+    }
+    const cmdId = `toggle${lodashExports.upperFirst(type)}Labels`;
+    const plural = type + "s";
+    labelToggleCommandDefs[cmdId] = {
+      toggle: ["show", "hide"],
+      handler: (props) => props.annotationLabelVisibilityToggle(plural),
+      isHidden: (props) => {
+        return props && props.typesToOmit && props.typesToOmit[plural] === false;
+      },
+      ...rest,
+      isActive: (props) => {
+        return props && props.annotationLabelVisibility[plural];
+      }
+    };
+  });
   const editAnnotationCommandDefs = ["feature", "part", "primer"].reduce(
     (acc, key) => {
       acc[`edit${lodashExports.upperFirst(key)}`] = {
@@ -191621,8 +191908,12 @@ double click --> edit`}`;
           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");
         }
@@ -191663,6 +191954,7 @@ double click --> edit`}`;
           sequenceData,
           selectionLayer,
           copyOptions,
+          disableBpEditing,
           readOnly
         } = this.props;
         const onCut = this.props.onCut || this.props.onCopy || lodashExports.noop;
@@ -191688,7 +191980,7 @@ double click --> edit`}`;
         );
         if (!(this.sequenceDataToCopy || {}).textToCopy && !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;
         const textToCopy = (this.sequenceDataToCopy || {}).textToCopy !== void 0 ? this.sequenceDataToCopy.textToCopy : seqData.isProtein ? seqData.proteinSequence : seqData.sequence;
@@ -191696,7 +191988,7 @@ double click --> edit`}`;
         clipboardData.setData("text/plain", textToCopy);
         clipboardData.setData("application/json", JSON.stringify(seqData));
         e.preventDefault();
-        if (isCut && !readOnly) {
+        if (isCut && !(readOnly || disableBpEditing) && !disableBpEditing) {
           this.handleDnaDelete(false);
           onCut(
             e,
@@ -191709,7 +192001,7 @@ double click --> edit`}`;
           document.body.removeEventListener("copy", this.handleCopy);
         }
         window.toastr.success(
-          `Selection ${isCut && !readOnly ? "Cut" : "Copied"}`
+          `Selection ${isCut && !(readOnly || disableBpEditing) && !disableBpEditing ? "Cut" : "Copied"}`
         );
         this.sequenceDataToCopy = void 0;
       };
@@ -191720,14 +192012,18 @@ double click --> edit`}`;
           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({
@@ -191755,13 +192051,17 @@ double click --> edit`}`;
           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) {
@@ -191892,7 +192192,7 @@ double click --> edit`}`;
       };
       // eslint-disable-next-line no-unused-vars
       getCopyOptions = (annotation) => {
-        const { sequenceData, readOnly, selectionLayer } = this.props;
+        const { sequenceData, readOnly, disableBpEditing, selectionLayer } = this.props;
         const { isProtein } = sequenceData;
         const makeTextCopyable = (transformFunc, className, action = "copy") => {
           return new Clipboard$1(`.${className}`, {
@@ -191952,7 +192252,7 @@ double click --> edit`}`;
           }
         };
         return [
-          ...readOnly ? [] : [
+          ...readOnly || disableBpEditing ? [] : [
             {
               text: "Replace",
               ...this.insertHelper
@@ -192026,21 +192326,14 @@ double click --> edit`}`;
                   this.openVeCopyAAReverse && this.openVeCopyAAReverse.destroy();
                 },
                 didMount: ({ className }) => {
-                  this.openVeCopyAAReverse = makeTextCopyable(
-                    (selectedSeqData) => {
-                      const revSeqData = getReverseComplementSequenceAndAnnoations(
-                        selectedSeqData
-                      );
-                      const textToCopy = isProtein ? revSeqData.proteinSequence.toUpperCase() : getAminoAcidStringFromSequenceString(
-                        revSeqData.sequence
-                      );
-                      return {
-                        ...revSeqData,
-                        textToCopy
-                      };
-                    },
-                    className
-                  );
+                  this.openVeCopyAAReverse = makeTextCopyable((selectedSeqData) => {
+                    const revSeqData = getReverseComplementSequenceAndAnnoations(selectedSeqData);
+                    const textToCopy = isProtein ? revSeqData.proteinSequence.toUpperCase() : getAminoAcidStringFromSequenceString(revSeqData.sequence);
+                    return {
+                      ...revSeqData,
+                      textToCopy
+                    };
+                  }, className);
                 }
               },
               {
@@ -192147,11 +192440,12 @@ double click --> edit`}`;
         ({ nearestCaretPos, shiftHeld, event }) => {
           this.updateSelectionOrCaret(shiftHeld, nearestCaretPos);
           const {
-            readOnly
+            readOnly,
+            disableBpEditing
             // sequenceData: { circular }
           } = this.props;
           const menu = [
-            ...readOnly ? [] : [
+            ...readOnly || disableBpEditing ? [] : [
               {
                 text: "Insert",
                 ...this.insertHelper
@@ -192197,8 +192491,7 @@ double click --> edit`}`;
           overlapsSelf: annotation.overlapsSelf
         });
         return [
-          "editPart",
-          "deletePart",
+          ...getEditDeleteHandlers("Part", annotation),
           "--",
           ...this.getSelectionMenuOptions(annotation),
           "--",
@@ -192240,8 +192533,7 @@ double click --> edit`}`;
           event.persist();
           const { readOnly, annotationsToSupport: { parts } = {} } = this.props;
           return [
-            "editFeature",
-            "deleteFeature",
+            ...getEditDeleteHandlers("Feature", annotation),
             ...this.getSelectionMenuOptions(annotation),
             ...readOnly ? [] : [
               ...parts && [
@@ -192308,8 +192600,7 @@ double click --> edit`}`;
             end: annotation.end
           });
           return [
-            "editPrimer",
-            "deletePrimer",
+            ...getEditDeleteHandlers("Primer", annotation),
             ...this.getSelectionMenuOptions(annotation),
             "showRemoveDuplicatesDialogPrimers",
             "viewPrimerProperties"
@@ -192519,8 +192810,30 @@ double click --> edit`}`;
       end: newSelectionLayerEnd % newSeqData.sequence.length
     });
   };
+  function getEditDeleteHandlers(type, annotation) {
+    return [
+      ...annotation.isEditLocked ? [
+        {
+          shouldDismissPopover: false,
+          text: /* @__PURE__ */ React$3.createElement(
+            "div",
+            {
+              style: {
+                fontSize: 11,
+                fontStyle: "italic",
+                color: "rgba(0,0,0,.5)"
+              }
+            },
+            typeof annotation.isEditLocked === "string" ? annotation.isEditLocked : `Note: This Annotation is Locked`
+          )
+        }
+      ] : [],
+      `edit${type}`,
+      ...annotation.isEditLocked ? [] : [`delete${type}`]
+    ];
+  }
 
-  const style$i = '';
+  const style$h = '';
 
   function SequenceName({ sequenceName, sequenceLength, isProtein }) {
     return /* @__PURE__ */ React$3.createElement("div", { key: "circViewSvgCenterText", style: { textAlign: "center" } }, /* @__PURE__ */ React$3.createElement("span", null, sequenceName, " "), /* @__PURE__ */ React$3.createElement("br", null), /* @__PURE__ */ React$3.createElement("span", null, isProtein ? `${Math.floor(sequenceLength / 3)} AAs` : `${sequenceLength} bps`));
@@ -194906,7 +195219,7 @@ double click --> edit`}`;
     );
   }
 
-  const style$h = '';
+  const style$g = '';
 
   const simpleDialog = '';
 
@@ -195183,7 +195496,7 @@ double click --> edit`}`;
     return combinedLabels;
   }
 
-  const style$g = '';
+  const style$f = '';
 
   const fontWidthToFontSize = 1.75;
   const getTextLength = (text) => {
@@ -197386,7 +197699,7 @@ double click --> edit`}`;
   }
   const DrawAnnotation = withHover(DrawAnnotationInner);
 
-  const style$f = '';
+  const style$e = '';
 
   function c(u,e,c){var i=this,a=reactExports.useRef(null),o=reactExports.useRef(0),f=reactExports.useRef(null),l=reactExports.useRef([]),m=reactExports.useRef(),v=reactExports.useRef(),d=reactExports.useRef(u),p=reactExports.useRef(!0);reactExports.useEffect(function(){d.current=u;},[u]);var g=!e&&0!==e&&"undefined"!=typeof window;if("function"!=typeof u)throw new TypeError("Expected a function");e=+e||0;var w=!!(c=c||{}).leading,s=!("trailing"in c)||!!c.trailing,x="maxWait"in c,y=x?Math.max(+c.maxWait||0,e):null;reactExports.useEffect(function(){return p.current=!0,function(){p.current=!1;}},[]);var h=reactExports.useMemo(function(){var r=function(r){var n=l.current,t=m.current;return l.current=m.current=null,o.current=r,v.current=d.current.apply(t,n)},n=function(r,n){g&&cancelAnimationFrame(f.current),f.current=g?requestAnimationFrame(r):setTimeout(r,n);},t=function(r){if(!p.current)return !1;var n=r-a.current;return !a.current||n>=e||n<0||x&&r-o.current>=y},u=function(n){return f.current=null,s&&l.current?r(n):(l.current=m.current=null,v.current)},c=function r(){var c=Date.now();if(t(c))return u(c);if(p.current){var i=e-(c-a.current),f=x?Math.min(i,y-(c-o.current)):i;n(r,f);}},h=function(){var u=Date.now(),d=t(u);if(l.current=[].slice.call(arguments),m.current=i,a.current=u,d){if(!f.current&&p.current)return o.current=a.current,n(c,e),w?r(a.current):v.current;if(x)return n(c,e),r(a.current)}return f.current||n(c,e),v.current};return h.cancel=function(){f.current&&(g?cancelAnimationFrame(f.current):clearTimeout(f.current)),o.current=0,l.current=a.current=m.current=f.current=null;},h.isPending=function(){return !!f.current},h.flush=function(){return f.current?u(Date.now()):v.current},h},[w,x,e,y,s,g]);return h}
 
@@ -198319,7 +198632,7 @@ double click --> edit`}`;
   }
   const CircularView$1 = withEditorInteractions(CircularView);
 
-  const style$e = '';
+  const style$d = '';
 
   class PrintDialog extends React$3.Component {
     state = {
@@ -198800,7 +199113,7 @@ double click --> edit`}`;
     tgFormValues("ignoreName", "ignoreStrand", "ignoreStartAndEnd")
   )(RemoveDuplicatesDialog);
 
-  const style$d = '';
+  const style$c = '';
 
   var isMobile$2 = {exports: {}};
 
@@ -199676,7 +199989,11 @@ double click --> edit`}`;
         }
       }
     ],
-    withDialogProps: { title: "Go To", height: 190, onCloseHook: tryToRefocusEditor }
+    withDialogProps: {
+      title: "Go To",
+      height: 190,
+      onCloseHook: tryToRefocusEditor
+    }
   });
 
   const validate$1 = (val, vals, props) => {
@@ -199818,7 +200135,7 @@ double click --> edit`}`;
     return normalizedVal;
   };
 
-  const style$c = '';
+  const style$b = '';
 
   const EnzymeViewer = ({
     extraClasses = "",
@@ -199893,7 +200210,7 @@ double click --> edit`}`;
     );
   };
 
-  const style$b = '';
+  const style$a = '';
 
   const upsertLocalEnzymeGroups = (newGroups) => {
     const existingGroups = window.getExistingEnzymeGroups();
@@ -200589,7 +200906,7 @@ double click --> edit`}`;
     );
   });
 
-  const style$a = '';
+  const style$9 = '';
 
   const CreateCustomEnzyme = function(props) {
     const paddingStart = "-------";
@@ -201414,143 +201731,6 @@ double click --> edit`}`;
     return isHidden;
   }
 
-  const style$9 = '';
-
-  class ToolbarItem extends React$3.Component {
-    toggleDropdown = ({ forceClose } = {}) => {
-      const { toolName, isOpen } = this.props;
-      this.props.openToolbarItemUpdate(isOpen || forceClose ? "" : toolName);
-    };
-    render() {
-      const { overrides = {} } = this.props;
-      const {
-        isOpen,
-        index,
-        Icon: Icon$1,
-        // dynamicIcon,
-        onIconClick = lodashExports.noop,
-        tooltip = "",
-        tooltipToggled,
-        dropdowntooltip = "",
-        Dropdown,
-        disabled,
-        isHidden,
-        renderIconAbove,
-        noDropdownIcon,
-        IconWrapper,
-        editorName,
-        popoverDisabled,
-        IconWrapperProps,
-        toolName,
-        dropdownicon,
-        tooltipDisabled,
-        toggled = false,
-        ...rest
-      } = { ...this.props, ...overrides };
-      if (!toolName)
-        console.warn("toolName is required!");
-      if (isHidden)
-        return null;
-      let tooltipToDisplay = tooltip;
-      if (toggled && tooltipToggled) {
-        tooltipToDisplay = tooltipToggled;
-      }
-      const buttonTarget = /* @__PURE__ */ React$3.createElement(
-        "div",
-        {
-          className: `veToolbarItemOuter ve-tool-container-${toolName}` + (disabled ? " disabled " : "")
-        },
-        renderIconAbove && /* @__PURE__ */ React$3.createElement("div", null, /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarItem" }, Icon$1)),
-        Icon$1 && !renderIconAbove && /* @__PURE__ */ React$3.createElement(
-          Tooltip,
-          {
-            disabled: tooltipDisabled,
-            portalClassName: "ve-toolbar-item-popover",
-            content: tooltipToDisplay
-          },
-          /* @__PURE__ */ React$3.createElement(
-            AnchorButton,
-            {
-              intent: Intent.PRIMARY,
-              onClick: onIconClick === "toggleDropdown" ? this.toggleDropdown : onIconClick,
-              active: toggled,
-              disabled,
-              minimal: true,
-              icon: React$3.isValidElement(Icon$1) ? Icon$1 : /* @__PURE__ */ React$3.createElement(Icon$1, { toggleDropdown: this.toggleDropdown })
-            }
-          )
-        ),
-        Dropdown && !noDropdownIcon ? /* @__PURE__ */ React$3.createElement(Tooltip, { disabled: tooltipDisabled, content: dropdowntooltip }, /* @__PURE__ */ React$3.createElement(
-          "div",
-          {
-            className: (isOpen ? " isOpen " : "") + (dropdownicon ? "" : " veToolbarDropdown"),
-            onClick: this.toggleDropdown
-          },
-          dropdownicon ? /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarIcon" }, /* @__PURE__ */ React$3.createElement("div", null, dropdownicon)) : isOpen ? /* @__PURE__ */ React$3.createElement(
-            Icon,
-            {
-              "data-test": toolName + "Dropdown",
-              iconSize: 13,
-              icon: "caret-up"
-            }
-          ) : /* @__PURE__ */ React$3.createElement(
-            Icon,
-            {
-              "data-test": toolName + "Dropdown",
-              iconSize: 13,
-              icon: "caret-down"
-            }
-          )
-        )) : null
-      );
-      const content = /* @__PURE__ */ React$3.createElement(
-        "div",
-        {
-          ref: (n) => {
-            if (n)
-              this.dropdownNode = n;
-          },
-          style: { padding: 10, minWidth: 250, maxWidth: 350 },
-          className: "ve-toolbar-dropdown content"
-        },
-        Dropdown && /* @__PURE__ */ React$3.createElement(
-          Dropdown,
-          {
-            ...rest,
-            editorName,
-            toggleDropdown: this.toggleDropdown
-          }
-        )
-      );
-      const target = IconWrapper ? /* @__PURE__ */ React$3.createElement(IconWrapper, { ...IconWrapperProps }, ({ getRootProps, getInputProps }) => /* @__PURE__ */ React$3.createElement("div", { ...getRootProps() }, /* @__PURE__ */ React$3.createElement("input", { ...getInputProps() }), buttonTarget)) : buttonTarget;
-      return /* @__PURE__ */ React$3.createElement("div", { style: { display: "flex", alignItems: "center" } }, index !== 0 && /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarSpacer" }), /* @__PURE__ */ React$3.createElement(
-        Popover,
-        {
-          disabled: popoverDisabled,
-          isOpen: !!Dropdown && isOpen,
-          onClose: (e) => {
-            let srcElement;
-            if (e) {
-              srcElement = e.srcElement || e.target;
-            }
-            if (e && srcElement && this.dropdownNode && (this.dropdownNode.contains(srcElement) || !document.body.contains(srcElement))) {
-              return;
-            }
-            this.toggleDropdown({ forceClose: true });
-          },
-          canEscapeKeyClose: true,
-          minimal: true,
-          position: Position.BOTTOM,
-          target,
-          content
-        }
-      ));
-    }
-  }
-  const ToolbarItem$1 = connectToEditor(({ toolBar = {} }, { toolName }) => ({
-    isOpen: toolBar.openItem === toolName
-  }))(ToolbarItem);
-
   function array_move(arr, old_index, new_index) {
     if (new_index >= arr.length) {
       let k = new_index - arr.length + 1;
@@ -202336,6 +202516,7 @@ double click --> edit`}`;
         overlapsSelf,
         start,
         end,
+        readOnly,
         getAdditionalEditAnnotationComps,
         advancedOptions,
         advancedDefaultOpen,
@@ -202430,10 +202611,11 @@ double click --> edit`}`;
             "tg-upsert-annotation"
           )
         },
+        typeof readOnly === "string" ? /* @__PURE__ */ React$3.createElement(Callout, { intent: "primary", style: { marginBottom: 10 } }, readOnly) : null,
         /* @__PURE__ */ React$3.createElement(
           InputField,
           {
-            disabled: this.props.readOnly,
+            disabled: readOnly,
             inlineLabel: true,
             tooltipError: true,
             autoFocus: true,
@@ -205371,15 +205553,15 @@ ${seqDataToCopy}\r
     }
     // Edge 20+
     static isEdge() {
-      return Browser.isBrowser() && (!Browser.isIE() && !!window.StyleMedia);
+      return Browser.isBrowser() && !Browser.isIE() && !!window.StyleMedia;
     }
     // Chrome 1+
     static isChrome() {
-      return Browser.isBrowser() && (!!window.chrome && !!window.chrome.webstore);
+      return Browser.isBrowser() && !!window.chrome && !!window.chrome.webstore;
     }
     // Blink engine detection
     static isBlink() {
-      return Browser.isBrowser() && ((Browser.isChrome() || Browser.isOpera()) && !!window.CSS);
+      return Browser.isBrowser() && (Browser.isChrome() || Browser.isOpera()) && !!window.CSS;
     }
     static getUserAgent() {
       return typeof navigator === "undefined" ? "" : navigator.userAgent;
@@ -207024,7 +207206,7 @@ ${seqDataToCopy}\r
   }
 
   const userDefinedHandlersAndOpts = [
-    "onChangeEditLock",
+    "beforeReadOnlyChange",
     "defaultLinkedOligoMessage",
     "allowMultipleFeatureDirections",
     "getAdditionalEditAnnotationComps",
@@ -207045,6 +207227,8 @@ ${seqDataToCopy}\r
     "hideSingleImport",
     "beforeAnnotationCreate",
     "disableSetReadOnly",
+    "allowAnnotationEditLocking",
+    "disableBpEditing",
     "showReadOnly",
     "showCircularity",
     "onHiddenEnzymeAdd",
@@ -207285,49 +207469,6 @@ ${seqDataToCopy}\r
     }
   );
 
-  const editTool = connectToEditor((editorState) => {
-    return {
-      readOnly: editorState.readOnly
-    };
-  })(
-    ({
-      toolbarItemProps,
-      readOnly,
-      toggleReadOnlyMode,
-      disableSetReadOnly,
-      onChangeEditLock
-    }) => {
-      const [isLoading, setIsLoading] = reactExports.useState(false);
-      const readOnlyTooltip = ({ readOnly: readOnly2, disableSetReadOnly: disableSetReadOnly2 }) => {
-        if (isLoading) {
-          return "Loading...";
-        } else if (disableSetReadOnly2) {
-          return "You do not have permission to edit locks on this sequence";
-        }
-        return readOnly2 ? "Click to enable editing" : "Click to disable editing";
-      };
-      return /* @__PURE__ */ React$3.createElement(
-        ToolbarItem$1,
-        {
-          ...{
-            disabled: isLoading || disableSetReadOnly,
-            Icon: /* @__PURE__ */ React$3.createElement(Icon, { icon: readOnly ? "lock" : "unlock" }),
-            onIconClick: async () => {
-              if (onChangeEditLock) {
-                setIsLoading(true);
-                await onChangeEditLock(!readOnly);
-                setIsLoading(false);
-              }
-              toggleReadOnlyMode();
-            },
-            tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),
-            ...toolbarItemProps
-          }
-        }
-      );
-    }
-  );
-
   const style$4 = '';
 
   const opts = [
@@ -207948,31 +208089,22 @@ ${seqDataToCopy}\r
 
   const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
     readOnly
-  }))(
-    ({
-      onSave,
-      readOnly,
-      showReadOnly,
-      disableSetReadOnly,
-      updateReadOnlyMode
-    }) => {
-      return showReadOnly ? /* @__PURE__ */ React$3.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React$3.createElement(
-        HTMLSelect,
-        {
-          options: [
-            { label: "Read Only", value: "readOnly" },
-            { label: "Editable", value: "editable" }
-          ],
-          disabled: disableSetReadOnly || !onSave,
-          className: MINIMAL,
-          value: readOnly ? "readOnly" : "editable",
-          onChange: ({ target: { value } }) => {
-            updateReadOnlyMode(value === "readOnly");
-          }
-        }
-      ) : readOnly ? "Read Only" : "Editable") : null;
-    }
-  );
+  }))((props) => {
+    const { onSave, readOnly, showReadOnly, disableSetReadOnly } = props;
+    return showReadOnly ? /* @__PURE__ */ React$3.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React$3.createElement(
+      HTMLSelect,
+      {
+        options: [
+          { label: "Read Only", value: "readOnly" },
+          { label: "Editable", value: "editable" }
+        ],
+        disabled: disableSetReadOnly || !onSave,
+        className: MINIMAL,
+        value: readOnly ? "readOnly" : "editable",
+        onChange: ({ target: { value } }) => handleReadOnlyChange(value === "readOnly", props)
+      }
+    ) : readOnly ? "Read Only" : "Editable") : null;
+  });
   const ShowSelectionItem = compose(
     connectToEditor(
       ({ selectionLayer, caretPosition, sequenceData = { sequence: "" } }, ownProps, ...rest) => {
@@ -208119,11 +208251,13 @@ ${seqDataToCopy}\r
     showGCContentByDefault,
     onSelectionOrCaretChanged,
     GCDecimalDigits = 1,
-    isProtein
+    isProtein,
+    beforeReadOnlyChange
   }) {
     return /* @__PURE__ */ React$3.createElement("div", { className: "veStatusBar" }, showMoleculeType && /* @__PURE__ */ React$3.createElement(ShowTypeItem, { editorName }), /* @__PURE__ */ React$3.createElement(
       EditReadOnlyItem,
       {
+        beforeReadOnlyChange,
         editorName,
         onSave,
         disableSetReadOnly,
@@ -208458,9 +208592,7 @@ ${seqDataToCopy}\r
                 AnchorButton,
                 {
                   onClick: () => {
-                    deleteAnnotation(
-                      annotationPropertiesSelectedEntities
-                    );
+                    deleteAnnotation(annotationPropertiesSelectedEntities);
                   },
                   className: "tgDeleteAnnsBtn",
                   intent: "danger",
@@ -208564,7 +208696,6 @@ ${seqDataToCopy}\r
         disableSetReadOnly,
         updateAvailability,
         sequenceData,
-        updateReadOnlyMode,
         onSave,
         showAvailability,
         sequenceNameUpdate
@@ -208619,10 +208750,9 @@ ${seqDataToCopy}\r
       ))), /* @__PURE__ */ React$3.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-left bp3-label" }, "Length"), " ", /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-right" }, " ", isProtein ? proteinSequence.length : sequence.length)), showReadOnly && /* @__PURE__ */ React$3.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-left bp3-label" }, "Is Editable"), " ", /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$3.createElement(
         BPSelect,
         {
+          className: "veReadOnlySelect",
           disabled: !onSave || disableSetReadOnly,
-          onChange: (val) => {
-            updateReadOnlyMode(val === "readOnly");
-          },
+          onChange: (val) => console.log(`val:`, val) || handleReadOnlyChange(val === "readOnly", this.props),
           value: readOnly ? "readOnly" : "editable",
           options: [
             { label: "Read Only", value: "readOnly" },
@@ -218695,7 +218825,7 @@ ${seqDataToCopy}\r
             contentLeft: this.props.contentLeft,
             editorName,
             withDigestTool: true,
-            onChangeEditLock: this.props.onChangeEditLock,
+            beforeReadOnlyChange: this.props.beforeReadOnlyChange,
             ...ToolBarProps
           }
         ),