@teselagen/ove 0.3.12 → 0.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -15,7 +15,7 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.7",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.3.10",
+    "@teselagen/ui": "0.3.12",
     "@teselagen/file-utils": "0.3.9",
     "@teselagen/bounce-loader": "0.3.7",
     "@teselagen/bio-parsers": "0.3.8",

package/src/Editor/index.js

@@ -902,7 +902,7 @@ export class Editor extends React.Component {
             contentLeft={this.props.contentLeft}
             editorName={editorName}
             withDigestTool
-            onChangeEditLock={this.props.onChangeEditLock}
+            beforeReadOnlyChange={this.props.beforeReadOnlyChange}
             {...ToolBarProps}
           />
 

package/src/Editor/userDefinedHandlersAndOpts.js

@@ -1,5 +1,5 @@
 export const userDefinedHandlersAndOpts = [
-  "onChangeEditLock",
+  "beforeReadOnlyChange",
   "defaultLinkedOligoMessage",
   "allowMultipleFeatureDirections",
   "getAdditionalEditAnnotationComps",

package/src/StatusBar/index.js

@@ -14,41 +14,35 @@ import { getSelectionMessage } from "../utils/editorUtils";
 import useMeltingTemp from "../utils/useMeltingTemp";
 import MeltingTemp from "./MeltingTemp";
 import { getSequenceWithinRange } from "@teselagen/range-utils";
+import { handleReadOnlyChange } from "../ToolBar/editTool";
 
 const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
   readOnly
-}))(
-  ({
-    onSave,
-    readOnly,
-    showReadOnly,
-    disableSetReadOnly,
-    updateReadOnlyMode
-  }) => {
-    return showReadOnly ? (
-      <StatusBarItem dataTest="veStatusBar-readOnly">
-        {onSave ? (
-          <HTMLSelect
-            options={[
-              { label: "Read Only", value: "readOnly" },
-              { label: "Editable", value: "editable" }
-            ]}
-            disabled={disableSetReadOnly || !onSave} //the !onSave here is redundant
-            className={Classes.MINIMAL}
-            value={readOnly ? "readOnly" : "editable"}
-            onChange={({ target: { value } }) => {
-              updateReadOnlyMode(value === "readOnly");
-            }}
-          />
-        ) : readOnly ? (
-          "Read Only"
-        ) : (
-          "Editable"
-        )}
-      </StatusBarItem>
-    ) : null;
-  }
-);
+}))(props => {
+  const { onSave, readOnly, showReadOnly, disableSetReadOnly } = props;
+  return showReadOnly ? (
+    <StatusBarItem dataTest="veStatusBar-readOnly">
+      {onSave ? (
+        <HTMLSelect
+          options={[
+            { label: "Read Only", value: "readOnly" },
+            { label: "Editable", value: "editable" }
+          ]}
+          disabled={disableSetReadOnly || !onSave} //the !onSave here is redundant
+          className={Classes.MINIMAL}
+          value={readOnly ? "readOnly" : "editable"}
+          onChange={({ target: { value } }) =>
+            handleReadOnlyChange(value === "readOnly", props)
+          }
+        />
+      ) : readOnly ? (
+        "Read Only"
+      ) : (
+        "Editable"
+      )}
+    </StatusBarItem>
+  ) : null;
+});
 
 const ShowSelectionItem = compose(
   connectToEditor(
@@ -226,7 +220,8 @@ export function StatusBar({
   showGCContentByDefault,
   onSelectionOrCaretChanged,
   GCDecimalDigits = 1,
-  isProtein
+  isProtein,
+  beforeReadOnlyChange
 }) {
   return (
     <div className="veStatusBar">
@@ -234,6 +229,7 @@ export function StatusBar({
         <ShowTypeItem editorName={editorName}></ShowTypeItem>
       )}
       <EditReadOnlyItem
+        beforeReadOnlyChange={beforeReadOnlyChange}
         editorName={editorName}
         onSave={onSave}
         disableSetReadOnly={disableSetReadOnly}

package/src/ToolBar/editTool.js

@@ -2,45 +2,49 @@ import React, { useState } from "react";
 import { Icon } from "@blueprintjs/core";
 import ToolbarItem from "./ToolbarItem";
 import { connectToEditor } from "../withEditorProps";
+import { func } from "prop-types";
 
 export default connectToEditor(editorState => {
   return {
     readOnly: editorState.readOnly
   };
-})(
-  ({
-    toolbarItemProps,
-    readOnly,
-    toggleReadOnlyMode,
-    disableSetReadOnly,
-    onChangeEditLock
-  }) => {
-    const [isLoading, setIsLoading] = useState(false);
-    const readOnlyTooltip = ({ readOnly, disableSetReadOnly }) => {
-      if (isLoading) {
-        return "Loading...";
-      } else if (disableSetReadOnly) {
-        return "You do not have permission to edit locks on this sequence";
-      }
-      return readOnly ? "Click to enable editing" : "Click to disable editing";
-    };
-    return (
-      <ToolbarItem
-        {...{
-          disabled: isLoading || disableSetReadOnly,
-          Icon: <Icon icon={readOnly ? "lock" : "unlock"} />,
-          onIconClick: async () => {
-            if (onChangeEditLock) {
-              setIsLoading(true);
-              await onChangeEditLock(!readOnly);
-              setIsLoading(false);
-            }
-            toggleReadOnlyMode();
-          },
-          tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),
-          ...toolbarItemProps
-        }}
-      />
-    );
+})(props => {
+  const { toolbarItemProps, readOnly, disableSetReadOnly } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const readOnlyTooltip = ({ readOnly, disableSetReadOnly }) => {
+    if (isLoading) {
+      return "Loading...";
+    } else if (disableSetReadOnly) {
+      return "You do not have permission to edit locks on this sequence";
+    }
+    return readOnly ? "Click to enable editing" : "Click to disable editing";
+  };
+  return (
+    <ToolbarItem
+      {...{
+        disabled: isLoading || disableSetReadOnly,
+        Icon: <Icon icon={readOnly ? "lock" : "unlock"} />,
+        onIconClick: () =>
+          handleReadOnlyChange(!readOnly, { ...props, setIsLoading }),
+        tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),
+        ...toolbarItemProps
+      }}
+    />
+  );
+});
+
+export async function handleReadOnlyChange(
+  newVal,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  { beforeReadOnlyChange, updateReadOnlyMode, setIsLoading = () => {} }
+) {
+  if (beforeReadOnlyChange) {
+    setIsLoading(true);
+    const shouldChange = await beforeReadOnlyChange(newVal);
+    setIsLoading(false);
+    if (shouldChange === false) {
+      return;
+    }
   }
-);
+  updateReadOnlyMode(newVal);
+}

package/src/commands/index.js

@@ -36,6 +36,7 @@ import {
   showDialog
 } from "../GlobalDialogUtils";
 import { partsSubmenu } from "../MenuBar/viewSubmenu";
+import { handleReadOnlyChange } from "../ToolBar/editTool";
 
 const isProtein = props => props.sequenceData && props.sequenceData.isProtein;
 const isOligo = props => props.sequenceData && props.sequenceData.isOligo;
@@ -139,7 +140,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: {

package/src/helperComponents/PropertiesDialog/GeneralProperties.js

@@ -3,6 +3,7 @@ import { InputField, BPSelect, TextareaField } from "@teselagen/ui";
 import { reduxForm } from "redux-form";
 import withEditorProps from "../../withEditorProps";
 import { compose } from "recompose";
+import { handleReadOnlyChange } from "../../ToolBar/editTool";
 
 class GeneralProperties extends React.Component {
   updateSeqDesc = val => {
@@ -17,7 +18,6 @@ class GeneralProperties extends React.Component {
       disableSetReadOnly,
       updateAvailability,
       sequenceData,
-      updateReadOnlyMode,
       onSave,
       showAvailability,
       sequenceNameUpdate
@@ -102,10 +102,12 @@ class GeneralProperties extends React.Component {
             <div className="ve-column-right">
               {" "}
               <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" },

package/src/withEditorProps/index.js

@@ -568,7 +568,6 @@ function mapStateToProps(state, ownProps) {
   const { __allEditorsOptions } = VectorEditor;
   const { uppercaseSequenceMapFont } = __allEditorsOptions;
 
-
   if (!editorState) {
     return editorReducer({}, {});
   }

package/style.css

@@ -10757,6 +10757,144 @@ li.bp3-menu-divider:last-child {
 .bp3-dark .isBoldSeq {
   stroke: white;
 }
+.Popover-body {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 10px;
+  background: white;
+  color: black;
+  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  margin-top: 10px;
+}
+
+.Popover-tipShape {
+  fill: white;
+}
+
+.Popover-tip {
+  display: none;
+}
+
+.veToolbar .veToolbarItemOuter {
+  display: flex;
+  height: 32px;
+}
+.veToolbar .veToolbarItemOuter .veToolbarItem {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+.veToolbarSpacer {
+  height: 80%;
+  width: 1px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon {
+  padding: 3px;
+  border-radius: 3px;
+  height: 32px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #006cab;
+}
+.veToolbarItemOuter.disabled .veToolbarIcon {
+  color: #c0c0c0;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon.veToolbarItemToggled {
+  background: lightgrey;
+  border-color: #006cab;
+}
+
+.veToolbar :not(.disabled).veToolbarItemOuter .veToolbarIcon:hover {
+  border-color: #006cab;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon:active {
+  opacity: 0.7;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon img,
+.veToolbar .veToolbarItemOuter .veToolbarIcon svg,
+.veToolbar .veToolbarItemOuter .veToolbarIcon object {
+  cursor: pointer;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon img svg,
+.veToolbar .veToolbarItemOuter .veToolbarIcon svg svg,
+.veToolbar .veToolbarItemOuter .veToolbarIcon object svg {
+  color: #006baa;
+}
+
+.minOrfSizeInput::-webkit-inner-spin-button,
+.minOrfSizeInput::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.minOrfSizeInput {
+  padding-bottom: 0.25em;
+  width: 5em;
+  margin-left: 10px;
+  text-align: center;
+  padding-top: 0.25em;
+  border: 1px solid lightgrey;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.veToolbarDropdown {
+  cursor: pointer;
+  padding: 0px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  border-radius: 3px;
+}
+.veToolbarDropdown:hover {
+  background: lightgrey;
+}
+.veToolbarDropdown.isOpen {
+  background: lightgrey;
+}
+
+.veToolbarCutsiteFilterHolder {
+  min-width: 300px;
+}
+.veToolbarCutsiteFilterHolder > div {
+  margin: 10px;
+}
+.veToolbarCutsiteFilterHolder .title {
+  margin: 10px;
+  background: blue;
+  width: 100%;
+}
+
+.translateInfoSpan {
+  font-size: 0.8em;
+  padding: 4px;
+}
+
+.showOrfTranslateSpan {
+  padding: 8px;
+}
+
+.veToolbarOrfOptionsHolder {
+  min-width: 300px;
+  margin-bottom: 10px;
+}
+
+.veToolbarViewOptionsHolder div {
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+.veToolbarViewOptionsHolder label {
+  margin: 40px 10px;
+}
+.ve-toolbar-item-popover {
+  /* the z-index has to be high for it to work with ice */
+  z-index: 4000;
+}
 .insertReplaceButton {
   width: 140px;
 }
@@ -11217,144 +11355,6 @@ path.partWithSelectedTag {
 .taLineHolder div {
   width: 100%;
 }
-.Popover-body {
-  display: inline-flex;
-  flex-direction: column;
-  padding: 10px;
-  background: white;
-  color: black;
-  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.5);
-  z-index: 1;
-  margin-top: 10px;
-}
-
-.Popover-tipShape {
-  fill: white;
-}
-
-.Popover-tip {
-  display: none;
-}
-
-.veToolbar .veToolbarItemOuter {
-  display: flex;
-  height: 32px;
-}
-.veToolbar .veToolbarItemOuter .veToolbarItem {
-  display: flex;
-  align-items: center;
-  height: 32px;
-}
-.veToolbarSpacer {
-  height: 80%;
-  width: 1px;
-  margin-left: 10px;
-  margin-right: 10px;
-}
-.veToolbar .veToolbarItemOuter .veToolbarIcon {
-  padding: 3px;
-  border-radius: 3px;
-  height: 32px;
-  width: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #006cab;
-}
-.veToolbarItemOuter.disabled .veToolbarIcon {
-  color: #c0c0c0;
-}
-.veToolbar .veToolbarItemOuter .veToolbarIcon.veToolbarItemToggled {
-  background: lightgrey;
-  border-color: #006cab;
-}
-
-.veToolbar :not(.disabled).veToolbarItemOuter .veToolbarIcon:hover {
-  border-color: #006cab;
-}
-.veToolbar .veToolbarItemOuter .veToolbarIcon:active {
-  opacity: 0.7;
-}
-.veToolbar .veToolbarItemOuter .veToolbarIcon img,
-.veToolbar .veToolbarItemOuter .veToolbarIcon svg,
-.veToolbar .veToolbarItemOuter .veToolbarIcon object {
-  cursor: pointer;
-}
-.veToolbar .veToolbarItemOuter .veToolbarIcon img svg,
-.veToolbar .veToolbarItemOuter .veToolbarIcon svg svg,
-.veToolbar .veToolbarItemOuter .veToolbarIcon object svg {
-  color: #006baa;
-}
-
-.minOrfSizeInput::-webkit-inner-spin-button,
-.minOrfSizeInput::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.minOrfSizeInput {
-  padding-bottom: 0.25em;
-  width: 5em;
-  margin-left: 10px;
-  text-align: center;
-  padding-top: 0.25em;
-  border: 1px solid lightgrey;
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
-}
-
-.veToolbarDropdown {
-  cursor: pointer;
-  padding: 0px;
-  padding-bottom: 5px;
-  padding-top: 5px;
-  border-radius: 3px;
-}
-.veToolbarDropdown:hover {
-  background: lightgrey;
-}
-.veToolbarDropdown.isOpen {
-  background: lightgrey;
-}
-
-.veToolbarCutsiteFilterHolder {
-  min-width: 300px;
-}
-.veToolbarCutsiteFilterHolder > div {
-  margin: 10px;
-}
-.veToolbarCutsiteFilterHolder .title {
-  margin: 10px;
-  background: blue;
-  width: 100%;
-}
-
-.translateInfoSpan {
-  font-size: 0.8em;
-  padding: 4px;
-}
-
-.showOrfTranslateSpan {
-  padding: 8px;
-}
-
-.veToolbarOrfOptionsHolder {
-  min-width: 300px;
-  margin-bottom: 10px;
-}
-
-.veToolbarViewOptionsHolder div {
-  margin-left: 10px;
-  margin-bottom: 10px;
-}
-.veToolbarViewOptionsHolder label {
-  margin: 40px 10px;
-}
-.ve-toolbar-item-popover {
-  /* the z-index has to be high for it to work with ice */
-  z-index: 4000;
-}
 .veMergeFeaturesDialog .bp3-form-content {
   flex-grow: 1;
 }