Improve enzyme management (#586)

* working on adding a manage enzymes dialog

* lots of work on enzyme management dialog; adding ability to hide individual enzymes; starting to add user created enzyme groups to cutsite filter

* more work on ManageEnzyme dialog

* tiny

cypress.json

@@ -1,4 +1,6 @@
 {
   "projectId": "mp89gp",
-  "baseUrl": "http://localhost:3344"
+  "baseUrl": "http://localhost:3344",
+  "viewportHeight": 800,
+  "viewportWidth": 1280
 }

cypress/integration/addYourOwnEnzyme.spec.js

@@ -19,13 +19,13 @@ describe("addAdditionalEnzymes", function() {
     cy.contains("(2 cuts)");
   });
 
-  it(`can open the add additional enzymes dialog from the Tools > Add Additional Enzymes 
+  it(`can open the add additional enzymes dialog from the Tools > Manage Enzymes 
   and add a custom user enzyme `, function() {
     cy.get(".tg-menu-bar")
       .contains("Tools")
       .click();
     cy.get(".bp3-menu-item")
-      .contains("Add Additional Enzymes")
+      .contains("Manage Enzymes")
       .click();
     cy.contains("Create your own enzyme").click();
     cy.contains("Cuts 0 times in your Destination Vector");
@@ -37,13 +37,13 @@ describe("addAdditionalEnzymes", function() {
     cy.contains("Use Enzyme").click();
     cy.get(`[data-test="cutsiteToolDropdown"]`).click();
   });
-  it(`can open the add additional enzymers dialog from the Tools > Add Additional Enzymes 
+  it(`can open the add additional enzymers dialog from the Tools > Manage Enzymes 
   and add an additional enzyme `, function() {
     cy.get(".tg-menu-bar")
       .contains("Tools")
       .click();
     cy.get(".bp3-menu-item")
-      .contains("Add Additional Enzymes")
+      .contains("Manage Enzymes")
       .click();
     cy.get(`input[placeholder="Select cut sites..."]`).click();
     cy.contains("AaaI").click();
@@ -55,8 +55,8 @@ describe("addAdditionalEnzymes", function() {
   it("can open the create a new enzyme dialog from the cutsite filter dropdown", function() {
     cy.get(`[data-test="cutsiteToolDropdown"]`).click();
     cy.get(`.veToolbarCutsiteFilterHolder .tg-select`).click();
-    cy.contains(".bp3-menu-item", `Add additional enzyme`).click();
-    cy.contains(".bp3-heading", "Add Additional Enzymes");
+    cy.contains(".bp3-menu-item", `Manage Enzymes`).click();
+    cy.contains(".bp3-heading", "Manage Enzymes");
 
     // cy.get(`[data-test="veStatusBar-circularity"]`)
     //   .find("select")

cypress/integration/enzymeManager.spec.js

@@ -0,0 +1,35 @@
+describe("manage enzymes dialog", () => {
+  it(`should be able to add a new group and add enzymes to it`, () => {
+    cy.visit("");
+    cy.window().then(win => {
+      win.localStorage.clear();
+    });
+    cy.triggerFileCmd("Manage Enzymes");
+    cy.get(".veEnzymeDialogAddGroupBtn").click();
+    cy.get(".veNewEnzymeGroupPopover input").type("newGroup");
+    cy.get(".veNewEnzymeGroupPopover .bp3-icon-tick").click();
+    cy.contains("Common Enzymes").click();
+    cy.contains("AccIII").click();
+    cy.contains("Eco52I").click();
+    cy.get(".veEnzymeGroupAddEnzymesBtn").click();
+    // cy.get('.veEnzymeGroupAddEnzymesBtn').blur()
+    cy.contains("Copy 2 Enzyme(s)");
+    cy.get(".veEnzymeGroupMoveEnzymePopover .bp3-icon-tick").click();
+    cy.contains("Deselect 2").click({ force: true });
+    cy.contains("Deselect 0").should("exist");
+
+    cy.contains("newGroup").click();
+    cy.contains("AccIII").click();
+    cy.get(".veRemoveEnzymeFromGroupBtn").click();
+    cy.contains("button", "OK").click();
+    cy.contains("AccIII").should("not.exist");
+    cy.get(`[data-test="cutsiteToolDropdown"]`).click();
+    cy.get(`.veToolbarCutsiteFilterHolder .tg-select`).click();
+    cy.contains(
+      ".veToolbarCutsiteFilterHolder .bp3-menu-item",
+      "newGroup"
+    ).click();
+
+    // cy.get('.veEnzymeGroupAddEnzymesBtn').click()
+  });
+});

cypress/integration/enzymeViewer.spec.js

@@ -1,4 +1,3 @@
-
 describe("tabs", function() {
   beforeEach(() => {
     cy.visit("#EnzymeViewer");

cypress/integration/simpleCircularOrLinearView.spec.js

@@ -1,4 +1,3 @@
-
 describe("tabs", function() {
   beforeEach(() => {
     cy.visit("/#/SimpleCircularOrLinearView");

cypress/integration/tabs.spec.js

@@ -1,4 +1,3 @@
-
 describe("tabs", function() {
   beforeEach(() => {
     cy.visit("");

editorStateExample.js

@@ -126,31 +126,31 @@ const exampleEditorState = {
         cutsThisManyTimes: 1
       }
     ],
-    allRestrictionEnzymes: {
-      aatii: {
-        name: "AatII",
-        site: "gacgtc",
-        forwardRegex: "gacgtc",
-        reverseRegex: "gacgtc",
-        topSnipOffset: 5,
-        bottomSnipOffset: 1,
-        usForward: 0,
-        usReverse: 0,
-        color: "#059369"
-      },
-      acci: {
-        name: "AccI",
-        site: "gtmkac",
-        forwardRegex: "gt[acm][gkt]ac",
-        reverseRegex: "gt[acm][gkt]ac",
-        topSnipOffset: 2,
-        bottomSnipOffset: 4,
-        usForward: 0,
-        usReverse: 0,
-        color: "#0d994a"
-      },
-      // ...etc
-    }
+    // allRestrictionEnzymes: {
+    //   aatii: {
+    //     name: "AatII",
+    //     site: "gacgtc",
+    //     forwardRegex: "gacgtc",
+    //     reverseRegex: "gacgtc",
+    //     topSnipOffset: 5,
+    //     bottomSnipOffset: 1,
+    //     usForward: 0,
+    //     usReverse: 0,
+    //     color: "#059369"
+    //   },
+    //   acci: {
+    //     name: "AccI",
+    //     site: "gtmkac",
+    //     forwardRegex: "gt[acm][gkt]ac",
+    //     reverseRegex: "gt[acm][gkt]ac",
+    //     topSnipOffset: 2,
+    //     bottomSnipOffset: 4,
+    //     usForward: 0,
+    //     usReverse: 0,
+    //     color: "#0d994a"
+    //   },
+    //   // ...etc
+    // }
   },
   selectedAnnotations: {
     idMap: {},

nwb.config.js

@@ -27,6 +27,10 @@ module.exports = {
       // "teselagen-react-components":
       //   console.log("comment me back out!") ||
       //   path.resolve("../teselagen-react-components/src/"),
+      // "@teselagen/apollo-methods":
+      //   console.log("comment me back out!") ||
+      //   path.resolve("../teselagen-common/apollo-methods/src/"),
+
       //don't comment this out!
       react: path.resolve(__dirname, "node_modules/react"),
       "react-dom": path.resolve(__dirname, "node_modules/react-dom")