@teselagen/ove 0.0.14 → 0.0.16

package/src/ManageEnzymes/style.css

@@ -0,0 +1,100 @@
+.inputHolder {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.inputHolder.error input {
+  background: pink;
+}
+.inputHolder.error .errorMessage {
+  color: red;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-left: 95px;
+}
+.inputHolder > div {
+  display: flex;
+  align-items: center;
+}
+.inputHolder > div > span {
+  width: 210px;
+  margin-right: 0.5em;
+  text-align: right;
+}
+
+.addAdditionalEnzymeBtn {
+  width: 120px !important;
+  margin: 10px;
+}
+
+.addAdditionalEnzyme {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.addAdditionalEnzyme > span {
+  max-width: 350px;
+}
+
+.createYourOwnEnzyme {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.createYourOwnEnzyme .inputHolder input {
+  flex: 1;
+  display: block;
+  min-width: 0;
+  margin: 10px;
+}
+.createYourOwnEnzyme .buttonHolder {
+  display: flex;
+}
+.createYourOwnEnzyme .cutnumber.invalid {
+  color: red;
+}
+
+.ta_useCutsite {
+  margin: 10px;
+}
+.ta_useCutsite.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.labelWithIcon {
+  display: flex;
+  justify-content: flex-end;
+}
+.labelWithIcon > div {
+  padding-right: 10px;
+}
+
+.createYourOwnButton {
+  padding-top: 40px;
+  display: flex;
+  align-items: center;
+}
+.createYourOwnButton > span {
+  width: 250px;
+}
+
+.filterAndButton {
+  display: flex;
+  align-items: center;
+}
+
+.taLine {
+  text-align: left;
+}
+
+.taLineHolder {
+  width: 100%;
+}
+.taLineHolder div {
+  width: 100%;
+}

package/src/MenuBar/defaultConfig.js

@@ -0,0 +1,149 @@
+//only things specific to this menu should be included here
+//things that are shared between multiple menus, or that are command specific should be
+//defined in the commands/index.js file
+
+import viewSubmenu from "./viewSubmenu";
+export const copyOptionsMenu = {
+  text: "Copy Options",
+  showInSearchMenu: true,
+  submenu: [
+    { cmd: "toggleCopyFeatures", shouldDismissPopover: false },
+    { cmd: "toggleCopyPartialFeatures", shouldDismissPopover: false },
+    { cmd: "toggleCopyParts", shouldDismissPopover: false },
+    { cmd: "toggleCopyPartialParts", shouldDismissPopover: false }
+  ]
+};
+export const createNewAnnotationMenu = {
+  text: "Create",
+  cmd: "createMenuHolder",
+  showInSearchMenu: true
+};
+export default [
+  {
+    text: "File",
+    "data-test": "file",
+    submenu: [
+      {
+        cmd: "newSequence",
+        "data-test": "newSequence"
+      },
+      "renameSequence",
+      "saveSequence",
+      "saveSequenceAs",
+      "deleteSequence",
+      "duplicateSequence",
+      "--",
+      { cmd: "toggleReadOnlyMode", shouldDismissPopover: false },
+      "--",
+      "importSequence",
+      {
+        text: "Export Sequence",
+        showInSearchMenu: true,
+        submenu: [
+          { cmd: "exportSequenceAsGenbank" },
+          { cmd: "exportSequenceAsFasta" },
+          { cmd: "exportSequenceAsTeselagenJson" }
+        ]
+      },
+      "--",
+      {
+        text: "Print",
+        cmd: "print"
+        // submenu: [{ cmd: "printCircularView" }, { cmd: "printLinearView" }]
+      },
+      { cmd: "viewRevisionHistory", text: "Revision History" },
+      { cmd: "viewProperties", text: "Properties", icon: "properties" }
+    ]
+  },
+  {
+    text: "Edit",
+    submenu: [
+      createNewAnnotationMenu,
+      "--",
+      "cut",
+      "copy",
+      copyOptionsMenu,
+      "paste",
+      "--",
+      "undo",
+      "redo",
+      "--",
+      "find",
+      "goTo",
+      "--",
+      "select",
+      "selectAll",
+      "selectInverse",
+      {
+        text: "Change Case",
+        cmd: "changeCaseCmd",
+        submenu: [
+          "flipCaseSequence",
+          "upperCaseSequence",
+          "lowerCaseSequence",
+          "upperCaseSelection",
+          "lowerCaseSelection"
+        ]
+      },
+      {
+        text: "Change Circular/Linear",
+        cmd: "changeCircularityCmd",
+        submenu: ["toggleCircular", "toggleLinear"]
+      },
+      // {
+      //   text: "Change Sequence Case For Selection",
+      //   submenu: [
+      //   ]
+      // },
+      "--",
+      "complementSelection",
+      "complementEntireSequence",
+      "reverseComplementSelection",
+      "reverseComplementEntireSequence",
+      "rotateToCaretPosition"
+    ]
+  },
+  {
+    text: "View",
+    submenu: viewSubmenu
+  },
+  {
+    text: "Tools",
+    cmd: "toolsCmd",
+    submenu: [
+      "openFilterCutsites",
+      "restrictionEnzymesManager",
+      "openCreateCustomEnzyme",
+      "simulateDigestion",
+      "simulatePCR",
+      {
+        text: "Remove Duplicates",
+        submenu: [
+          "showRemoveDuplicatesDialogFeatures",
+          "showRemoveDuplicatesDialogParts",
+          "showRemoveDuplicatesDialogPrimers"
+        ]
+      },
+      {
+        text: "Auto Annotate",
+        cmd: "autoAnnotateHolder",
+        submenu: [
+          "autoAnnotateFeatures",
+          "autoAnnotateParts",
+          "autoAnnotatePrimers"
+        ]
+      }
+    ]
+  },
+  // { isMenuSearch: true }
+  {
+    text: "Help",
+    submenu: [
+      { isMenuSearch: true },
+      "--",
+      "about",
+      { cmd: "versionNumber", shouldDismissPopover: false },
+      "hotkeyDialog"
+    ]
+  }
+];

package/src/MenuBar/index.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { MenuBar, commandMenuEnhancer } from "@teselagen/ui";
+import { compose } from "redux";
+import { memoize } from "lodash";
+import withEditorProps from "../withEditorProps";
+import menuDef from "./defaultConfig";
+import getCommands from "../commands";
+import { Icon, Spinner } from "@blueprintjs/core";
+
+const ident = (x) => x;
+
+class OveMenuBar extends React.Component {
+  constructor(props) {
+    super(props);
+    const commands = getCommands(this);
+    window.oveMenuToastrSuccess = this.oveMenuToastrSuccess;
+    this.enhancers = [
+      commandMenuEnhancer(commands, {
+        useTicks: true,
+        omitIcons: true
+      })
+    ];
+    this.counter = 0;
+  }
+  state = {
+    // successMessage: "asdfasdf",
+    // successMessageLoading: true
+  };
+
+  getFilteredMenu = memoize((menuFilter, menuDef) => {
+    this.counter++;
+    if (this.counter === 50)
+      console.warn(
+        `It's likely you're passing a new "menuFilter" function every time. This will cause unecessary re-renders. Try not to recreate a new function each time!`
+      );
+    return menuFilter(menuDef);
+  });
+  oveMenuToastrSuccess = (message, { loading } = {}) => {
+    this.setState({ successMessage: message, successMessageLoading: loading });
+    if (this.clearId) {
+      clearTimeout(this.clearId);
+    }
+    this.clearId = setTimeout(() => {
+      this.setState({ successMessage: "", successMessageLoading: false });
+    }, 5000);
+  };
+
+  render() {
+    const { menuFilter = ident } = this.props;
+
+    // Clone original menu def to protect it from accidental mutation
+    return (
+      <div
+        className="veMenuBarContainer"
+        style={{ display: "flex", width: "100%" /* height: "100%" */ }}
+      >
+        <MenuBar
+          extraContent={
+            this.state.successMessage && (
+              <div
+                className="ove-menu-toast"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  marginLeft: "auto",
+                  marginRight: 10
+                }}
+              >
+                {this.state.successMessageLoading ? (
+                  <div>
+                    <Spinner size={15}></Spinner>
+                  </div>
+                ) : (
+                  <Icon icon="tick-circle" intent="success"></Icon>
+                )}{" "}
+                &nbsp;
+                {this.state.successMessage}
+              </div>
+            )
+          }
+          menu={this.getFilteredMenu(menuFilter, menuDef)}
+          enhancers={this.enhancers}
+        />
+        {/* <div
+          className="menuBarDivider"
+          style={{
+            height: "87%",
+            width: 2,
+            margin: 2,
+            background: "lightgrey"
+          }}
+        /> */}
+      </div>
+    );
+  }
+}
+
+export default compose(withEditorProps)(OveMenuBar);