@teselagen/ove 0.7.14 → 0.7.16

package/StatusBar/index.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from '../../../../node_modules/react';
 export function StatusBar({ disableSetReadOnly, disableBpEditing, onSave, editorName, showCircularity, showMoleculeType, showReadOnly, showAvailability, showGCContentByDefault, onSelectionOrCaretChanged, GCDecimalDigits, isProtein, beforeReadOnlyChange }: {
     disableSetReadOnly: any;
     disableBpEditing: any;
@@ -13,4 +14,11 @@ export function StatusBar({ disableSetReadOnly, disableBpEditing, onSave, editor
     isProtein: any;
     beforeReadOnlyChange: any;
 }): import("react/jsx-runtime").JSX.Element;
+export const EditReadOnlyItem: import('../../../../node_modules/react-redux').ConnectedComponent<React.ComponentType<import('../../../../node_modules/react-redux').Matching<any, unknown>>, {
+    [x: string]: any;
+}>;
+export const EditCircularityItem: any;
+export const EditAvailabilityItem: import('../../../../node_modules/react-redux').ConnectedComponent<React.ComponentType<import('../../../../node_modules/react-redux').Matching<any, unknown>>, {
+    [x: string]: any;
+}>;
 export default StatusBar;

package/index.cjs.js

@@ -56,7 +56,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var _E, _F, _G, _H, _I, _L, _O, _V;
+var _C, _D, _E, _F, _G, _J, _M, _T;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const core = require("@blueprintjs/core");
 const React$2 = require("react");
@@ -31762,37 +31762,7 @@ __name(AsyncValidateFieldSpinner, "AsyncValidateFieldSpinner");
  *    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((key) => {
-      if (/^(0|[1-9][0-9]*)$/.test(key)) {
-        numeric.push(+key);
-      } else {
-        nonNumeric.push(key);
-      }
-    });
-    return numeric.sort(function(a2, b3) {
-      return a2 - b3;
-    }).concat(nonNumeric.sort()).reduce((result, key) => {
-      result[key] = sortKeys(o2[key]);
-      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) => {
@@ -32399,98 +32369,15 @@ const renderReactSelect = /* @__PURE__ */ __name((props) => {
   });
   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 && core.Classes.MINIMAL} ` + classNames(core.Classes.SELECT, core.Classes.FILL, className)
-    },
-    /* @__PURE__ */ React$2.createElement(
-      "select",
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, removeUnwantedProps(rest)), {
-        className: `${disabled && core.Classes.DISABLED} `,
-        value: placeholder && value === "" ? "__placeholder__" : typeof value !== "string" ? sortify(value) : value,
-        disabled
-      }), hideValue ? { value: "" } : {}), {
-        onChange: function(e) {
-          let val2 = e.target.value;
-          try {
-            const maybeNewValue = JSON.parse(e.target.value);
-            const hasMatchInOriginalOptions = options.find(
-              (opt) => opt === maybeNewValue || opt.value === maybeNewValue
-            );
-            if (hasMatchInOriginalOptions || isPlainObject$5(maybeNewValue)) {
-              val2 = maybeNewValue;
-            }
-          } catch (e2) {
-          }
-          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",
@@ -32535,12 +32422,12 @@ const renderBlueprintNumericInput = /* @__PURE__ */ __name((_u) => {
     })
   );
 }, "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"
@@ -53408,8 +53295,8 @@ const itemSizeEstimators = {
   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,
@@ -53423,7 +53310,7 @@ const DataTable = /* @__PURE__ */ __name((_y) => {
     tableParams: _tableParams,
     anyTouched,
     blur
-  } = _z, ownProps = __objRest(_z, [
+  } = _v, ownProps = __objRest(_v, [
     "controlled_pageSize",
     "formName",
     "history",
@@ -69398,14 +69285,22 @@ function AdvancedOptions({
   ), isOpen && /* @__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("bp3-html-select", rest.className) }), opt.label);
+  }
+  return /* @__PURE__ */ React$2.createElement(core.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",
@@ -72783,14 +72678,14 @@ const EnhancedMenuItem = compose(
     }
   }),
   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",
@@ -73065,7 +72960,7 @@ const symbols = {
   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", {
@@ -73310,10 +73205,10 @@ let MenuBar$1 = (_E = class extends React$2.Component {
       );
     }), 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)
@@ -73461,7 +73356,7 @@ function HotkeysDialog(props) {
   );
 }
 __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);
@@ -73509,7 +73404,7 @@ let FillWindow$1 = (_F = class extends React$2.Component {
       return ReactDOM$1.createPortal(inner2, window.document.body);
     return inner2;
   }
-}, __name(_F, "FillWindow"), _F);
+}, __name(_D, "FillWindow"), _D);
 var relativeTime$1 = { exports: {} };
 (function(module2, exports2) {
   !function(r2, e) {
@@ -92568,7 +92463,7 @@ const util$1 = util$4;
 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;
@@ -92607,7 +92502,7 @@ let OrderedObjParser$1 = (_G = class {
     this.saveTextToParentTag = saveTextToParentTag;
     this.addChild = addChild;
   }
-}, __name(_G, "OrderedObjParser"), _G);
+}, __name(_E, "OrderedObjParser"), _E);
 function addExternalEntities(externalEntities) {
   const entKeys = Object.keys(externalEntities);
   for (let i = 0; i < entKeys.length; i++) {
@@ -93163,7 +93058,7 @@ const { buildOptions } = OptionsBuilder;
 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);
@@ -93213,7 +93108,7 @@ let XMLParser$1 = (_H = class {
       this.externalEntities[key] = value;
     }
   }
-}, __name(_H, "XMLParser"), _H);
+}, __name(_F, "XMLParser"), _F);
 var XMLParser_1 = XMLParser$1;
 const EOL = "\n";
 function toXml(jArray, options) {
@@ -120379,7 +120274,7 @@ const Labels$2 = onlyUpdateForKeys([
   "editorName"
 ])(Labels$1);
 const DrawLabel = withHover(
-  (_I = class extends React$2.Component {
+  (_G = class extends React$2.Component {
     render() {
       const {
         hovered,
@@ -120483,7 +120378,7 @@ const DrawLabel = withHover(
         }
       ));
     }
-  }, __name(_I, "DrawLabelInner"), _I)
+  }, __name(_G, "DrawLabelInner"), _G)
 );
 const labelClassNames = {
   cutsites: "veCutsiteLabel",
@@ -122393,7 +122288,7 @@ function showFileDialog({ multiple = false, onSelect }) {
 }
 __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 = {
@@ -122473,8 +122368,8 @@ const useAnnotationLimits = /* @__PURE__ */ __name(() => useLocalStorageState("a
     cutsites: 100
   }
 }), "useAnnotationLimits");
-function LimitAnnotations(_J) {
-  var _K = _J, { type: type2 } = _K, rest = __objRest(_K, ["type"]);
+function LimitAnnotations(_H) {
+  var _I = _H, { type: type2 } = _I, rest = __objRest(_I, ["type"]);
   const [limits = {}, setLimits] = useAnnotationLimits();
   return /* @__PURE__ */ React$2.createElement(core.MenuItem, __spreadValues({ icon: "blank", shouldDismissPopover: false }, rest), [50, 100, 200, 400].map((n2) => /* @__PURE__ */ React$2.createElement(
     core.MenuItem,
@@ -130382,7 +130277,7 @@ const _Minimap = class _Minimap extends React$2.Component {
 __name(_Minimap, "Minimap");
 let Minimap = _Minimap;
 const YellowScrollHandle = view(
-  (_L = class extends React$2.Component {
+  (_J = class extends React$2.Component {
     render() {
       const {
         scrollHandleWidth,
@@ -130537,7 +130432,7 @@ const YellowScrollHandle = view(
         )
       );
     }
-  }, __name(_L, "YellowScrollHandleInner"), _L)
+  }, __name(_J, "YellowScrollHandleInner"), _J)
 );
 function getTrimmedRangesToDisplay({ trimmedRange, seqLen }) {
   if (!trimmedRange)
@@ -130910,14 +130805,14 @@ function getRangeAnglesSpecial() {
   }, rest);
 }
 __name(getRangeAnglesSpecial, "getRangeAnglesSpecial");
-function PositionAnnotationOnCircle(_M) {
-  var _N = _M, {
+function PositionAnnotationOnCircle(_K) {
+  var _L = _K, {
     children,
     height: height2 = 0,
     sAngle = 0,
     eAngle = 0,
     forward = true
-  } = _N, rest = __objRest(_N, [
+  } = _L, rest = __objRest(_L, [
     "children",
     "height",
     "sAngle",
@@ -133222,13 +133117,14 @@ function RotateCircularViewSlider({
   smallSlider,
   editorName
 }) {
+  const mainSelector = editorName ? `.veEditor.${editorName}` : ".veEditor";
   const target = React$2.useRef();
   const svgEleRef = React$2.useRef();
   React$2.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(
     (el) => {
       try {
@@ -133265,9 +133161,11 @@ function RotateCircularViewSlider({
           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 el = svgEleRef.current;
+          if (!el)
+            return;
           const innerEl = el == null ? void 0 : el.querySelector("g");
           innerEl.style.transform = `rotate(${val2}deg)`;
           setRotationRadians(val2 * Math.PI / 180);
@@ -141126,7 +141024,8 @@ const SimpleCircularOrLinearView = /* @__PURE__ */ __name((props) => {
     withFullscreen,
     selectionLayer: selectionLayer2,
     selectionLayerUpdate: selectionLayerUpdate2,
-    caretPositionUpdate: caretPositionUpdate2
+    caretPositionUpdate: caretPositionUpdate2,
+    editorName = "tg-simple-dna-view"
   } = props;
   const [previewType, setPreviewType] = React$2.useState(
     _sequenceData.circular ? "circular" : "linear"
@@ -141259,7 +141158,7 @@ const SimpleCircularOrLinearView = /* @__PURE__ */ __name((props) => {
     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,
@@ -141498,7 +141397,7 @@ const SelectDialog = redux.compose(
   }),
   tgFormValues("from", "to")
 )(
-  (_O = class extends React$2.Component {
+  (_M = class extends React$2.Component {
     constructor() {
       super(...arguments);
       __publicField(this, "updateTempHighlight", /* @__PURE__ */ __name(({ isStart, isEnd } = {}) => (val2) => {
@@ -141609,7 +141508,7 @@ const SelectDialog = redux.compose(
         ))
       );
     }
-  }, __name(_O, "SelectDialog"), _O)
+  }, __name(_M, "SelectDialog"), _M)
 );
 const normalizeToInt = /* @__PURE__ */ __name((val2) => {
   const int2 = Math.round(val2);
@@ -145084,8 +144983,8 @@ function getTrackFromEvent(event, allTracks) {
   return track;
 }
 __name(getTrackFromEvent, "getTrackFromEvent");
-const PerformantSelectionLayer = view((_P) => {
-  var _Q = _P, { easyStore: easyStore2 } = _Q, rest = __objRest(_Q, ["easyStore"]);
+const PerformantSelectionLayer = view((_N) => {
+  var _O = _N, { easyStore: easyStore2 } = _O, rest = __objRest(_O, ["easyStore"]);
   const seqLen = rest.sequenceLength - 1;
   return /* @__PURE__ */ React$2.createElement(
     SelectionLayer$3,
@@ -146911,8 +146810,8 @@ const AlignmentView$1 = compose(
     })
   )
 )(AlignmentView);
-const PerformantCaret = view((_R) => {
-  var _S = _R, { easyStore: easyStore2 } = _S, rest = __objRest(_S, ["easyStore"]);
+const PerformantCaret = view((_P) => {
+  var _Q = _P, { easyStore: easyStore2 } = _Q, rest = __objRest(_Q, ["easyStore"]);
   return /* @__PURE__ */ React$2.createElement(Caret$2, __spreadValues({ caretPosition: easyStore2.caretPosition }, rest));
 });
 function cleanTracks(alignmentTracks) {
@@ -149175,14 +149074,14 @@ const cutsiteTool = connectToEditor(
     }, toolbarItemProps))
   );
 });
-function CutsiteToolDropDown(_T) {
-  var _U = _T, {
+function CutsiteToolDropDown(_R) {
+  var _S = _R, {
     editorName,
     toggleDropdown,
     annotationVisibilityShow: annotationVisibilityShow2,
     withDigestTool,
     createNewDigest: createNewDigest2
-  } = _U, rest = __objRest(_U, [
+  } = _S, rest = __objRest(_S, [
     "editorName",
     "toggleDropdown",
     "annotationVisibilityShow",
@@ -149310,7 +149209,7 @@ const orfTool = connectToEditor(
   );
 });
 const OrfToolDropdown = withEditorProps(
-  (_V = class extends React$2.Component {
+  (_T = class extends React$2.Component {
     constructor(props) {
       super(props);
       this.commands = getCommands(this);
@@ -149336,7 +149235,7 @@ const OrfToolDropdown = withEditorProps(
         }
       ));
     }
-  }, __name(_V, "OrfDropdown"), _V)
+  }, __name(_T, "OrfDropdown"), _T)
 );
 const opts = [
   { label: "DNA", value: "DNA" },
@@ -149396,7 +149295,7 @@ const _FindBar = class _FindBar extends React$2.Component {
     }, "updateMatchNumber");
     const findOptionsEls = [
       /* @__PURE__ */ React$2.createElement(
-        core.HTMLSelect,
+        TgHTMLSelect,
         {
           key: "dnaoraa",
           options: opts,
@@ -149408,7 +149307,7 @@ const _FindBar = class _FindBar extends React$2.Component {
         }
       ),
       /* @__PURE__ */ React$2.createElement("div", { style: { display: "flex" }, key: "ambiguousorliteral" }, /* @__PURE__ */ React$2.createElement(
-        core.HTMLSelect,
+        TgHTMLSelect,
         {
           name: "ambiguousOrLiteral",
           options: [
@@ -149951,10 +149850,11 @@ const EditReadOnlyItem = connectToEditor(({ readOnly: readOnly2 }) => ({
     disableSetReadOnly,
     disableBpEditing
   } = props;
+  const disabled = disableSetReadOnly || !onSave;
   return showReadOnly ? /* @__PURE__ */ React$2.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React$2.createElement(
-    core.HTMLSelect,
+    TgHTMLSelect,
     {
-      "data-tip": !readOnly2 && disableBpEditing ? disableBpEditing : void 0,
+      "data-tip": !readOnly2 && typeof disableBpEditing === "string" ? disableBpEditing : void 0,
       options: [
         {
           label: "Read Only",
@@ -149965,8 +149865,8 @@ const EditReadOnlyItem = connectToEditor(({ readOnly: readOnly2 }) => ({
           value: "editable"
         }
       ],
-      disabled: disableSetReadOnly || !onSave,
-      className: core.Classes.MINIMAL,
+      disabled,
+      className: core.Classes.MINIMAL + " veReadOnlySelect",
       value: readOnly2 ? "readOnly" : "editable",
       onChange: ({ target: { value } }) => handleReadOnlyChange(value === "readOnly", props)
     }
@@ -150070,7 +149970,7 @@ const EditCircularityItem = compose(
   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(
-    core.HTMLSelect,
+    TgHTMLSelect,
     {
       onChange: ({ target: { value } }) => {
         updateCircular2(value === "circular");
@@ -150091,7 +149991,7 @@ const EditAvailabilityItem = connectToEditor(
   })
 )(({ readOnly: readOnly2, showAvailability, materiallyAvailable: materiallyAvailable2, updateAvailability: updateAvailability2 }) => {
   return showAvailability ? /* @__PURE__ */ React$2.createElement(StatusBarItem, null, readOnly2 ? materiallyAvailable2 ? "Available" : "Unavailable" : /* @__PURE__ */ React$2.createElement(
-    core.HTMLSelect,
+    TgHTMLSelect,
     {
       onChange: ({ target: { value } }) => {
         updateAvailability2(value === "available");
@@ -150561,13 +150461,14 @@ const _GeneralProperties = class _GeneralProperties extends React$2.Component {
     const {
       readOnly: readOnly2,
       showReadOnly = true,
-      updateCircular: updateCircular2,
       isProtein: isProtein2,
       disableSetReadOnly,
-      updateAvailability: updateAvailability2,
       sequenceData: sequenceData2,
       onSave,
       showAvailability,
+      beforeReadOnlyChange,
+      editorName,
+      disableBpEditing,
       sequenceNameUpdate: sequenceNameUpdate2
     } = this.props;
     const {
@@ -150576,9 +150477,7 @@ const _GeneralProperties = class _GeneralProperties extends React$2.Component {
       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,
@@ -150591,43 +150490,15 @@ const _GeneralProperties = class _GeneralProperties extends React$2.Component {
         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,
@@ -154753,8 +154624,8 @@ function StandaloneVersionHistoryView(props) {
   return /* @__PURE__ */ React$2.createElement(reactRedux.Provider, { store }, /* @__PURE__ */ React$2.createElement(VersionHistoryView$1, __spreadValues({}, __spreadValues({}, props))));
 }
 __name(StandaloneVersionHistoryView, "StandaloneVersionHistoryView");
-function createVectorEditor(_node, _W = {}) {
-  var _X = _W, { editorName = "StandaloneEditor" } = _X, rest = __objRest(_X, ["editorName"]);
+function createVectorEditor(_node, _U = {}) {
+  var _V = _U, { editorName = "StandaloneEditor" } = _V, rest = __objRest(_V, ["editorName"]);
   if (!store) {
     store = makeStore();
   }
@@ -154787,8 +154658,8 @@ function createVectorEditor(_node, _W = {}) {
   return editor;
 }
 __name(createVectorEditor, "createVectorEditor");
-function createVersionHistoryView(node2, _Y = {}) {
-  var _Z = _Y, { editorName = "StandaloneVersionHistoryView" } = _Z, rest = __objRest(_Z, ["editorName"]);
+function createVersionHistoryView(node2, _W = {}) {
+  var _X = _W, { editorName = "StandaloneVersionHistoryView" } = _X, rest = __objRest(_X, ["editorName"]);
   if (!store) {
     store = makeStore();
   }