diff --git a/CHANGELOG.md b/CHANGELOG.md index 86a2844d..3c05dd16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### 0.2.0 +- fix: removeClipboardPackage [`#118`](https://github.com/TeselaGen/tg-oss/pull/118) +- refactor: AlignmentDemo [`#116`](https://github.com/TeselaGen/tg-oss/pull/116) +- fix open dialog issue for multiple Editor [`#110`](https://github.com/TeselaGen/tg-oss/pull/110) +- fix: ove test [`#114`](https://github.com/TeselaGen/tg-oss/pull/114) - Additional fillter remove props [`#115`](https://github.com/TeselaGen/tg-oss/pull/115) - chore: bump ui version [`#112`](https://github.com/TeselaGen/tg-oss/pull/112) - feat: Add form separator component [`#111`](https://github.com/TeselaGen/tg-oss/pull/111) diff --git a/package.json b/package.json index 8e71a9ea..9af58821 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "type": "module", "private": true, "dependencies": { - "@blueprintjs/core": "3.52.0", - "@blueprintjs/datetime": "3.23.19", + "@blueprintjs/core": "3.54.0", + "@blueprintjs/datetime": "^3.24.1", "@blueprintjs/select": "3.18.11", "@dnd-kit/core": "^6.1.0", "@dnd-kit/modifiers": "^7.0.0", @@ -25,7 +25,6 @@ "axios": "^0.21.1", "browser-or-node": "^2.0.0", "classnames": "^2.3.2", - "clipboard": "2.0.8", "color": "^3.2.1", "combokeys": "^3.0.1", "copy-to-clipboard": "^3.3.1", @@ -58,7 +57,7 @@ "react-dom": "^18.3.1", "react-draggable": "4.4.5", "react-dropzone": "^11.4.2", - "react-markdown": "8.0.7", + "react-markdown": "9.0.1", "react-measure": "^2.5.2", "react-redux": "^8.0.5", "react-rnd": "^10.2.4", @@ -71,7 +70,7 @@ "redux-form": "^8.3.10", "redux-ignore": "^1.2.5", "redux-thunk": "2.4.1", - "remark-gfm": "^3.0.1", + "remark-gfm": "^4.0.0", "reselect": "^4.1.7", "shortid": "^2.2.16", "tg-use-local-storage-state": "^16.0.3", diff --git a/packages/ove/cypress/e2e/cutsiteInfoView.spec.js b/packages/ove/cypress/e2e/cutsiteInfoView.spec.js index c0064f92..0bed5503 100644 --- a/packages/ove/cypress/e2e/cutsiteInfoView.spec.js +++ b/packages/ove/cypress/e2e/cutsiteInfoView.spec.js @@ -17,7 +17,7 @@ describe("cutsiteInfoView", function () { cy.get(`[data-test="cutsiteToolDropdown"]`).click(); cy.get(`.veToolbarCutsiteFilterHolder input`).type("{selectAll}esp3i"); cy.contains(`These Hidden enzymes match`); - cy.contains("Esp3I (2 cuts)").click(); + cy.contains("Esp3I (2 cuts)").click({ force: true }); cy.get(`.veToolbarCutsiteFilterHolder input`).should("not.exist"); //clicking the hidden enzyme should close the filter cy.contains("Esp3I (2 cuts) hidden"); cy.get( diff --git a/packages/ove/cypress/e2e/editing.spec.js b/packages/ove/cypress/e2e/editing.spec.js index a5e8a9c0..007d270d 100644 --- a/packages/ove/cypress/e2e/editing.spec.js +++ b/packages/ove/cypress/e2e/editing.spec.js @@ -58,7 +58,7 @@ describe("editing", function () { cy.contains("Caret Between Bases 5293 and 1"); cy.contains(".ve-row-item-sequence", "5'gtcttatga"); }); - it(`should be able to insert data around the origin correctly + it(`should be able to insert data around the origin correctly - new sequence should be inserted after the origin`, () => { cy.selectRange(5297, 3); cy.replaceSelection("aaaaaa"); @@ -68,7 +68,7 @@ describe("editing", function () { cy.replaceSelection("tt"); cy.contains("Selecting 2 bps from 3 to 4"); }); - it(`should be able to revComp, comp selections that wrap the origin correctly + it(`should be able to revComp, comp selections that wrap the origin correctly - new sequence should be inserted after the origin`, () => { cy.selectRange(5297, 3); cy.contains("Jump to start").click(); diff --git a/packages/ove/cypress/e2e/editor.spec.js b/packages/ove/cypress/e2e/editor.spec.js index 2de4bd4a..55f35ee0 100644 --- a/packages/ove/cypress/e2e/editor.spec.js +++ b/packages/ove/cypress/e2e/editor.spec.js @@ -154,7 +154,7 @@ describe("editor", function () { cy.tgToggle("shouldAutosave"); cy.contains(".veRowViewPart", "Part 0").first().click(); cy.get(".veRowViewSelectionLayer").first().trigger("contextmenu"); - cy.get(".bp3-menu-item").contains("Cut").click(); + cy.get(".bp3-menu-item").contains("Cut").realClick(); cy.contains("onCopy callback triggered"); cy.contains("onSave callback triggered"); cy.contains("Selection Cut"); @@ -167,7 +167,7 @@ describe("editor", function () { cy.get(".veRowViewSelectionLayer").first().trigger("contextmenu"); //tnrnote: cut in cypress only works on electron, not firefox or chrome - cy.get(".bp3-menu-item").contains("Cut").click(); + cy.get(".bp3-menu-item").contains("Cut").realClick(); cy.contains("Selection Cut"); cy.get(".tg-menu-bar").contains("File").click(); cy.get(".bp3-menu-item").contains("Save As").click(); diff --git a/packages/ove/cypress/e2e/globalDialog.spec.js b/packages/ove/cypress/e2e/globalDialog.spec.js new file mode 100644 index 00000000..3e6073a8 --- /dev/null +++ b/packages/ove/cypress/e2e/globalDialog.spec.js @@ -0,0 +1,68 @@ +describe("Global Dialogs", () => { + it(`feature/primer dialog should be able to open/close for multiple Editor`, () => { + cy.visit(""); + + const fistNodeSelector = ".standaloneDemoNode .veEditor.StandaloneEditor"; + const secondNodeSelector = ".standaloneDemoNode2 .veEditor.vector-editor2"; + + cy.contains(".bp3-button-text", "Show Sidebar").click(); + cy.contains(".demo-nav-link", "Standalone").should("exist"); + cy.contains(".demo-nav-link", "Standalone").click(); + + cy.contains(".bp3-button-text", "Open a second editor").click(); + cy.get(fistNodeSelector).should("exist"); + cy.get(secondNodeSelector).should("exist"); + + cy.contains( + `${fistNodeSelector} .ve-draggable-tabs .veTabProperties`, + "Properties" + ).click(); + cy.get( + `${fistNodeSelector} .ve-propertiesPanel .bp3-tabs .bp3-tab#bp3-tab-title_undefined_features` + ).click(); + cy.contains( + `${fistNodeSelector} .bp3-tab-panel .tg-cell-wrapper`, + "araC" + ).should("exist"); + + cy.contains( + `${secondNodeSelector} .ve-draggable-tabs .veTabProperties`, + "Properties" + ).click(); + cy.get( + `${secondNodeSelector} .ve-propertiesPanel .bp3-tabs .bp3-tab#bp3-tab-title_undefined_features` + ).click(); + cy.contains( + `${secondNodeSelector} .bp3-tab-panel .tg-cell-wrapper`, + "Untitled annotation" + ).should("exist"); + + cy.get( + `${fistNodeSelector} .veCircularView .circularViewSvg .veCircularViewTextWrapper` + ).click(); + cy.contains( + `${fistNodeSelector} .bp3-tab-panel .tg-cell-wrapper`, + "araC" + ).dblclick(); + cy.contains( + ".bp3-dialog .bp3-dialog-header .bp3-heading", + "Edit Feature" + ).should("exist"); + cy.get('.bp3-dialog input[value="araC"]').should("exist"); + cy.get(".bp3-dialog .bp3-dialog-close-button").click(); + + cy.get( + `${secondNodeSelector} .veCircularView .circularViewSvg .veCircularViewTextWrapper` + ).click(); + cy.contains( + `${secondNodeSelector} .bp3-tab-panel .tg-cell-wrapper`, + "Untitled annotation" + ).dblclick(); + cy.contains( + ".bp3-dialog .bp3-dialog-header .bp3-heading", + "Edit Feature" + ).should("exist"); + cy.get('.bp3-dialog input[value="Untitled annotation"]').should("exist"); + cy.get(".bp3-dialog .bp3-dialog-close-button").click(); + }); +}); diff --git a/packages/ove/cypress/e2e/menuBar.spec.js b/packages/ove/cypress/e2e/menuBar.spec.js index 932fe613..000c6590 100644 --- a/packages/ove/cypress/e2e/menuBar.spec.js +++ b/packages/ove/cypress/e2e/menuBar.spec.js @@ -186,7 +186,6 @@ describe("menuBar", function () { // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(0); cy.focused().type("remove duplicate feature{enter}", { delay: 1 }); - cy.contains(".rt-td", "dbl term").should("exist"); cy.contains(".bp3-dialog button", "Remove 2 Duplicates"); cy.get(".bp3-dialog .bp3-icon-settings").click(); cy.get(".tg-test-ignore-name .tg-no-fill-field").click(); @@ -204,7 +203,7 @@ describe("menuBar", function () { cy.get(".tg-menu-bar-popover").contains("Select All").click(); cy.get(".tg-menu-bar").contains("Edit").click(); - cy.get(".tg-menu-bar-popover").contains("Cut").click(); + cy.get(".tg-menu-bar-popover").contains("Cut").realClick(); cy.get(".tg-menu-bar").contains("Edit").click({ force: true }); [ @@ -273,7 +272,7 @@ describe("menuBar", function () { cy.selectRange(2, 5); cy.get(".tg-menu-bar").contains("Edit").trigger("mouseover"); - cy.get(".tg-menu-bar-popover").contains("Cut").click(); + cy.get(".tg-menu-bar-popover").contains("Cut").realClick(); cy.get(".tg-menu-bar").contains("File").click(); cy.get(`[cmd="saveSequence"]`).should("not.have.class", "bp3-disabled"); @@ -290,7 +289,7 @@ describe("menuBar", function () { }); it(` goTo, rotateTo work -can't go to a position outside of the sequence - -can go to a position inside the sequence + -can go to a position inside the sequence -can rotate the sequence to that position `, () => { cy.get(".tg-menu-bar").contains("Edit").click(); @@ -329,7 +328,7 @@ describe("menuBar", function () { it(` select range, copy, cut works -cannot select range outside of sequence //TODO - -can select a valid range + -can select a valid range -can copy the select bps -can cut the selected bps `, function () { @@ -348,10 +347,10 @@ describe("menuBar", function () { cy.get(".veStatusBar").contains(`5299`); cy.get(".tg-menu-bar").contains("Edit").click(); - cy.get(".tg-menu-bar-popover").contains("Copy").click(); + cy.get(".tg-menu-bar-popover").contains("Copy").realClick(); cy.contains("Selection Copied"); cy.get(".tg-menu-bar").contains("Edit").click(); - cy.get(".tg-menu-bar-popover").contains("Cut").click(); + cy.get(".tg-menu-bar-popover").contains("Cut").realClick(); cy.contains("Selection Cut"); cy.get(".veStatusBar").contains(`5288`); }); diff --git a/packages/ove/cypress/e2e/oligoMode.spec.js b/packages/ove/cypress/e2e/oligoMode.spec.js index a8429f4d..09098b05 100644 --- a/packages/ove/cypress/e2e/oligoMode.spec.js +++ b/packages/ove/cypress/e2e/oligoMode.spec.js @@ -15,7 +15,7 @@ describe("oligo mode editing in OVE", function () { // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(0); cy.focused().type("gatccaauu{enter}"); - cy.contains("Selecting 9 bps from 10 to 18"); //the t's should be filtered out + cy.contains("Selecting 9 bps from 10 to 18"); cy.contains("gatccaauu"); cy.get(".veTabProperties").click(); cy.contains("Circular/Linear:").should("not.exist"); diff --git a/packages/ove/cypress/e2e/properties.spec.js b/packages/ove/cypress/e2e/properties.spec.js index 7bb4db53..a034ff18 100644 --- a/packages/ove/cypress/e2e/properties.spec.js +++ b/packages/ove/cypress/e2e/properties.spec.js @@ -21,7 +21,7 @@ describe("properties", function () { cy.contains("textarea", `primer_bind complement(10..20)`); cy.contains("textarea", `/label="fakeprimer"`); }); - it(`should be able to delete a feature from the properties tab and not have the delete button still enabled; + it(`should be able to delete a feature from the properties tab and not have the delete button still enabled; - have the number of features correctly displayed -not be able to create a new feature if sequenceLength === 0`, () => { cy.get(".veTabProperties").click(); @@ -33,12 +33,13 @@ describe("properties", function () { cy.get(`.tgDeleteAnnsBtn`).should("not.have.class", "bp3-disabled").click(); cy.get(`.tgDeleteAnnsBtn`).should("have.class", "bp3-disabled"); - cy.get(".tgNewAnnBtn").should("not.have.class", "bp3-disabled"); cy.get(".tg-menu-bar").contains("Edit").click(); cy.get(".tg-menu-bar-popover").contains("Select All").click(); - cy.get(".veSelectionLayer").first().trigger("contextmenu", { force: true }); - cy.get(".bp3-menu-item").contains("Cut").click(); + cy.get( + ".veSelectionLayer:contains(Selecting 5299 bps from 1 to 5299)" + ).trigger("contextmenu", { force: true }); + cy.get(".bp3-menu-item").contains("Cut").realClick(); cy.get(".tgNewAnnBtn").should("have.class", "bp3-disabled"); }); it(`a custom properties tab should be able to be added`, () => { @@ -53,7 +54,7 @@ describe("properties", function () { cy.get(".circularLinearSelect select").select("Linear"); cy.contains(".bp3-dialog", "Truncate Annotations").should("be.visible"); }); - it(`we should be able to view and edit a description in general properties + it(`we should be able to view and edit a description in general properties and have that visible within the genbank view as well we should be able to edit a description in general properties, not make any changes, hit ok, and have the description not clear (bug! https://github.com/TeselaGen/lims/issues/5492) // and have that visible within the genbank view as well`, () => { cy.get(".veTabProperties").click(); diff --git a/packages/ove/demo/src/AlignmentDemo.js b/packages/ove/demo/src/AlignmentDemo.js index 8fbdd7c1..1d690f6f 100644 --- a/packages/ove/demo/src/AlignmentDemo.js +++ b/packages/ove/demo/src/AlignmentDemo.js @@ -1,15 +1,19 @@ -import { setupOptions, setParamsIfNecessary } from "./utils/setupOptions"; -import React from "react"; +import React, { useEffect, useMemo, useState } from "react"; import store from "./store"; import msaAlignment from "./exampleData/msaAlignment.json"; import pairwiseAlignment from "./exampleData/pairwiseAlignment.json"; import sangerAlignment from "./exampleData/sangerAlignment.json"; import msaAlignmentWithGaps from "./exampleData/msaAlignment_withGaps.json"; import { addAlignment, AlignmentView /* updateEditor */ } from "../../src/"; -import renderToggle from "./utils/renderToggle"; -import { BPSelect } from "@teselagen/ui"; +import { useToggle } from "./utils/useToggle"; +import { + BPSelect, + getCurrentParamsFromUrl, + setCurrentParamsOnUrl +} from "@teselagen/ui"; import pairwiseAlignment2 from "./exampleData/pairwiseAlignment2.json"; import { Button } from "@blueprintjs/core"; +import { difference } from "lodash-es"; // Use the line below because using the full 30 sequences murders Redux dev tools. msaAlignment.alignmentTracks = msaAlignment.alignmentTracks.slice(0, 20); @@ -26,253 +30,323 @@ const defaultState = { noVisibilityOptions: false, setTickSpacing: false }; +const bpSelectOptions = [ + { + label: "Multiple Sequence Alignment", + value: msaAlignment.id + }, + { label: "Pairwise Alignment", value: pairwiseAlignment.id }, + { + label: "Pairwise Alignment 2", + value: pairwiseAlignment2.id + }, + { label: "Sanger Alignment", value: sangerAlignment.id }, + { label: "MSA with gaps", value: msaAlignmentWithGaps.id } +]; -// const basicActions = { selectionLayerUpdate, caretPositionUpdate }; - -export default class AlignmentDemo extends React.Component { - constructor(props) { - super(props); - setupOptions({ that: this, defaultState, props }); - } - - componentDidUpdate() { - setParamsIfNecessary({ that: this, defaultState }); - } +const alignmentViewStyle = { + marginRight: 10 +}; - componentDidMount() { +export default props => { + useEffect(() => { addAlignment(store, msaAlignment); addAlignment(store, pairwiseAlignment); addAlignment(store, pairwiseAlignment2); addAlignment(store, sangerAlignment); addAlignment(store, msaAlignmentWithGaps); - } - render() { - return ( -