@teselagen/ove 0.3.12 → 0.3.13

package/index.mjs

@@ -1,5 +1,5 @@
 import './style.css';
-import { Icon, Classes, Button, Intent, Keys, MenuItem, Tag, useHotkeys, Popover, Tooltip, Toaster, Position, Menu, MenuDivider, NumericInput, InputGroup, Spinner, FormGroup, TextArea, Checkbox, Switch, EditableText, RadioGroup, Callout, ContextMenu, Dialog, Card, Tabs, Tab, Colors, KeyCombo, Slider as Slider$1, ButtonGroup, AnchorButton, HTMLSelect, Label, ResizeSensor, FocusStyleManager } from '@blueprintjs/core';
+import { Icon, Classes, Button, Intent, Keys, MenuItem, Tag, useHotkeys, Popover, Tooltip, Toaster, Position, Menu, MenuDivider, NumericInput, InputGroup, Spinner, FormGroup, TextArea, Checkbox, Switch, EditableText, RadioGroup, Callout, ContextMenu, Dialog, Card, Tabs, Tab, Colors, KeyCombo, AnchorButton, Slider as Slider$1, ButtonGroup, HTMLSelect, Label, ResizeSensor, FocusStyleManager } from '@blueprintjs/core';
 import * as React$3 from 'react';
 import React__default$1, { forwardRef, useImperativeHandle, Fragment, useMemo as useMemo$1, useRef, useReducer, useEffect, useCallback as useCallback$1, useState, memo, Component, PureComponent, createElement, isValidElement, useContext, useLayoutEffect as useLayoutEffect$1 } from 'react';
 import ReactDOM$1, { unstable_batchedUpdates, findDOMNode as findDOMNode$2, flushSync, unmountComponentAtNode, render as render$2 } from 'react-dom';
@@ -7404,7 +7404,7 @@ function getPlainObjectKeys(object) {
 var ownKeys$8 = typeof Reflect !== "undefined" && Reflect.ownKeys ? Reflect.ownKeys : hasGetOwnPropertySymbols ? function (obj) {
   return Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj));
 } : /* istanbul ignore next */Object.getOwnPropertyNames;
