@teselagen/ove 0.7.14 → 0.7.16

package/index.umd.js

@@ -59,7 +59,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-  var _E, _F, _G, _H, _I, _J, _M, _P, _W;
+  var _C, _D, _E, _F, _G, _H, _K, _N, _U;
   function _mergeNamespaces(n2, m2) {
     for (var i2 = 0; i2 < m2.length; i2++) {
       const e2 = m2[i2];
@@ -61046,37 +61046,7 @@ ${latestSubscriptionCallbackError.current.stack}
    *    See the License for the specific language governing permissions and
    *    limitations under the License.
    */
-  const sortKeys = /* @__PURE__ */ __name((o2) => {
-    if (Array.isArray(o2)) {
-      return o2.map(sortKeys);
-    } else if (o2 instanceof Object) {
-      let numeric = [];
-      let nonNumeric = [];
-      Object.keys(o2).forEach((key2) => {
-        if (/^(0|[1-9][0-9]*)$/.test(key2)) {
-          numeric.push(+key2);
-        } else {
-          nonNumeric.push(key2);
-        }
-      });
-      return numeric.sort(function(a2, b3) {
-        return a2 - b3;
-      }).concat(nonNumeric.sort()).reduce((result, key2) => {
-        result[key2] = sortKeys(o2[key2]);
-        return result;
-      }, {});
-    }
-    return o2;
-  }, "sortKeys");
-  const jsonStringify = JSON.stringify.bind(JSON);
-  const sortify = /* @__PURE__ */ __name((value, replacer, space2) => {
-    let nativeJson = jsonStringify(value, replacer, 0);
-    if (!nativeJson || nativeJson[0] !== "{" && nativeJson[0] !== "[") {
-      return nativeJson;
-    }
-    let cleanObj = JSON.parse(nativeJson);
-    return jsonStringify(sortKeys(cleanObj), null, space2);
-  }, "sortify");
+  JSON.stringify.bind(JSON);
   const REQUIRED_ERROR = "This field is required.";
   const fieldRequired = /* @__PURE__ */ __name((value) => !value || Array.isArray(value) && !value.length ? REQUIRED_ERROR : void 0, "fieldRequired");
   const useStableReference = /* @__PURE__ */ __name((value) => {
@@ -61683,98 +61653,15 @@ ${latestSubscriptionCallbackError.current.stack}
     });
     return /* @__PURE__ */ React$2.createElement(TgSelect$1, __spreadValues({}, propsToUse));
   }, "renderReactSelect");
