@teselagen/ove 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "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

@@ -7,40 +7,43 @@ 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/AddOrEditAnnotationDialog/index.js

@@ -39,7 +39,7 @@ import { store, view } from "@risingstack/react-easy-state";
 
 import withEditorProps from "../../withEditorProps";
 import { withProps } from "recompose";
-import { map, flatMap } from "lodash";
+import { map, flatMap, round } from "lodash";
 import "./style.css";
 
 class AddOrEditAnnotationDialog extends React.Component {
@@ -58,30 +58,30 @@ class AddOrEditAnnotationDialog extends React.Component {
   formatStart = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
-      return (val + 2) / 3;
+      return round((val + 2) / 3);
     }
-    return val;
+    return round(val);
   };
   formatEnd = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
-      return val / 3;
+      return round(val / 3);
     }
-    return val;
+    return round(val);
   };
   parseStart = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
-      return val * 3 - 2;
+      return round(val * 3 - 2);
     }
-    return val;
+    return round(val);
   };
   parseEnd = val => {
     const { isProtein } = this.props.sequenceData || {};
     if (isProtein) {
-      return val * 3;
+      return round(val * 3);
     }
-    return val;
+    return round(val);
   };
   renderLocations = props => {
     const { fields } = props;

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,11 @@ class GeneralProperties extends React.Component {
             <div className="ve-column-right">
               {" "}
               <BPSelect
+                className={"veReadOnlySelect"}
                 disabled={!onSave || disableSetReadOnly}
-                onChange={val => {
-                  updateReadOnlyMode(val === "readOnly");
-                }}
+                onChange={val =>
+                  handleReadOnlyChange(val === "readOnly", this.props)
+                }
                 value={readOnly ? "readOnly" : "editable"}
                 options={[
                   { label: "Read Only", value: "readOnly" },

package/src/withEditorProps/index.js

@@ -568,10 +568,10 @@ function mapStateToProps(state, ownProps) {
   const { __allEditorsOptions } = VectorEditor;
   const { uppercaseSequenceMapFont } = __allEditorsOptions;
 
-
   if (!editorState) {
     return editorReducer({}, {});
   }
+  const sequenceLength = s.sequenceLengthSelector(editorState);
 
   const { findTool, annotationsToSupport = {} } = editorState;
   const visibilities = getVisibilities(editorState);
@@ -583,7 +583,13 @@ function mapStateToProps(state, ownProps) {
   ].forEach(([n, type, annotationTypePlural]) => {
     const vals = getFormValues(n)(state);
     if (vals) {
-      annotationToAdd = getAnnToAdd(vals, n, type, annotationTypePlural);
+      annotationToAdd = getAnnToAdd(
+        vals,
+        n,
+        type,
+        annotationTypePlural,
+        sequenceLength
+      );
     }
   });
 
@@ -614,7 +620,6 @@ function mapStateToProps(state, ownProps) {
     editorState,
     ownProps.additionalEnzymes
   );
-  const sequenceLength = s.sequenceLengthSelector(editorState);
 
   const { matchedSearchLayer, searchLayers, matchesTotal } =
     getSearchLayersAndMatch(editorState);
@@ -956,22 +961,28 @@ const getFindTool = createSelector(
   }
 );
 
-const getAnnToAdd = defaultMemoize((vals, n, type, annotationTypePlural) => {
-  const annToAdd = {
-    color: getFeatureToColorMap({ includeHidden: true })[
-      vals.type || "primer_bind"
-    ], //we won't have the correct color yet so we set it here
-    ...vals,
-    formName: n,
-    type,
-    annotationTypePlural,
-    name: vals.name || "Untitled"
-  };
-  if (!vals.useLinkedOligo) {
-    delete annToAdd.bases;
+const getAnnToAdd = defaultMemoize(
+  (vals, n, type, annotationTypePlural, sequenceLength) => {
+    const annToAdd = normalizeRange(
+      {
+        color: getFeatureToColorMap({ includeHidden: true })[
+          vals.type || "primer_bind"
+        ], //we won't have the correct color yet so we set it here
+        ...vals,
+        formName: n,
+        type,
+        annotationTypePlural,
+        name: vals.name || "Untitled"
+      },
+      sequenceLength
+    );
+
+    if (!vals.useLinkedOligo) {
+      delete annToAdd.bases;
+    }
+    return annToAdd;
   }
-  return annToAdd;
-});
+);
 const getSeqDataWithAnnToAdd = defaultMemoize(
   (seqData, ann, allowMultipleFeatureDirections) => {
     if (ann) {

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;
 }