@teselagen/ove 0.3.11 → 0.3.13

package/src/RowView/index.js

@@ -26,7 +26,6 @@ import {
 import { defaultMemoize } from "reselect";
 import { connect } from "react-redux";
 
-
 const rowJumpButtonStyle = {
   height: rowHeights.rowJumpButtons.height
 };
@@ -285,7 +284,7 @@ class _RowView extends React.Component {
 
   cache = {};
 
-  renderItem = (index) => {
+  renderItem = index => {
     // if (this.cache[index]) return this.cache[index];
     const {
       //currently found in props
@@ -319,7 +318,7 @@ class _RowView extends React.Component {
               icon="arrow-down"
               minimal
               data-test="jumpToEndButton"
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 this.InfiniteScroller &&
                   this.InfiniteScroller.scrollTo(rowData.length);
@@ -338,7 +337,7 @@ class _RowView extends React.Component {
               icon="arrow-up"
               minimal
               data-test="jumpToStartButton"
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 this.InfiniteScroller && this.InfiniteScroller.scrollTo(0);
               }}
@@ -362,7 +361,7 @@ class _RowView extends React.Component {
               truncateLabelsThatDoNotFit,
               rowBottomComp,
               scalePct: this.state?.scalePct,
-              setScalePct: (scalePct) => {
+              setScalePct: scalePct => {
                 this.setState({ scalePct });
               },
               isRowView: true,
@@ -389,11 +388,11 @@ class _RowView extends React.Component {
       return null;
     }
   };
-  onDrag = (event) => {
+  onDrag = event => {
     if (isMobile({ tablet: true })) {
       if (
         //only allow dragging on mobile if the user is grabbing the cursor
-        !some(draggableClassnames, (cn) => {
+        !some(draggableClassnames, cn => {
           if (event.target.classList.contains(cn)) {
             return true;
           }
@@ -407,7 +406,7 @@ class _RowView extends React.Component {
     const rowData = this.rowData;
     this.getNearestCursorPositionToMouseEvent(rowData, event, editorDragged);
   };
-  onStart = (event) => {
+  onStart = event => {
     this.dragging = true;
     const rowData = this.rowData;
     this.getNearestCursorPositionToMouseEvent(
@@ -422,16 +421,16 @@ class _RowView extends React.Component {
     editorDragStopped();
   };
 
-  getRef = (ref) => (this.node = ref);
+  getRef = ref => (this.node = ref);
 
-  onContextMenu = (event) => {
+  onContextMenu = event => {
     this.getNearestCursorPositionToMouseEvent(
       this.rowData,
       event,
       this.props.backgroundRightClicked
     );
   };
-  onClick = (event) => {
+  onClick = event => {
     this.getNearestCursorPositionToMouseEvent(
       this.rowData,
       event,
@@ -439,7 +438,7 @@ class _RowView extends React.Component {
     );
   };
 
-  getReactListRef = (c) => {
+  getReactListRef = c => {
     this.InfiniteScroller = c;
     !this.calledUpdateScrollOnce && this.updateScrollPosition({}, this.props); //trigger the scroll here as well because now we actually have the infinite scroller component accessible
   };

package/src/SimpleCircularOrLinearView.js

@@ -31,7 +31,7 @@ import {
 } from "./withEditorInteractions/clickAndDragUtils";
 
 //this view is meant to be a helper for showing a simple (non-redux connected) circular or linear view!
-export default (props) => {
+export default props => {
   let {
     sequenceData: _sequenceData,
     annotationVisibility: _annotationVisibility = {},
@@ -281,13 +281,13 @@ export default (props) => {
   return inner({});
 };
 
-const DownloadBtn = withHandlers({ exportSequenceToFile })((props) => {
+const DownloadBtn = withHandlers({ exportSequenceToFile })(props => {
   return (
     <Tooltip content="Download">
       <Button
         className="veDownloadButton"
         style={{ marginRight: 10 }}
-        onClick={(event) =>
+        onClick={event =>
           showContextMenu(
             [
               "exportSequenceAsGenbank",
@@ -337,7 +337,7 @@ const VisibilityOptions = ({
     <Tooltip disabled={isPopoverOpen} content="Visibility Options">
       <Popover
         minimal
-        onInteraction={(isOpen) => {
+        onInteraction={isOpen => {
           setPopoverOpen(isOpen);
         }}
         isOpen={isPopoverOpen}
@@ -345,11 +345,11 @@ const VisibilityOptions = ({
           <Menu>
             {flatMap(
               ["features", "parts", "primers", "translations", "cutsites"],
-              (name) => {
+              name => {
                 if (!map(sequenceData[name]).length) return [];
                 return (
                   <MenuItem
-                    onClick={(e) => {
+                    onClick={e => {
                       setVisibilityOptions({
                         ...annotationVisibility,
                         [name]: !annotationVisibility[name]

package/src/StatusBar/MeltingTemp.js

@@ -9,8 +9,8 @@ import useTmType from "../utils/useTmType";
 
 export default function MeltingTemp({
   sequence,
-  WrapperToUse = (p) => <div>{p.children}</div>,
-  InnerWrapper = (p) => (
+  WrapperToUse = p => <div>{p.children}</div>,
+  InnerWrapper = p => (
     <Button minimal small>
       {p.children}
     </Button>
@@ -46,7 +46,7 @@ export default function MeltingTemp({
                 { value: "default", label: "Default Tm" },
                 { value: "neb_tm", label: "NEB Tm" }
               ]}
-              onChange={(e) => setTmType(e.target.value)}
+              onChange={e => setTmType(e.target.value)}
               selectedValue={tmType}
             ></RadioGroup>
             {hasWarning && (

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/ToolbarItem.js

@@ -125,7 +125,7 @@ class ToolbarItem extends React.Component {
     );
     const content = (
       <div
-        ref={(n) => {
+        ref={n => {
           if (n) this.dropdownNode = n;
         }}
         style={{ padding: 10, minWidth: 250, maxWidth: 350 }}
@@ -160,7 +160,7 @@ class ToolbarItem extends React.Component {
         <Popover
           disabled={popoverDisabled}
           isOpen={!!Dropdown && isOpen}
-          onClose={(e) => {
+          onClose={e => {
             let srcElement;
             if (e) {
               srcElement = e.srcElement || e.target;

package/src/ToolBar/alignmentTool.js

@@ -100,7 +100,7 @@ class AlignmentTool extends React.Component {
   state = {
     templateSeqIndex: 0
   };
-  sendSelectedDataToBackendForAlignment = async (values) => {
+  sendSelectedDataToBackendForAlignment = async values => {
     const {
       addedSequences,
       isPairwiseAlignment,
@@ -175,7 +175,7 @@ class AlignmentTool extends React.Component {
     // const j5server = process.env.REMOTE_J5 || "http://j5server.teselagen.com"
 
     window.toastr.success("Alignment submitted.");
-    const replaceProtocol = (url) => {
+    const replaceProtocol = url => {
       return url.replace("http://", window.location.protocol + "//");
     };
 
@@ -227,7 +227,7 @@ class AlignmentTool extends React.Component {
         }),
       alignmentTracks:
         alignedSequences &&
-        alignedSequences.map((alignmentData) => {
+        alignedSequences.map(alignmentData => {
           return {
             sequenceData:
               seqsToAlign[
@@ -254,12 +254,12 @@ class AlignmentTool extends React.Component {
 
   handleFileUpload = (files, onChange) => {
     const { array } = this.props;
-    flatMap(files, async (file) => {
+    flatMap(files, async file => {
       const results = await anyToJson(file.originalFileObj, {
         fileName: file.name,
         acceptParts: true
       });
-      return results.forEach((result) => {
+      return results.forEach(result => {
         if (result.success) {
           array.push("addedSequences", result.parsedSequence);
         } else {
@@ -278,7 +278,7 @@ class AlignmentTool extends React.Component {
         <h6>Or enter sequences in plain text format</h6>
         <div>
           <AddYourOwnSeqForm
-            addSeq={(newSeq) => {
+            addSeq={newSeq => {
               fields.push(newSeq);
             }}
           />
@@ -327,7 +327,7 @@ class AlignmentTool extends React.Component {
                   )}
 
                   <Button
-                    onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation();
                       e.preventDefault();
                       fields.remove(index);
@@ -443,7 +443,7 @@ const AddYourOwnSeqForm = reduxForm({
 })(({ pristine, error, handleSubmit, reset, addSeq }) => {
   return (
     <form
-      onSubmit={handleSubmit((vals) => {
+      onSubmit={handleSubmit(vals => {
         reset();
         addSeq(vals);
       })}
@@ -490,7 +490,7 @@ function mottTrim(qualNums) {
       totalScore = 0;
     }
   }
-  const firstPositiveValue = totalScoreInfo.find((e) => {
+  const firstPositiveValue = totalScoreInfo.find(e => {
     return e > 0;
   });
   startPos = totalScoreInfo.indexOf(firstPositiveValue);

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) => {
+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/ToolBar/findTool.js

@@ -1,2 +1,2 @@
-import inlineFindTool from './inlineFindTool'
-export default inlineFindTool
+import inlineFindTool from "./inlineFindTool";
+export default inlineFindTool;

package/src/ToolBar/importTool.js

@@ -17,7 +17,7 @@ export default compose(
         IconWrapperProps: {
           multiple: false,
           style: {},
-          onDrop: (files) => importSequenceFromFile(files[0])
+          onDrop: files => importSequenceFromFile(files[0])
         },
         tooltip: "Click or drag to import and view files (.fasta .gb .dna)",
         ...toolbarItemProps

package/src/ToolBar/index.js

@@ -66,7 +66,7 @@ export function ToolBar(props) {
   };
 
   const toolListToUse = useMemo(() => {
-    return flatMap(toolList, (toolNameOrOverrides) => {
+    return flatMap(toolList, toolNameOrOverrides => {
       let toolName;
       let toolOverride;
       if (isString(toolNameOrOverrides)) {
@@ -196,7 +196,7 @@ export function ToolBar(props) {
     </div>
   );
 }
-const CloseFullscreenButton = (props) => {
+const CloseFullscreenButton = props => {
   return (
     <Tooltip content="Close Fullscreen Mode">
       <Button

package/src/ToolBar/oligoTool.js

@@ -16,7 +16,7 @@ export default connectToEditor(editorState => {
     <ToolbarItem
       {...{
         Icon: <Icon icon="swap-horizontal" />,
-        onIconClick: function() {
+        onIconClick: function () {
           annotationVisibilityToggle("primers");
         },
         isHidden,

package/src/ToolBar/orfTool.js

@@ -1,11 +1,6 @@
 import { Icon } from "@blueprintjs/core";
 import React from "react";
-import {
-  orfIcon,
-  CmdCheckbox,
-  CmdDiv,
-  InfoHelper
-} from "@teselagen/ui";
+import { orfIcon, CmdCheckbox, CmdDiv, InfoHelper } from "@teselagen/ui";
 import ToolbarItem from "./ToolbarItem";
 import { connectToEditor } from "../withEditorProps";
 import withEditorProps from "../withEditorProps";

package/src/ToolBar/printTool.js

@@ -1,11 +1,11 @@
-//TNRTODO this needs to be fixed and implemented 
+//TNRTODO this needs to be fixed and implemented
 import React from "react";
 import print from "./veToolbarIcons/print.png";
 
 export default () => {
   return {
     Icon: <img src={print} alt="Print Vector" />,
-    onIconClick: function() {
+    onIconClick: function () {
       // var myPrintContent = document.getElementById('printdiv');
       // var myPrintWindow = window.open(windowUrl, windowName, 'left=300,top=100,width=400,height=400');
       // myPrintWindow.document.write(myPrintContent.innerHTML);

package/src/ToolBar/visibilityTool.js

@@ -27,7 +27,7 @@ export default connectToEditor(({ toolBar = {} }) => {
   );
 });
 
-const VisibilityOptions = withEditorProps(function(props) {
+const VisibilityOptions = withEditorProps(function (props) {
   return (
     <Menu>
       {createCommandMenu(viewSubmenu, getCommands({ props }), {

package/src/VersionHistoryView/index.js

@@ -38,7 +38,7 @@ export class VersionHistoryView extends React.Component {
   //     ];
   //   }
   // };
-  updateSeqData = (sequenceData) => {
+  updateSeqData = sequenceData => {
     this.activeSeqData = sequenceData;
     this.props.vectorEditorInitialize(
       {
@@ -81,7 +81,7 @@ export class VersionHistoryView extends React.Component {
     this.setState({
       versionList: [
         currentVersion,
-        ...versionList.map((r) => {
+        ...versionList.map(r => {
           return { ...r, id: r.versionId };
         })
       ] //currentVersion should always come first