-function toPrimitive$2(value) {
+function toPrimitive$3(value) {
   return value === null ? null : typeof value === "object" ? "" + value : value;
 }
 function hasProp(target, prop) {
@@ -8333,7 +8333,7 @@ var ObservableValue = /*#__PURE__*/function (_Atom) {
     return this.name_ + "[" + this.value_ + "]";
   };
   _proto.valueOf = function valueOf() {
-    return toPrimitive$2(this.get());
+    return toPrimitive$3(this.get());
   };
   _proto[_Symbol$toPrimitive] = function () {
     return this.valueOf();
@@ -8561,7 +8561,7 @@ var ComputedValue = /*#__PURE__*/function () {
     return this.name_ + "[" + this.derivation.toString() + "]";
   };
   _proto.valueOf = function valueOf() {
-    return toPrimitive$2(this.get());
+    return toPrimitive$3(this.get());
   };
   _proto[_Symbol$toPrimitive$1] = function () {
     return this.valueOf();
@@ -30258,18 +30258,10 @@ var _fails = function (exec) {
   }
 };
 
-var _descriptors;
-var hasRequired_descriptors;
-
-function require_descriptors () {
-	if (hasRequired_descriptors) return _descriptors;
-	hasRequired_descriptors = 1;
-	// Thank's IE8 for his funny defineProperty
-	_descriptors = !_fails(function () {
-	  return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
-	});
-	return _descriptors;
-}
+// Thank's IE8 for his funny defineProperty
+var _descriptors = !_fails(function () {
+  return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
+});
 
 var _domCreate;
 var hasRequired_domCreate;
@@ -30287,17 +30279,9 @@ function require_domCreate () {
 	return _domCreate;
 }
 
-var _ie8DomDefine;
-var hasRequired_ie8DomDefine;
-
-function require_ie8DomDefine () {
-	if (hasRequired_ie8DomDefine) return _ie8DomDefine;
-	hasRequired_ie8DomDefine = 1;
-	_ie8DomDefine = !require_descriptors() && !_fails(function () {
-	  return Object.defineProperty(require_domCreate()('div'), 'a', { get: function () { return 7; } }).a != 7;
-	});
-	return _ie8DomDefine;
-}
+var _ie8DomDefine = !_descriptors && !_fails(function () {
+  return Object.defineProperty(require_domCreate()('div'), 'a', { get: function () { return 7; } }).a != 7;
+});
 
 // 7.1.1 ToPrimitive(input [, PreferredType])
 var isObject$d = _isObject;
@@ -30312,29 +30296,22 @@ var _toPrimitive$1 = function (it, S) {
   throw TypeError("Can't convert object to primitive value");
 };
 
-var hasRequired_objectDp;
-
-function require_objectDp () {
-	if (hasRequired_objectDp) return _objectDp;
-	hasRequired_objectDp = 1;
-	var anObject = _anObject;
-	var IE8_DOM_DEFINE = require_ie8DomDefine();
-	var toPrimitive = _toPrimitive$1;
-	var dP = Object.defineProperty;
+var anObject$5 = _anObject;
+var IE8_DOM_DEFINE$1 = _ie8DomDefine;
+var toPrimitive$2 = _toPrimitive$1;
+var dP$3 = Object.defineProperty;
 
-	_objectDp.f = require_descriptors() ? Object.defineProperty : function defineProperty(O, P, Attributes) {
-	  anObject(O);
-	  P = toPrimitive(P, true);
-	  anObject(Attributes);
-	  if (IE8_DOM_DEFINE) try {
-	    return dP(O, P, Attributes);
-	  } catch (e) { /* empty */ }
-	  if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
-	  if ('value' in Attributes) O[P] = Attributes.value;
-	  return O;
-	};
-	return _objectDp;
-}
+_objectDp.f = _descriptors ? Object.defineProperty : function defineProperty(O, P, Attributes) {
+  anObject$5(O);
+  P = toPrimitive$2(P, true);
+  anObject$5(Attributes);
+  if (IE8_DOM_DEFINE$1) try {
+    return dP$3(O, P, Attributes);
+  } catch (e) { /* empty */ }
+  if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
+  if ('value' in Attributes) O[P] = Attributes.value;
+  return O;
+};
 
 var _propertyDesc = function (bitmap, value) {
   return {
@@ -30345,9 +30322,9 @@ var _propertyDesc = function (bitmap, value) {
   };
 };
 
-var dP$2 = require_objectDp();
+var dP$2 = _objectDp;
 var createDesc$3 = _propertyDesc;
-var _hide = require_descriptors() ? function (object, key, value) {
+var _hide = _descriptors ? function (object, key, value) {
   return dP$2.f(object, key, createDesc$3(1, value));
 } : function (object, key, value) {
   object[key] = value;
@@ -30428,20 +30405,12 @@ var _cof = function (it) {
   return toString$6.call(it).slice(8, -1);
 };
 
-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;
-}
+// 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);
+};
 
 // 7.2.1 RequireObjectCoercible(argument)
 var _defined = function (it) {
@@ -30450,7 +30419,7 @@ var _defined = function (it) {
 };
 
 // to indexed object, toObject with fallback for non-array-like ES3 strings
-var IObject = require_iobject();
+var IObject = _iobject;
 var defined$2 = _defined;
 var _toIobject = function (it) {
   return IObject(defined$2(it));
@@ -30570,14 +30539,7 @@ _objectGops.f = Object.getOwnPropertySymbols;
 
 var _objectPie = {};
 
-var hasRequired_objectPie;
-
-function require_objectPie () {
-	if (hasRequired_objectPie) return _objectPie;
-	hasRequired_objectPie = 1;
-	_objectPie.f = {}.propertyIsEnumerable;
-	return _objectPie;
-}
+_objectPie.f = {}.propertyIsEnumerable;
 
 // 7.1.13 ToObject(argument)
 var defined$1 = _defined;
@@ -30592,12 +30554,12 @@ function require_objectAssign () {
 	if (hasRequired_objectAssign) return _objectAssign;
 	hasRequired_objectAssign = 1;
 	// 19.1.2.1 Object.assign(target, source, ...)
-	var DESCRIPTORS = require_descriptors();
+	var DESCRIPTORS = _descriptors;
 	var getKeys = _objectKeys;
 	var gOPS = _objectGops;
-	var pIE = require_objectPie();
+	var pIE = _objectPie;
 	var toObject = _toObject;
-	var IObject = require_iobject();
+	var IObject = _iobject;
 	var $assign = Object.assign;
 
 	// should work with symbols and should have deterministic property order (V8 bug)
@@ -30668,11 +30630,11 @@ var _iterators = {};
 
 var _redefine = _hide;
 
-var dP$1 = require_objectDp();
+var dP$1 = _objectDp;
 var anObject$4 = _anObject;
 var getKeys$1 = _objectKeys;
 
-var _objectDps = require_descriptors() ? Object.defineProperties : function defineProperties(O, Properties) {
+var _objectDps = _descriptors ? Object.defineProperties : function defineProperties(O, Properties) {
   anObject$4(O);
   var keys = getKeys$1(Properties);
   var length = keys.length;
@@ -30751,7 +30713,7 @@ $exports.store = store$2;
 
 var _wksExports = _wks.exports;
 
-var def = require_objectDp().f;
+var def = _objectDp.f;
 var has$c = _has;
 var TAG$1 = _wksExports('toStringTag');
 
@@ -31065,7 +31027,7 @@ var _isArrayIter = function (it) {
   return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it);
 };
 
-var $defineProperty$2 = require_objectDp();
+var $defineProperty$2 = _objectDp;
 var createDesc$2 = _propertyDesc;
 
 var _createProperty = function (object, index, value) {
@@ -31198,7 +31160,7 @@ var _default$9 = function (instance, Constructor) {
 
 var $export$3 = _export;
 // 19.1.2.4 / 15.2.3.6 Object.defineProperty(O, P, Attributes)
-$export$3($export$3.S + $export$3.F * !require_descriptors(), 'Object', { defineProperty: require_objectDp().f });
+$export$3($export$3.S + $export$3.F * !_descriptors, 'Object', { defineProperty: _objectDp.f });
 
 var $Object$2 = _coreExports.Object;
 var defineProperty$c = function defineProperty(it, key, desc) {
@@ -31246,7 +31208,7 @@ var _meta = {exports: {}};
 var META$1 = _uid('meta');
 var isObject$c = _isObject;
 var has$a = _has;
-var setDesc = require_objectDp().f;
+var setDesc = _objectDp.f;
 var id$1 = 0;
 var isExtensible = Object.isExtensible || function () {
   return true;
@@ -31301,7 +31263,7 @@ var _metaExports = _meta.exports;
 
 var core = _coreExports;
 var wksExt$1 = _wksExt;
-var defineProperty$a = require_objectDp().f;
+var defineProperty$a = _objectDp.f;
 var _wksDefine = function (name) {
   var $Symbol = core.Symbol || (core.Symbol = {} );
   if (name.charAt(0) != '_' && !(name in $Symbol)) defineProperty$a($Symbol, name, { value: wksExt$1.f(name) });
@@ -31310,7 +31272,7 @@ var _wksDefine = function (name) {
 // all enumerable object keys, includes symbols
 var getKeys = _objectKeys;
 var gOPS$1 = _objectGops;
-var pIE$1 = require_objectPie();
+var pIE$1 = _objectPie;
 var _enumKeys = function (it) {
   var result = getKeys(it);
   var getSymbols = gOPS$1.f;
@@ -31363,15 +31325,15 @@ _objectGopnExt.f = function getOwnPropertyNames(it) {
 
 var _objectGopd = {};
 
-var pIE = require_objectPie();
+var pIE = _objectPie;
 var createDesc$1 = _propertyDesc;
 var toIObject$1 = _toIobject;
 var toPrimitive$1 = _toPrimitive$1;
 var has$9 = _has;
-var IE8_DOM_DEFINE = require_ie8DomDefine();
+var IE8_DOM_DEFINE = _ie8DomDefine;
 var gOPD$5 = Object.getOwnPropertyDescriptor;
 
-_objectGopd.f = require_descriptors() ? gOPD$5 : function getOwnPropertyDescriptor(O, P) {
+_objectGopd.f = _descriptors ? gOPD$5 : function getOwnPropertyDescriptor(O, P) {
   O = toIObject$1(O);
   P = toPrimitive$1(P, true);
   if (IE8_DOM_DEFINE) try {
@@ -31383,7 +31345,7 @@ _objectGopd.f = require_descriptors() ? gOPD$5 : function getOwnPropertyDescript
 // ECMAScript 6 symbols shim
 var global$2 = _globalExports;
 var has$8 = _has;
-var DESCRIPTORS = require_descriptors();
+var DESCRIPTORS = _descriptors;
 var $export$2 = _export;
 var redefine = _redefine;
 var META = _metaExports.KEY;
@@ -31406,7 +31368,7 @@ var _create$1 = _objectCreate;
 var gOPNExt = _objectGopnExt;
 var $GOPD = _objectGopd;
 var $GOPS = _objectGops;
-var $DP = require_objectDp();
+var $DP = _objectDp;
 var $keys$1 = _objectKeys;
 var gOPD$4 = $GOPD.f;
 var dP = $DP.f;
@@ -31531,7 +31493,7 @@ if (!USE_NATIVE) {
   $GOPD.f = $getOwnPropertyDescriptor;
   $DP.f = $defineProperty$1;
   _objectGopn.f = gOPNExt.f = $getOwnPropertyNames;
-  require_objectPie().f = $propertyIsEnumerable;
+  _objectPie.f = $propertyIsEnumerable;
   $GOPS.f = $getOwnPropertySymbols;
 
   if (DESCRIPTORS && !_library) {
@@ -92017,6 +91979,8 @@ const PreviewCsvData = observer(function(props) {
     userSchema = exampleData,
     initialEntities
   } = props;
+  const rerenderKey = useRef(0);
+  rerenderKey.current = rerenderKey.current + 1;
   const data = userSchema.userData && userSchema.userData.length && userSchema.userData.map((row) => {
     const toRet = {
       _isClean: row._isClean
@@ -92063,6 +92027,7 @@ const PreviewCsvData = observer(function(props) {
     {
       maxWidth: 800,
       maxHeight: 500,
+      rerenderKey: rerenderKey.current,
       destroyOnUnmount: false,
       doNotValidateUntouchedRows: true,
       formName: datatableFormName || "editableCellTable",
@@ -113805,9 +113770,9 @@ function coerceLocation({
 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) {
@@ -161153,7 +161118,7 @@ function showFileDialog({ multiple = false, onSelect }) {
 }
 
 const name = "@teselagen/ove";
-const version = "0.3.11";
+const version = "0.3.12";
 const main = "./src/index.js";
 const exports$1 = {
 	".": {
@@ -161695,6 +161660,184 @@ function ToggleShowMeltingTemp(props) {
   );
 }
 
+const style$i = '';
+
+class ToolbarItem extends React__default$1.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__default$1.createElement(
+      "div",
+      {
+        className: `veToolbarItemOuter ve-tool-container-${toolName}` + (disabled ? " disabled " : "")
+      },
+      renderIconAbove && /* @__PURE__ */ React__default$1.createElement("div", null, /* @__PURE__ */ React__default$1.createElement("div", { className: "veToolbarItem" }, Icon$1)),
+      Icon$1 && !renderIconAbove && /* @__PURE__ */ React__default$1.createElement(
+        Tooltip,
+        {
+          disabled: tooltipDisabled,
+          portalClassName: "ve-toolbar-item-popover",
+          content: tooltipToDisplay
+        },
+        /* @__PURE__ */ React__default$1.createElement(
+          AnchorButton,
+          {
+            intent: Intent.PRIMARY,
+            onClick: onIconClick === "toggleDropdown" ? this.toggleDropdown : onIconClick,
+            active: toggled,
+            disabled,
+            minimal: true,
+            icon: React__default$1.isValidElement(Icon$1) ? Icon$1 : /* @__PURE__ */ React__default$1.createElement(Icon$1, { toggleDropdown: this.toggleDropdown })
+          }
+        )
+      ),
+      Dropdown && !noDropdownIcon ? /* @__PURE__ */ React__default$1.createElement(Tooltip, { disabled: tooltipDisabled, content: dropdowntooltip }, /* @__PURE__ */ React__default$1.createElement(
+        "div",
+        {
+          className: (isOpen ? " isOpen " : "") + (dropdownicon ? "" : " veToolbarDropdown"),
+          onClick: this.toggleDropdown
+        },
+        dropdownicon ? /* @__PURE__ */ React__default$1.createElement("div", { className: "veToolbarIcon" }, /* @__PURE__ */ React__default$1.createElement("div", null, dropdownicon)) : isOpen ? /* @__PURE__ */ React__default$1.createElement(
+          Icon,
+          {
+            "data-test": toolName + "Dropdown",
+            iconSize: 13,
+            icon: "caret-up"
+          }
+        ) : /* @__PURE__ */ React__default$1.createElement(
+          Icon,
+          {
+            "data-test": toolName + "Dropdown",
+            iconSize: 13,
+            icon: "caret-down"
+          }
+        )
+      )) : null
+    );
+    const content = /* @__PURE__ */ React__default$1.createElement(
+      "div",
+      {
+        ref: (n) => {
+          if (n)
+            this.dropdownNode = n;
+        },
+        style: { padding: 10, minWidth: 250, maxWidth: 350 },
+        className: "ve-toolbar-dropdown content"
+      },
+      Dropdown && /* @__PURE__ */ React__default$1.createElement(
+        Dropdown,
+        {
+          ...rest,
+          editorName,
+          toggleDropdown: this.toggleDropdown
+        }
+      )
+    );
+    const target = IconWrapper ? /* @__PURE__ */ React__default$1.createElement(IconWrapper, { ...IconWrapperProps }, ({ getRootProps, getInputProps }) => /* @__PURE__ */ React__default$1.createElement("div", { ...getRootProps() }, /* @__PURE__ */ React__default$1.createElement("input", { ...getInputProps() }), buttonTarget)) : buttonTarget;
+    return /* @__PURE__ */ React__default$1.createElement("div", { style: { display: "flex", alignItems: "center" } }, index !== 0 && /* @__PURE__ */ React__default$1.createElement("div", { className: "veToolbarSpacer" }), /* @__PURE__ */ React__default$1.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] = 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__default$1.createElement(
+    ToolbarItem$1,
+    {
+      ...{
+        disabled: isLoading || disableSetReadOnly,
+        Icon: /* @__PURE__ */ React__default$1.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;
@@ -161778,7 +161921,7 @@ const fileCommandDefs = {
     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,
@@ -167663,7 +167806,7 @@ function getEditDeleteHandlers(type, annotation) {
   ];
 }
 
-const style$i = '';
+const style$h = '';
 
 function SequenceName({ sequenceName, sequenceLength, isProtein }) {
   return /* @__PURE__ */ React__default$1.createElement("div", { key: "circViewSvgCenterText", style: { textAlign: "center" } }, /* @__PURE__ */ React__default$1.createElement("span", null, sequenceName, " "), /* @__PURE__ */ React__default$1.createElement("br", null), /* @__PURE__ */ React__default$1.createElement("span", null, isProtein ? `${Math.floor(sequenceLength / 3)} AAs` : `${sequenceLength} bps`));
@@ -170049,7 +170192,7 @@ function VisibilityOptions$2({
   );
 }
 
-const style$h = '';
+const style$g = '';
 
 const simpleDialog = '';
 
@@ -170326,7 +170469,7 @@ function combineLabels(labels, numberOfBuckets) {
   return combinedLabels;
 }
 
-const style$g = '';
+const style$f = '';
 
 const fontWidthToFontSize = 1.75;
 const getTextLength = (text) => {
@@ -172529,7 +172672,7 @@ function DrawAnnotationInner({
 }
 const DrawAnnotation = withHover(DrawAnnotationInner);
 
-const style$f = '';
+const style$e = '';
 
 function c(u,e,c){var i=this,a=useRef(null),o=useRef(0),f=useRef(null),l=useRef([]),m=useRef(),v=useRef(),d=useRef(u),p=useRef(!0);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;useEffect(function(){return p.current=!0,function(){p.current=!1;}},[]);var h=useMemo$1(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}
 
@@ -173462,7 +173605,7 @@ function CircularView(props) {
 }
 const CircularView$1 = withEditorInteractions(CircularView);
 
-const style$e = '';
+const style$d = '';
 
 class PrintDialog extends React__default$1.Component {
   state = {
@@ -173943,7 +174086,7 @@ const RemoveDuplicates = compose$1(
   tgFormValues("ignoreName", "ignoreStrand", "ignoreStartAndEnd")
 )(RemoveDuplicatesDialog);
 
-const style$d = '';
+const style$c = '';
 
 var isMobile$2 = {exports: {}};
 
@@ -174965,7 +175108,7 @@ const normalizeToInt = (val) => {
   return normalizedVal;
 };
 
-const style$c = '';
+const style$b = '';
 
 const EnzymeViewer = ({
   extraClasses = "",
@@ -175040,7 +175183,7 @@ const EnzymeViewer = ({
   );
 };
 
-const style$b = '';
+const style$a = '';
 
 const upsertLocalEnzymeGroups = (newGroups) => {
   const existingGroups = window.getExistingEnzymeGroups();
@@ -175736,7 +175879,7 @@ const HoverView = view(({ allEnzymesByName }) => {
   );
 });
 
-const style$a = '';
+const style$9 = '';
 
 const CreateCustomEnzyme = function(props) {
   const paddingStart = "-------";
@@ -176561,143 +176704,6 @@ function getIsEnzymeHidden({ name, allRestrictionEnzymes }) {
   return isHidden;
 }
 
-const style$9 = '';
-
-class ToolbarItem extends React__default$1.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__default$1.createElement(
-      "div",
-      {
-        className: `veToolbarItemOuter ve-tool-container-${toolName}` + (disabled ? " disabled " : "")
-      },
-      renderIconAbove && /* @__PURE__ */ React__default$1.createElement("div", null, /* @__PURE__ */ React__default$1.createElement("div", { className: "veToolbarItem" }, Icon$1)),
-      Icon$1 && !renderIconAbove && /* @__PURE__ */ React__default$1.createElement(
-        Tooltip,
-        {
-          disabled: tooltipDisabled,
-          portalClassName: "ve-toolbar-item-popover",
-          content: tooltipToDisplay
-        },
-        /* @__PURE__ */ React__default$1.createElement(
-          AnchorButton,
-          {
-            intent: Intent.PRIMARY,
-            onClick: onIconClick === "toggleDropdown" ? this.toggleDropdown : onIconClick,
-            active: toggled,
-            disabled,
-            minimal: true,
-            icon: React__default$1.isValidElement(Icon$1) ? Icon$1 : /* @__PURE__ */ React__default$1.createElement(Icon$1, { toggleDropdown: this.toggleDropdown })
-          }
-        )
-      ),
-      Dropdown && !noDropdownIcon ? /* @__PURE__ */ React__default$1.createElement(Tooltip, { disabled: tooltipDisabled, content: dropdowntooltip }, /* @__PURE__ */ React__default$1.createElement(
-        "div",
-        {
-          className: (isOpen ? " isOpen " : "") + (dropdownicon ? "" : " veToolbarDropdown"),
-          onClick: this.toggleDropdown
-        },
-        dropdownicon ? /* @__PURE__ */ React__default$1.createElement("div", { className: "veToolbarIcon" }, /* @__PURE__ */ React__default$1.createElement("div", null, dropdownicon)) : isOpen ? /* @__PURE__ */ React__default$1.createElement(
-          Icon,
-          {
-            "data-test": toolName + "Dropdown",
-            iconSize: 13,
-            icon: "caret-up"
-          }
-        ) : /* @__PURE__ */ React__default$1.createElement(
-          Icon,
-          {
-            "data-test": toolName + "Dropdown",
-            iconSize: 13,
-            icon: "caret-down"
-          }
-        )
-      )) : null
-    );
-    const content = /* @__PURE__ */ React__default$1.createElement(
-      "div",
-      {
-        ref: (n) => {
-          if (n)
-            this.dropdownNode = n;
-        },
-        style: { padding: 10, minWidth: 250, maxWidth: 350 },
-        className: "ve-toolbar-dropdown content"
-      },
-      Dropdown && /* @__PURE__ */ React__default$1.createElement(
-        Dropdown,
-        {
-          ...rest,
-          editorName,
-          toggleDropdown: this.toggleDropdown
-        }
-      )
-    );
-    const target = IconWrapper ? /* @__PURE__ */ React__default$1.createElement(IconWrapper, { ...IconWrapperProps }, ({ getRootProps, getInputProps }) => /* @__PURE__ */ React__default$1.createElement("div", { ...getRootProps() }, /* @__PURE__ */ React__default$1.createElement("input", { ...getInputProps() }), buttonTarget)) : buttonTarget;
-    return /* @__PURE__ */ React__default$1.createElement("div", { style: { display: "flex", alignItems: "center" } }, index !== 0 && /* @__PURE__ */ React__default$1.createElement("div", { className: "veToolbarSpacer" }), /* @__PURE__ */ React__default$1.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;
@@ -183100,7 +183106,7 @@ function addClickableLabel(toRet, { closeDropDown }) {
 }
 
 const userDefinedHandlersAndOpts = [
-  "onChangeEditLock",
+  "beforeReadOnlyChange",
   "defaultLinkedOligoMessage",
   "allowMultipleFeatureDirections",
   "getAdditionalEditAnnotationComps",
@@ -183363,49 +183369,6 @@ const OrfToolDropdown = withEditorProps(
   }
 );
 
-const editTool = connectToEditor((editorState) => {
-  return {
-    readOnly: editorState.readOnly
-  };
-})(
-  ({
-    toolbarItemProps,
-    readOnly,
-    toggleReadOnlyMode,
-    disableSetReadOnly,
-    onChangeEditLock
-  }) => {
-    const [isLoading, setIsLoading] = 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__default$1.createElement(
-      ToolbarItem$1,
-      {
-        ...{
-          disabled: isLoading || disableSetReadOnly,
-          Icon: /* @__PURE__ */ React__default$1.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 = [
@@ -184026,31 +183989,22 @@ const style$3 = '';
 
 const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
   readOnly
-}))(
-  ({
-    onSave,
-    readOnly,
-    showReadOnly,
-    disableSetReadOnly,
-    updateReadOnlyMode
-  }) => {
-    return showReadOnly ? /* @__PURE__ */ React__default$1.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React__default$1.createElement(
-      HTMLSelect,
-      {
-        options: [
-          { label: "Read Only", value: "readOnly" },
-          { label: "Editable", value: "editable" }
-        ],
-        disabled: disableSetReadOnly || !onSave,
-        className: Classes.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__default$1.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React__default$1.createElement(
+    HTMLSelect,
+    {
+      options: [
+        { label: "Read Only", value: "readOnly" },
+        { label: "Editable", value: "editable" }
+      ],
+      disabled: disableSetReadOnly || !onSave,
+      className: Classes.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) => {
@@ -184197,11 +184151,13 @@ function StatusBar({
   showGCContentByDefault,
   onSelectionOrCaretChanged,
   GCDecimalDigits = 1,
-  isProtein
+  isProtein,
+  beforeReadOnlyChange
 }) {
   return /* @__PURE__ */ React__default$1.createElement("div", { className: "veStatusBar" }, showMoleculeType && /* @__PURE__ */ React__default$1.createElement(ShowTypeItem, { editorName }), /* @__PURE__ */ React__default$1.createElement(
     EditReadOnlyItem,
     {
+      beforeReadOnlyChange,
       editorName,
       onSave,
       disableSetReadOnly,
@@ -184640,7 +184596,6 @@ class GeneralProperties extends React__default$1.Component {
       disableSetReadOnly,
       updateAvailability,
       sequenceData,
-      updateReadOnlyMode,
       onSave,
       showAvailability,
       sequenceNameUpdate
@@ -184695,10 +184650,9 @@ class GeneralProperties extends React__default$1.Component {
     ))), /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-left bp3-label" }, "Length"), " ", /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-right" }, " ", isProtein ? proteinSequence.length : sequence.length)), showReadOnly && /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-left bp3-label" }, "Is Editable"), " ", /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React__default$1.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" },
@@ -194771,7 +194725,7 @@ class Editor extends React__default$1.Component {
           contentLeft: this.props.contentLeft,
           editorName,
           withDigestTool: true,
-          onChangeEditLock: this.props.onChangeEditLock,
+          beforeReadOnlyChange: this.props.beforeReadOnlyChange,
           ...ToolBarProps
         }
       ),