@teselagen/ove 0.7.14 → 0.7.16

package/index.es.js

@@ -56,8 +56,8 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var _E, _F, _G, _H, _I, _L, _O, _V;
-import { Icon, Classes, Button, Intent, MenuItem, Keys, Tag, Popover, Tooltip, Spinner, Position, FormGroup, Checkbox, Switch, InputGroup, TextArea, EditableText, NumericInput, RadioGroup, Menu, Toaster, MenuDivider, useHotkeys, ContextMenu, Callout, Dialog, Card, Tabs, Tab, Colors, KeyCombo, AnchorButton, Slider as Slider$1, ButtonGroup, HTMLSelect, Label, ResizeSensor, FocusStyleManager } from "@blueprintjs/core";
+var _C, _D, _E, _F, _G, _J, _M, _T;
+import { Icon, Classes, Button, Intent, MenuItem, Keys, Tag, Popover, Tooltip, Spinner, Position, FormGroup, Checkbox, Switch, InputGroup, TextArea, EditableText, NumericInput, RadioGroup, Menu, Toaster, MenuDivider, useHotkeys, ContextMenu, Callout, Dialog, Card, Tabs, Tab, Colors, HTMLSelect, KeyCombo, AnchorButton, Slider as Slider$1, ButtonGroup, Label, ResizeSensor, FocusStyleManager } from "@blueprintjs/core";
 import * as React$2 from "react";
 import React__default$1, { useState, useEffect, forwardRef, useImperativeHandle, Fragment, useMemo as useMemo$1, useRef, useReducer, useCallback as useCallback$1, createElement, Component, useLayoutEffect as useLayoutEffect$1, createContext, memo, useContext, isValidElement, PureComponent } from "react";
 import { formValueSelector, initialize, change, Field, reduxForm, SubmissionError, destroy as destroy$1, touch, FormName, reducer as reducer$4, getFormValues, FieldArray } from "redux-form";