-  const BPSelect = /* @__PURE__ */ __name((_q) => {
-    var _r = _q, { value, onChange } = _r, rest = __objRest(_r, ["value", "onChange"]);
-    return renderSelect(__spreadProps(__spreadValues({}, rest), { input: { onChange, value } }));
-  }, "BPSelect");
-  const renderSelect = /* @__PURE__ */ __name((_s) => {
-    var _t = _s, {
-      input: { value, onChange },
-      hideValue,
-      className,
-      placeholder,
-      onFieldSubmit,
-      options,
-      hidePlaceHolder,
-      minimal,
-      disabled
-    } = _t, rest = __objRest(_t, [
-      "input",
-      "hideValue",
-      "className",
-      "placeholder",
-      "onFieldSubmit",
-      "options",
-      "hidePlaceHolder",
-      "minimal",
-      "disabled"
-    ]);
-    return /* @__PURE__ */ React$2.createElement(
-      "div",
-      {
-        className: `${minimal && MINIMAL} ` + classNames$1(SELECT$1, FILL, className)
-      },
-      /* @__PURE__ */ React$2.createElement(
-        "select",
-        __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, removeUnwantedProps(rest)), {
-          className: `${disabled && DISABLED} `,
-          value: placeholder && value === "" ? "__placeholder__" : typeof value !== "string" ? sortify(value) : value,
-          disabled
-        }), hideValue ? { value: "" } : {}), {
-          onChange: function(e2) {
-            let val2 = e2.target.value;
-            try {
-              const maybeNewValue = JSON.parse(e2.target.value);
-              const hasMatchInOriginalOptions = options.find(
-                (opt) => opt === maybeNewValue || opt.value === maybeNewValue
-              );
-              if (hasMatchInOriginalOptions || isPlainObject$4(maybeNewValue)) {
-                val2 = maybeNewValue;
-              }
-            } catch (e22) {
-            }
-            onChange(val2);
-            onFieldSubmit && onFieldSubmit(val2);
-          }
-        }),
-        placeholder && /* @__PURE__ */ React$2.createElement("option", { value: "__placeholder__", disabled: true, hidden: hidePlaceHolder }, placeholder),
-        options.map(function(opt, index2) {
-          let label, value2;
-          if (typeof opt === "string") {
-            label = opt;
-            value2 = opt;
-          } else if (isNumber$6(opt)) {
-            label = opt.toString();
-            value2 = opt;
-          } else if (Array.isArray(opt)) {
-            throw new Error(
-              "the option coming in should be an object, not an array!"
-            );
-          } else {
-            label = opt.label;
-            value2 = opt.value;
-          }
-          return /* @__PURE__ */ React$2.createElement(
-            "option",
-            {
-              key: index2,
-              value: typeof value2 !== "string" ? sortify(value2) : value2
-            },
-            label
-          );
-        })
-      )
-    );
-  }, "renderSelect");
-  const renderBlueprintNumericInput = /* @__PURE__ */ __name((_u) => {
-    var _v = _u, {
+  const renderBlueprintNumericInput = /* @__PURE__ */ __name((_q) => {
+    var _r = _q, {
       input,
       hideValue,
       intent,
       inputClassName,
       onFieldSubmit,
       onAnyNumberChange
-    } = _v, rest = __objRest(_v, [
+    } = _r, rest = __objRest(_r, [
       "input",
       "hideValue",
       "intent",
@@ -61819,12 +61706,12 @@ ${latestSubscriptionCallbackError.current.stack}
       })
     );
   }, "renderBlueprintNumericInput");
-  const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_w) => {
-    var _x = _w, {
+  const renderBlueprintRadioGroup = /* @__PURE__ */ __name((_s) => {
+    var _t = _s, {
       input,
       options,
       onFieldSubmit
-    } = _x, rest = __objRest(_x, [
+    } = _t, rest = __objRest(_t, [
       "input",
       "options",
       "onFieldSubmit"
@@ -82697,8 +82584,8 @@ ${latestSubscriptionCallbackError.current.stack}
     normal: () => 33.34,
     comfortable: () => 41.34
   };
-  const DataTable = /* @__PURE__ */ __name((_y) => {
-    var _z = _y, {
+  const DataTable = /* @__PURE__ */ __name((_u) => {
+    var _v = _u, {
       controlled_pageSize,
       formName = "tgDataTable",
       history,
@@ -82712,7 +82599,7 @@ ${latestSubscriptionCallbackError.current.stack}
       tableParams: _tableParams,
       anyTouched,
       blur: blur2
-    } = _z, ownProps = __objRest(_z, [
+    } = _v, ownProps = __objRest(_v, [
       "controlled_pageSize",
       "formName",
       "history",
@@ -98687,14 +98574,22 @@ ${latestSubscriptionCallbackError.current.stack}
     ), isOpen2 && /* @__PURE__ */ React$2.createElement("div", { style: { marginTop: 10 } }, content2 || children));
   }
   __name(AdvancedOptions, "AdvancedOptions");
-  function DropdownButton(_A) {
-    var _B = _A, {
+  const TgHTMLSelect = /* @__PURE__ */ __name((_w) => {
+    var _x = _w, { disabled } = _x, rest = __objRest(_x, ["disabled"]);
+    if (disabled) {
+      const opt = rest.options.find((o2) => o2.value === rest.value);
+      return /* @__PURE__ */ React$2.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames$1("bp3-html-select", rest.className) }), opt.label);
+    }
+    return /* @__PURE__ */ React$2.createElement(HTMLSelect, __spreadValues({}, rest));
+  }, "TgHTMLSelect");
+  function DropdownButton(_y) {
+    var _z = _y, {
       disabled,
       menu,
       noRightIcon,
       popoverProps,
       className
-    } = _B, rest = __objRest(_B, [
+    } = _z, rest = __objRest(_z, [
       "disabled",
       "menu",
       "noRightIcon",
@@ -102066,14 +101961,14 @@ ${latestSubscriptionCallbackError.current.stack}
       }
     }),
     branch(({ navTo }) => navTo, withRouter)
-  )(function(_C) {
-    var _D = _C, {
+  )(function(_A) {
+    var _B = _A, {
       navTo,
       context,
       staticContext,
       didMount,
       willUnmount
-    } = _D, props = __objRest(_D, [
+    } = _B, props = __objRest(_B, [
       "navTo",
       "context",
       "staticContext",
@@ -102348,7 +102243,7 @@ ${latestSubscriptionCallbackError.current.stack}
     down: "↓"
   };
   symbols.mod = symbols[isMac ? "meta" : "ctrl"];
-  let MenuBar$1 = (_E = class extends React$2.Component {
+  let MenuBar$1 = (_C = class extends React$2.Component {
     constructor(props) {
       super(props);
       __publicField(this, "state", {
@@ -102593,10 +102488,10 @@ ${latestSubscriptionCallbackError.current.stack}
         );
       }), extraContent);
     }
-  }, __name(_E, "MenuBar"), __publicField(_E, "defaultProps", {
+  }, __name(_C, "MenuBar"), __publicField(_C, "defaultProps", {
     className: "",
     style: {}
-  }), _E);
+  }), _C);
   const isDivider = /* @__PURE__ */ __name((item) => item.divider !== void 0, "isDivider");
   function getAllMenuTextsAndHandlers(menu, enhancers, context, path2 = []) {
     if (!menu)
@@ -102744,7 +102639,7 @@ ${latestSubscriptionCallbackError.current.stack}
     );
   }
   __name(HotkeysDialog, "HotkeysDialog");
-  let FillWindow$1 = (_F = class extends React$2.Component {
+  let FillWindow$1 = (_D = class extends React$2.Component {
     constructor(props) {
       super(props);
       rerenderOnWindowResize(this);
@@ -102792,7 +102687,7 @@ ${latestSubscriptionCallbackError.current.stack}
         return reactDomExports.createPortal(inner2, window.document.body);
       return inner2;
     }
-  }, __name(_F, "FillWindow"), _F);
+  }, __name(_D, "FillWindow"), _D);
   var relativeTime$1 = { exports: {} };
   (function(module2, exports3) {
     !function(r2, e2) {
@@ -121777,7 +121672,7 @@ ${latestSubscriptionCallbackError.current.stack}
   const xmlNode = xmlNode$1;
   const readDocType = DocTypeReader;
   const toNumber = strnum;
-  let OrderedObjParser$1 = (_G = class {
+  let OrderedObjParser$1 = (_E = class {
     constructor(options) {
       this.options = options;
       this.currentNode = null;
@@ -121816,7 +121711,7 @@ ${latestSubscriptionCallbackError.current.stack}
       this.saveTextToParentTag = saveTextToParentTag;
       this.addChild = addChild;
     }
-  }, __name(_G, "OrderedObjParser"), _G);
+  }, __name(_E, "OrderedObjParser"), _E);
   function addExternalEntities(externalEntities) {
     const entKeys = Object.keys(externalEntities);
     for (let i2 = 0; i2 < entKeys.length; i2++) {
@@ -122372,7 +122267,7 @@ ${latestSubscriptionCallbackError.current.stack}
   const OrderedObjParser = OrderedObjParser_1;
   const { prettify } = node2json;
   const validator$1 = validator$2;
-  let XMLParser$1 = (_H = class {
+  let XMLParser$1 = (_F = class {
     constructor(options) {
       this.externalEntities = {};
       this.options = buildOptions(options);
@@ -122422,7 +122317,7 @@ ${latestSubscriptionCallbackError.current.stack}
         this.externalEntities[key2] = value;
       }
     }
-  }, __name(_H, "XMLParser"), _H);
+  }, __name(_F, "XMLParser"), _F);
   var XMLParser_1 = XMLParser$1;
   const EOL = "\n";
   function toXml(jArray, options) {
@@ -130239,7 +130134,7 @@ ${seq.sequence}
   };
   __name(_FASTAParser, "FASTAParser");
   let FASTAParser = _FASTAParser;
-  let Parser$1 = (_I = class {
+  let Parser$1 = (_G = class {
     constructor(args) {
       this.fastaParser = void 0;
       this.eof = false;
@@ -130463,7 +130358,7 @@ ${seq.sequence}
         }
       });
     }
-  }, __name(_I, "Parser"), _I);
+  }, __name(_G, "Parser"), _G);
   function _callback(callback2) {
     if (process && process.nextTick)
       process.nextTick(callback2);
@@ -148993,7 +148888,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     "editorName"
   ])(Labels$1);
   const DrawLabel = withHover(
-    (_J = class extends React$2.Component {
+    (_H = class extends React$2.Component {
       render() {
         const {
           hovered,
@@ -149097,7 +148992,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           }
         ));
       }
-    }, __name(_J, "DrawLabelInner"), _J)
+    }, __name(_H, "DrawLabelInner"), _H)
   );
   const labelClassNames = {
     cutsites: "veCutsiteLabel",
@@ -150973,7 +150868,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __name(showFileDialog, "showFileDialog");
   const name = "@teselagen/ove";
-  const version = "0.7.13";
+  const version = "0.7.15";
   const main = "./src/index.js";
   const type = "module";
   const exports$1 = {
@@ -151053,8 +150948,8 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       cutsites: 100
     }
   }), "useAnnotationLimits");
-  function LimitAnnotations(_K) {
-    var _L = _K, { type: type2 } = _L, rest = __objRest(_L, ["type"]);
+  function LimitAnnotations(_I) {
+    var _J = _I, { type: type2 } = _J, rest = __objRest(_J, ["type"]);
     const [limits = {}, setLimits] = useAnnotationLimits();
     return /* @__PURE__ */ React$2.createElement(MenuItem, __spreadValues({ icon: "blank", shouldDismissPopover: false }, rest), [50, 100, 200, 400].map((n2) => /* @__PURE__ */ React$2.createElement(
       MenuItem,
@@ -157357,7 +157252,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   __name(_Minimap, "Minimap");
   let Minimap = _Minimap;
   const YellowScrollHandle = view(
-    (_M = class extends React$2.Component {
+    (_K = class extends React$2.Component {
       render() {
         const {
           scrollHandleWidth,
@@ -157512,7 +157407,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           )
         );
       }
-    }, __name(_M, "YellowScrollHandleInner"), _M)
+    }, __name(_K, "YellowScrollHandleInner"), _K)
   );
   function getTrimmedRangesToDisplay({ trimmedRange, seqLen }) {
     if (!trimmedRange)
@@ -157885,14 +157780,14 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     }, rest);
   }
   __name(getRangeAnglesSpecial, "getRangeAnglesSpecial");
-  function PositionAnnotationOnCircle(_N) {
-    var _O = _N, {
+  function PositionAnnotationOnCircle(_L) {
+    var _M = _L, {
       children,
       height: height2 = 0,
       sAngle = 0,
       eAngle = 0,
       forward = true
-    } = _O, rest = __objRest(_O, [
+    } = _M, rest = __objRest(_M, [
       "children",
       "height",
       "sAngle",
@@ -160197,13 +160092,14 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     smallSlider,
     editorName
   }) {
+    const mainSelector = editorName ? `.veEditor.${editorName}` : ".veEditor";
     const target = React$2.useRef();
     const svgEleRef = React$2.useRef();
     reactExports.useEffect(() => {
       var _a2;
-      const svgEle = (_a2 = document.querySelector(`.veEditor.${editorName}`)) == null ? void 0 : _a2.querySelector(".veCircularView .circularViewSvg");
+      const svgEle = (_a2 = document.querySelector(mainSelector)) == null ? void 0 : _a2.querySelector(".veCircularView .circularViewSvg");
       svgEleRef.current = svgEle;
-    }, [editorName]);
+    }, [editorName, mainSelector]);
     const showLabelsDebounced = c(
       (el2) => {
         try {
@@ -160240,9 +160136,11 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
             var _a2;
             const val2 = 360 - _val;
             if (!svgEleRef.current) {
-              svgEleRef.current = (_a2 = document.querySelector(`.veEditor.${editorName}`)) == null ? void 0 : _a2.querySelector(".veCircularView .circularViewSvg");
+              svgEleRef.current = (_a2 = document.querySelector(mainSelector)) == null ? void 0 : _a2.querySelector(".veCircularView .circularViewSvg");
             }
             const el2 = svgEleRef.current;
+            if (!el2)
+              return;
             const innerEl = el2 == null ? void 0 : el2.querySelector("g");
             innerEl.style.transform = `rotate(${val2}deg)`;
             setRotationRadians(val2 * Math.PI / 180);
@@ -168101,7 +167999,8 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       withFullscreen,
       selectionLayer: selectionLayer2,
       selectionLayerUpdate: selectionLayerUpdate2,
-      caretPositionUpdate: caretPositionUpdate2
+      caretPositionUpdate: caretPositionUpdate2,
+      editorName = "tg-simple-dna-view"
     } = props;
     const [previewType, setPreviewType] = reactExports.useState(
       _sequenceData.circular ? "circular" : "linear"
@@ -168234,7 +168133,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       Component,
       __spreadValues({}, __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
         showCicularViewInternalLabels: true,
-        className: "tg-simple-dna-view veEditor",
+        className: `${editorName} veEditor tg-simple-dna-view`,
         width: 300,
         height: 300,
         noWarnings,
@@ -168473,7 +168372,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     }),
     tgFormValues("from", "to")
   )(
-    (_P = class extends React$2.Component {
+    (_N = class extends React$2.Component {
       constructor() {
         super(...arguments);
         __publicField(this, "updateTempHighlight", /* @__PURE__ */ __name(({ isStart, isEnd } = {}) => (val2) => {
@@ -168584,7 +168483,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           ))
         );
       }
-    }, __name(_P, "SelectDialog"), _P)
+    }, __name(_N, "SelectDialog"), _N)
   );
   const normalizeToInt = /* @__PURE__ */ __name((val2) => {
     const int2 = Math.round(val2);
@@ -172059,8 +171958,8 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     return track;
   }
   __name(getTrackFromEvent, "getTrackFromEvent");
-  const PerformantSelectionLayer = view((_Q) => {
-    var _R = _Q, { easyStore: easyStore2 } = _R, rest = __objRest(_R, ["easyStore"]);
+  const PerformantSelectionLayer = view((_O) => {
+    var _P = _O, { easyStore: easyStore2 } = _P, rest = __objRest(_P, ["easyStore"]);
     const seqLen = rest.sequenceLength - 1;
     return /* @__PURE__ */ React$2.createElement(
       SelectionLayer$3,
@@ -173886,8 +173785,8 @@ ${seqDataToCopy}\r
       })
     )
   )(AlignmentView);
-  const PerformantCaret = view((_S) => {
-    var _T = _S, { easyStore: easyStore2 } = _T, rest = __objRest(_T, ["easyStore"]);
+  const PerformantCaret = view((_Q) => {
+    var _R = _Q, { easyStore: easyStore2 } = _R, rest = __objRest(_R, ["easyStore"]);
     return /* @__PURE__ */ React$2.createElement(Caret$2, __spreadValues({ caretPosition: easyStore2.caretPosition }, rest));
   });
   function cleanTracks(alignmentTracks) {
@@ -176150,14 +176049,14 @@ ${seqDataToCopy}\r
       }, toolbarItemProps))
     );
   });
-  function CutsiteToolDropDown(_U) {
-    var _V = _U, {
+  function CutsiteToolDropDown(_S) {
+    var _T = _S, {
       editorName,
       toggleDropdown,
       annotationVisibilityShow: annotationVisibilityShow2,
       withDigestTool,
       createNewDigest: createNewDigest2
-    } = _V, rest = __objRest(_V, [
+    } = _T, rest = __objRest(_T, [
       "editorName",
       "toggleDropdown",
       "annotationVisibilityShow",
@@ -176285,7 +176184,7 @@ ${seqDataToCopy}\r
     );
   });
   const OrfToolDropdown = withEditorProps(
-    (_W = class extends React$2.Component {
+    (_U = class extends React$2.Component {
       constructor(props) {
         super(props);
         this.commands = getCommands(this);
@@ -176311,7 +176210,7 @@ ${seqDataToCopy}\r
           }
         ));
       }
-    }, __name(_W, "OrfDropdown"), _W)
+    }, __name(_U, "OrfDropdown"), _U)
   );
   const opts = [
     { label: "DNA", value: "DNA" },
@@ -176371,7 +176270,7 @@ ${seqDataToCopy}\r
       }, "updateMatchNumber");
       const findOptionsEls = [
         /* @__PURE__ */ React$2.createElement(
-          HTMLSelect,
+          TgHTMLSelect,
           {
             key: "dnaoraa",
             options: opts,
@@ -176383,7 +176282,7 @@ ${seqDataToCopy}\r
           }
         ),
         /* @__PURE__ */ React$2.createElement("div", { style: { display: "flex" }, key: "ambiguousorliteral" }, /* @__PURE__ */ React$2.createElement(
-          HTMLSelect,
+          TgHTMLSelect,
           {
             name: "ambiguousOrLiteral",
             options: [
@@ -176926,10 +176825,11 @@ ${seqDataToCopy}\r
       disableSetReadOnly,
       disableBpEditing
     } = props;
+    const disabled = disableSetReadOnly || !onSave;
     return showReadOnly ? /* @__PURE__ */ React$2.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React$2.createElement(
-      HTMLSelect,
+      TgHTMLSelect,
       {
-        "data-tip": !readOnly2 && disableBpEditing ? disableBpEditing : void 0,
+        "data-tip": !readOnly2 && typeof disableBpEditing === "string" ? disableBpEditing : void 0,
         options: [
           {
             label: "Read Only",
@@ -176940,8 +176840,8 @@ ${seqDataToCopy}\r
             value: "editable"
           }
         ],
-        disabled: disableSetReadOnly || !onSave,
-        className: MINIMAL,
+        disabled,
+        className: MINIMAL + " veReadOnlySelect",
         value: readOnly2 ? "readOnly" : "editable",
         onChange: ({ target: { value } }) => handleReadOnlyChange(value === "readOnly", props)
       }
@@ -177045,7 +176945,7 @@ ${seqDataToCopy}\r
     withHandlers({ updateCircular })
   )(({ readOnly: readOnly2, showCircularity, circular: circular2, updateCircular: updateCircular2 }) => {
     return showCircularity ? /* @__PURE__ */ React$2.createElement(StatusBarItem, { dataTest: "veStatusBar-circularity" }, readOnly2 ? circular2 ? "Circular" : "Linear" : /* @__PURE__ */ React$2.createElement(
-      HTMLSelect,
+      TgHTMLSelect,
       {
         onChange: ({ target: { value } }) => {
           updateCircular2(value === "circular");
@@ -177066,7 +176966,7 @@ ${seqDataToCopy}\r
     })
   )(({ readOnly: readOnly2, showAvailability, materiallyAvailable: materiallyAvailable2, updateAvailability: updateAvailability2 }) => {
     return showAvailability ? /* @__PURE__ */ React$2.createElement(StatusBarItem, null, readOnly2 ? materiallyAvailable2 ? "Available" : "Unavailable" : /* @__PURE__ */ React$2.createElement(
-      HTMLSelect,
+      TgHTMLSelect,
       {
         onChange: ({ target: { value } }) => {
           updateAvailability2(value === "available");
@@ -177536,13 +177436,14 @@ ${seqDataToCopy}\r
       const {
         readOnly: readOnly2,
         showReadOnly = true,
-        updateCircular: updateCircular2,
         isProtein: isProtein2,
         disableSetReadOnly,
-        updateAvailability: updateAvailability2,
         sequenceData: sequenceData2,
         onSave,
         showAvailability,
+        beforeReadOnlyChange,
+        editorName,
+        disableBpEditing,
         sequenceNameUpdate: sequenceNameUpdate2
       } = this.props;
       const {
@@ -177551,9 +177452,7 @@ ${seqDataToCopy}\r
         isOligo: isOligo2,
         isRna: isRna2,
         sequence: sequence2 = "",
-        proteinSequence = "",
-        circular: circular2,
-        materiallyAvailable: materiallyAvailable2
+        proteinSequence = ""
       } = sequenceData2 || {};
       return /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Name"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, /* @__PURE__ */ React$2.createElement(
         InputField,
@@ -177566,43 +177465,15 @@ ${seqDataToCopy}\r
           enableReinitialize: true,
           defaultValue: name2
         }
-      ), " ")), !isProtein2 && !isOligo2 && !isRna2 && /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row circularLinearSelect" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Circular/Linear"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$2.createElement(
-        BPSelect,
-        {
-          disabled: readOnly2,
-          onChange: (val2) => {
-            updateCircular2(val2 === "circular");
-          },
-          value: circular2 ? "circular" : "linear",
-          options: [
-            { label: "Circular", value: "circular" },
-            { label: "Linear", value: "linear" }
-          ]
-        }
-      ))), showAvailability && /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Material Availability"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$2.createElement(
-        BPSelect,
+      ), " ")), !isProtein2 && !isOligo2 && !isRna2 && /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row circularLinearSelect" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Circular/Linear"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$2.createElement(EditCircularityItem, { editorName, showCircularity: true }))), showAvailability && /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Material Availability"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$2.createElement(EditAvailabilityItem, { editorName, showAvailability: true }))), /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Length"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", isProtein2 ? proteinSequence.length : sequence2.length)), showReadOnly && /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Is Editable"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$2.createElement(
+        EditReadOnlyItem,
         {
-          disabled: readOnly2,
-          onChange: (val2) => {
-            updateAvailability2(val2 === "available");
-          },
-          value: materiallyAvailable2 ? "available" : "unavailable",
-          options: [
-            { label: "Available", value: "available" },
-            { label: "Unavailable", value: "unavailable" }
-          ]
-        }
-      ))), /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Length"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", isProtein2 ? proteinSequence.length : sequence2.length)), showReadOnly && /* @__PURE__ */ React$2.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-left bp3-label" }, "Is Editable"), " ", /* @__PURE__ */ React$2.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$2.createElement(
-        BPSelect,
-        {
-          className: "veReadOnlySelect",
-          disabled: !onSave || disableSetReadOnly,
-          onChange: (val2) => handleReadOnlyChange(val2 === "readOnly", this.props),
-          value: readOnly2 ? "readOnly" : "editable",
-          options: [
-            { label: "Read Only", value: "readOnly" },
-            { label: "Editable", value: "editable" }
-          ]
+          beforeReadOnlyChange,
+          editorName,
+          onSave,
+          disableBpEditing,
+          disableSetReadOnly,
+          showReadOnly
         }
       ))), /* @__PURE__ */ React$2.createElement("div", null, "Description"), /* @__PURE__ */ React$2.createElement(
         TextareaField,
@@ -181728,8 +181599,8 @@ ${seqDataToCopy}\r
     return /* @__PURE__ */ React$2.createElement(Provider, { store }, /* @__PURE__ */ React$2.createElement(VersionHistoryView$1, __spreadValues({}, __spreadValues({}, props))));
   }
   __name(StandaloneVersionHistoryView, "StandaloneVersionHistoryView");
-  function createVectorEditor(_node, _X = {}) {
-    var _Y = _X, { editorName = "StandaloneEditor" } = _Y, rest = __objRest(_Y, ["editorName"]);
+  function createVectorEditor(_node, _V = {}) {
+    var _W = _V, { editorName = "StandaloneEditor" } = _W, rest = __objRest(_W, ["editorName"]);
     if (!store) {
       store = makeStore();
     }
@@ -181762,8 +181633,8 @@ ${seqDataToCopy}\r
     return editor;
   }
   __name(createVectorEditor, "createVectorEditor");
-  function createVersionHistoryView(node2, _Z = {}) {
-    var __ = _Z, { editorName = "StandaloneVersionHistoryView" } = __, rest = __objRest(__, ["editorName"]);
+  function createVersionHistoryView(node2, _X = {}) {
+    var _Y = _X, { editorName = "StandaloneVersionHistoryView" } = _Y, rest = __objRest(_Y, ["editorName"]);
     if (!store) {
       store = makeStore();
     }