@@ -31744,37 +31744,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) => {
@@ -32381,98 +32351,15 @@ const renderReactSelect = /* @__PURE__ */ __name((props) => {
   });
   return /* @__PURE__ */ React__default$1.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__default$1.createElement(
-    "div",
-    {
-      className: `${minimal && Classes.MINIMAL} ` + classNames(Classes.SELECT, Classes.FILL, className)
-    },
-    /* @__PURE__ */ React__default$1.createElement(
-      "select",
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, removeUnwantedProps(rest)), {
-        className: `${disabled && 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__default$1.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__default$1.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",
@@ -32517,12 +32404,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"
@@ -53390,8 +53277,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,
@@ -53405,7 +53292,7 @@ const DataTable = /* @__PURE__ */ __name((_y) => {
     tableParams: _tableParams,
     anyTouched,
     blur
-  } = _z, ownProps = __objRest(_z, [
+  } = _v, ownProps = __objRest(_v, [
     "controlled_pageSize",
     "formName",
     "history",
@@ -69380,14 +69267,22 @@ function AdvancedOptions({
   ), isOpen && /* @__PURE__ */ React__default$1.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__default$1.createElement("div", __spreadProps(__spreadValues({}, rest), { className: classNames("bp3-html-select", rest.className) }), opt.label);
+  }
+  return /* @__PURE__ */ React__default$1.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",
@@ -72765,14 +72660,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",
@@ -73047,7 +72942,7 @@ const symbols = {
   down: "↓"
 };
 symbols.mod = symbols[isMac ? "meta" : "ctrl"];
-let MenuBar$1 = (_E = class extends React__default$1.Component {
+let MenuBar$1 = (_C = class extends React__default$1.Component {
   constructor(props) {
     super(props);
     __publicField(this, "state", {
@@ -73292,10 +73187,10 @@ let MenuBar$1 = (_E = class extends React__default$1.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)
@@ -73443,7 +73338,7 @@ function HotkeysDialog(props) {
   );
 }
 __name(HotkeysDialog, "HotkeysDialog");
-let FillWindow$1 = (_F = class extends React__default$1.Component {
+let FillWindow$1 = (_D = class extends React__default$1.Component {
   constructor(props) {
     super(props);
     rerenderOnWindowResize(this);
@@ -73491,7 +73386,7 @@ let FillWindow$1 = (_F = class extends React__default$1.Component {
       return 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) {
@@ -92550,7 +92445,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;
@@ -92589,7 +92484,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++) {
@@ -93145,7 +93040,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);
@@ -93195,7 +93090,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) {
@@ -120361,7 +120256,7 @@ const Labels$2 = onlyUpdateForKeys([
   "editorName"
 ])(Labels$1);
 const DrawLabel = withHover(
-  (_I = class extends React__default$1.Component {
+  (_G = class extends React__default$1.Component {
     render() {
       const {
         hovered,
@@ -120465,7 +120360,7 @@ const DrawLabel = withHover(
         }
       ));
     }
-  }, __name(_I, "DrawLabelInner"), _I)
+  }, __name(_G, "DrawLabelInner"), _G)
 );
 const labelClassNames = {
   cutsites: "veCutsiteLabel",
@@ -122375,7 +122270,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 = {
@@ -122455,8 +122350,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__default$1.createElement(MenuItem, __spreadValues({ icon: "blank", shouldDismissPopover: false }, rest), [50, 100, 200, 400].map((n2) => /* @__PURE__ */ React__default$1.createElement(
     MenuItem,
@@ -130364,7 +130259,7 @@ const _Minimap = class _Minimap extends React__default$1.Component {
 __name(_Minimap, "Minimap");
 let Minimap = _Minimap;
 const YellowScrollHandle = view(
-  (_L = class extends React__default$1.Component {
+  (_J = class extends React__default$1.Component {
     render() {
       const {
         scrollHandleWidth,
@@ -130519,7 +130414,7 @@ const YellowScrollHandle = view(
         )
       );
     }
-  }, __name(_L, "YellowScrollHandleInner"), _L)
+  }, __name(_J, "YellowScrollHandleInner"), _J)
 );
 function getTrimmedRangesToDisplay({ trimmedRange, seqLen }) {
   if (!trimmedRange)
@@ -130892,14 +130787,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",
@@ -133204,13 +133099,14 @@ function RotateCircularViewSlider({
   smallSlider,
   editorName
 }) {
+  const mainSelector = editorName ? `.veEditor.${editorName}` : ".veEditor";
   const target = React__default$1.useRef();
   const svgEleRef = React__default$1.useRef();
   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 {
@@ -133247,9 +133143,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);
@@ -141108,7 +141006,8 @@ const SimpleCircularOrLinearView = /* @__PURE__ */ __name((props) => {
     withFullscreen,
     selectionLayer: selectionLayer2,
     selectionLayerUpdate: selectionLayerUpdate2,
-    caretPositionUpdate: caretPositionUpdate2
+    caretPositionUpdate: caretPositionUpdate2,
+    editorName = "tg-simple-dna-view"
   } = props;
   const [previewType, setPreviewType] = useState(
     _sequenceData.circular ? "circular" : "linear"
@@ -141241,7 +141140,7 @@ const SimpleCircularOrLinearView = /* @__PURE__ */ __name((props) => {
     Component2,
     __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,
@@ -141480,7 +141379,7 @@ const SelectDialog = compose$1(
   }),
   tgFormValues("from", "to")
 )(
-  (_O = class extends React__default$1.Component {
+  (_M = class extends React__default$1.Component {
     constructor() {
       super(...arguments);
       __publicField(this, "updateTempHighlight", /* @__PURE__ */ __name(({ isStart, isEnd } = {}) => (val2) => {
@@ -141591,7 +141490,7 @@ const SelectDialog = compose$1(
         ))
       );
     }
-  }, __name(_O, "SelectDialog"), _O)
+  }, __name(_M, "SelectDialog"), _M)
 );
 const normalizeToInt = /* @__PURE__ */ __name((val2) => {
   const int2 = Math.round(val2);
@@ -145066,8 +144965,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__default$1.createElement(
     SelectionLayer$3,
@@ -146893,8 +146792,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__default$1.createElement(Caret$2, __spreadValues({ caretPosition: easyStore2.caretPosition }, rest));
 });
 function cleanTracks(alignmentTracks) {
@@ -149157,14 +149056,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",
@@ -149292,7 +149191,7 @@ const orfTool = connectToEditor(
   );
 });
 const OrfToolDropdown = withEditorProps(
-  (_V = class extends React__default$1.Component {
+  (_T = class extends React__default$1.Component {
     constructor(props) {
       super(props);
       this.commands = getCommands(this);
@@ -149318,7 +149217,7 @@ const OrfToolDropdown = withEditorProps(
         }
       ));
     }
-  }, __name(_V, "OrfDropdown"), _V)
+  }, __name(_T, "OrfDropdown"), _T)
 );
 const opts = [
   { label: "DNA", value: "DNA" },
@@ -149378,7 +149277,7 @@ const _FindBar = class _FindBar extends React__default$1.Component {
     }, "updateMatchNumber");
     const findOptionsEls = [
       /* @__PURE__ */ React__default$1.createElement(
-        HTMLSelect,
+        TgHTMLSelect,
         {
           key: "dnaoraa",
           options: opts,
@@ -149390,7 +149289,7 @@ const _FindBar = class _FindBar extends React__default$1.Component {
         }
       ),
       /* @__PURE__ */ React__default$1.createElement("div", { style: { display: "flex" }, key: "ambiguousorliteral" }, /* @__PURE__ */ React__default$1.createElement(
-        HTMLSelect,
+        TgHTMLSelect,
         {
           name: "ambiguousOrLiteral",
           options: [
@@ -149933,10 +149832,11 @@ const EditReadOnlyItem = connectToEditor(({ readOnly: readOnly2 }) => ({
     disableSetReadOnly,
     disableBpEditing
   } = props;
+  const disabled = disableSetReadOnly || !onSave;
   return showReadOnly ? /* @__PURE__ */ React__default$1.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React__default$1.createElement(
-    HTMLSelect,
+    TgHTMLSelect,
     {
-      "data-tip": !readOnly2 && disableBpEditing ? disableBpEditing : void 0,
+      "data-tip": !readOnly2 && typeof disableBpEditing === "string" ? disableBpEditing : void 0,
       options: [
         {
           label: "Read Only",
@@ -149947,8 +149847,8 @@ const EditReadOnlyItem = connectToEditor(({ readOnly: readOnly2 }) => ({
           value: "editable"
         }
       ],
-      disabled: disableSetReadOnly || !onSave,
-      className: Classes.MINIMAL,
+      disabled,
+      className: Classes.MINIMAL + " veReadOnlySelect",
       value: readOnly2 ? "readOnly" : "editable",
       onChange: ({ target: { value } }) => handleReadOnlyChange(value === "readOnly", props)
     }
@@ -150052,7 +149952,7 @@ const EditCircularityItem = compose(
   withHandlers({ updateCircular })
 )(({ readOnly: readOnly2, showCircularity, circular: circular2, updateCircular: updateCircular2 }) => {
   return showCircularity ? /* @__PURE__ */ React__default$1.createElement(StatusBarItem, { dataTest: "veStatusBar-circularity" }, readOnly2 ? circular2 ? "Circular" : "Linear" : /* @__PURE__ */ React__default$1.createElement(
-    HTMLSelect,
+    TgHTMLSelect,
     {
       onChange: ({ target: { value } }) => {
         updateCircular2(value === "circular");
@@ -150073,7 +149973,7 @@ const EditAvailabilityItem = connectToEditor(
   })
 )(({ readOnly: readOnly2, showAvailability, materiallyAvailable: materiallyAvailable2, updateAvailability: updateAvailability2 }) => {
   return showAvailability ? /* @__PURE__ */ React__default$1.createElement(StatusBarItem, null, readOnly2 ? materiallyAvailable2 ? "Available" : "Unavailable" : /* @__PURE__ */ React__default$1.createElement(
-    HTMLSelect,
+    TgHTMLSelect,
     {
       onChange: ({ target: { value } }) => {
         updateAvailability2(value === "available");
@@ -150543,13 +150443,14 @@ const _GeneralProperties = class _GeneralProperties extends React__default$1.Com
     const {
       readOnly: readOnly2,
       showReadOnly = true,
-      updateCircular: updateCircular2,
       isProtein: isProtein2,
       disableSetReadOnly,
-      updateAvailability: updateAvailability2,
       sequenceData: sequenceData2,
       onSave,
       showAvailability,
+      beforeReadOnlyChange,
+      editorName,
+      disableBpEditing,
       sequenceNameUpdate: sequenceNameUpdate2
     } = this.props;
     const {
@@ -150558,9 +150459,7 @@ const _GeneralProperties = class _GeneralProperties extends React__default$1.Com
       isOligo: isOligo2,
       isRna: isRna2,
       sequence: sequence2 = "",
-      proteinSequence = "",
-      circular: circular2,
-      materiallyAvailable: materiallyAvailable2
+      proteinSequence = ""
     } = sequenceData2 || {};
     return /* @__PURE__ */ React__default$1.createElement(React__default$1.Fragment, null, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-left bp3-label" }, "Name"), " ", /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-right" }, /* @__PURE__ */ React__default$1.createElement(
       InputField,
@@ -150573,43 +150472,15 @@ const _GeneralProperties = class _GeneralProperties extends React__default$1.Com
         enableReinitialize: true,
         defaultValue: name2
       }
-    ), " ")), !isProtein2 && !isOligo2 && !isRna2 && /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-flex-row circularLinearSelect" }, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-left bp3-label" }, "Circular/Linear"), " ", /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React__default$1.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__default$1.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-left bp3-label" }, "Material Availability"), " ", /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React__default$1.createElement(
-      BPSelect,
+    ), " ")), !isProtein2 && !isOligo2 && !isRna2 && /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-flex-row circularLinearSelect" }, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-left bp3-label" }, "Circular/Linear"), " ", /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React__default$1.createElement(EditCircularityItem, { editorName, showCircularity: true }))), showAvailability && /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-left bp3-label" }, "Material Availability"), " ", /* @__PURE__ */ React__default$1.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React__default$1.createElement(EditAvailabilityItem, { editorName, showAvailability: true }))), /* @__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" }, " ", isProtein2 ? proteinSequence.length : sequence2.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(
+      EditReadOnlyItem,
       {
-        disabled: readOnly2,
-        onChange: (val2) => {
-          updateAvailability2(val2 === "available");
-        },
-        value: materiallyAvailable2 ? "available" : "unavailable",
-        options: [
-          { label: "Available", value: "available" },
-          { label: "Unavailable", value: "unavailable" }
-        ]
-      }
-    ))), /* @__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" }, " ", isProtein2 ? proteinSequence.length : sequence2.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: (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__default$1.createElement("div", null, "Description"), /* @__PURE__ */ React__default$1.createElement(
       TextareaField,
@@ -154735,8 +154606,8 @@ function StandaloneVersionHistoryView(props) {
   return /* @__PURE__ */ React__default$1.createElement(Provider, { store }, /* @__PURE__ */ React__default$1.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();
   }
@@ -154769,8 +154640,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();
   }