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/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..6c106c28 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 10 bps from 10 to 19"); //the t's should be filtered out 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..087a9cd1 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(); @@ -38,7 +38,7 @@ describe("properties", function () { 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(".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 +53,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/src/CreateAnnotationsPage.js b/packages/ove/src/CreateAnnotationsPage.js index 7e7a9838..9f9d9833 100644 --- a/packages/ove/src/CreateAnnotationsPage.js +++ b/packages/ove/src/CreateAnnotationsPage.js @@ -48,7 +48,7 @@ export default compose( }))} withCheckboxes schema={annotationType === "feature" ? schemaFeatures : schemaOther} - > + /> { + onFragmentSelect(); +}; export const DigestTool = props => { const [selectedTab, setSelectedTab] = useState("virtualDigest"); const { editorName, - // height = 100, dimensions = {}, - lanes, digestTool: { selectedFragment, computePartialDigest }, onDigestSave, - computePartialDigestDisabled, - computeDigestDisabled, updateComputePartialDigest, boxHeight, digestLaneRightClicked, - ladders + ladders, + sequenceData, + sequenceLength, + selectionLayerUpdate: _selectionLayerUpdate, + updateSelectedFragment } = props; + + const isCircular = sequenceData.circular; + const cutsites = sequenceData.cutsites; + const computePartialDigestDisabled = + cutsites.length > MAX_PARTIAL_DIGEST_CUTSITES; + const computeDigestDisabled = cutsites.length > MAX_DIGEST_CUTSITES; + // The selection layer update function is memoized to prevent re-renders + // It changes triggered by the DataTables below + const selectionLayerUpdate = useStableReference(_selectionLayerUpdate); + + // This useMemo might not be necessary once if we figure out + // why the DataTables below triggers a re-render outside of them. + const lanes = useMemo(() => { + const { fragments } = getVirtualDigest({ + cutsites, + sequenceLength, + isCircular, + computePartialDigest, + computePartialDigestDisabled, + computeDigestDisabled + }); + const _lanes = [ + fragments.map(f => ({ + ...f, + onFragmentSelect: () => { + selectionLayerUpdate.current({ + start: f.start, + end: f.end, + name: f.name + }); + updateSelectedFragment(f.Intentid); + } + })) + ]; + return _lanes; + }, [ + computeDigestDisabled, + computePartialDigest, + computePartialDigestDisabled, + cutsites, + isCircular, + selectionLayerUpdate, + sequenceLength, + updateSelectedFragment + ]); + + // Same comment as above + const digestInfoLanes = useMemo( + () => + lanes[0].map(({ id, cut1, cut2, start, end, size, ...rest }) => { + return { + ...rest, + id, + start, + end, + length: size, + leftCutter: cut1.restrictionEnzyme.name, + rightCutter: cut2.restrictionEnzyme.name, + leftOverhang: getCutsiteType(cut1.restrictionEnzyme), + rightOverhang: getCutsiteType(cut2.restrictionEnzyme) + }; + }), + [lanes] + ); + return (
{ maxHeight={400} // noFooter withSearch={false} - onSingleRowSelect={({ onFragmentSelect }) => { - onFragmentSelect(); - }} + onSingleRowSelect={onSingleSelectRow} formName="digestInfoTable" - entities={lanes[0].map( - ({ id, cut1, cut2, start, end, size, ...rest }) => { - return { - ...rest, - id, - start, - end, - length: size, - leftCutter: cut1.restrictionEnzyme.name, - rightCutter: cut2.restrictionEnzyme.name, - leftOverhang: getCutsiteType(cut1.restrictionEnzyme), - rightOverhang: getCutsiteType(cut2.restrictionEnzyme) - }; - } - )} + entities={digestInfoLanes} schema={schema} /> } @@ -178,48 +225,4 @@ const schema = { ] }; -export default compose( - withEditorInteractions, - withProps( - ({ - sequenceData, - sequenceLength, - selectionLayerUpdate, - updateSelectedFragment, - digestTool: { computePartialDigest } - }) => { - const isCircular = sequenceData.circular; - const cutsites = sequenceData.cutsites; - const computePartialDigestDisabled = - cutsites.length > MAX_PARTIAL_DIGEST_CUTSITES; - const computeDigestDisabled = cutsites.length > MAX_DIGEST_CUTSITES; - - const { fragments, overlappingEnzymes } = getVirtualDigest({ - cutsites, - sequenceLength, - isCircular, - computePartialDigest, - computePartialDigestDisabled, - computeDigestDisabled - }); - return { - computePartialDigestDisabled, - computeDigestDisabled, - lanes: [ - fragments.map(f => ({ - ...f, - onFragmentSelect: () => { - selectionLayerUpdate({ - start: f.start, - end: f.end, - name: f.name - }); - updateSelectedFragment(f.Intentid); - } - })) - ], - overlappingEnzymes - }; - } - ) -)(DigestTool); +export default withEditorInteractions(DigestTool); diff --git a/packages/ove/src/helperComponents/PropertiesDialog/CutsiteProperties.js b/packages/ove/src/helperComponents/PropertiesDialog/CutsiteProperties.js index 24350e73..677305aa 100644 --- a/packages/ove/src/helperComponents/PropertiesDialog/CutsiteProperties.js +++ b/packages/ove/src/helperComponents/PropertiesDialog/CutsiteProperties.js @@ -1,16 +1,12 @@ -import React from "react"; -import { - DataTable, - withSelectedEntities, - createCommandMenu -} from "@teselagen/ui"; -import { map, get } from "lodash-es"; +import React, { useCallback, useMemo } from "react"; +import { DataTable, createCommandMenu } from "@teselagen/ui"; +import { get } from "lodash-es"; import CutsiteFilter from "../../CutsiteFilter"; import { Button, ButtonGroup } from "@blueprintjs/core"; import { connectToEditor } from "../../withEditorProps"; import { compose } from "recompose"; import selectors from "../../selectors"; -import commands from "../../commands"; +import _commands from "../../commands"; import { userDefinedHandlersAndOpts } from "../../Editor/userDefinedHandlersAndOpts"; import { pick } from "lodash-es"; import SingleEnzymeCutsiteInfo from "./SingleEnzymeCutsiteInfo"; @@ -18,105 +14,107 @@ import { withRestrictionEnzymes } from "../../CutsiteFilter/withRestrictionEnzym import { cutsitesSubmenu } from "../../MenuBar/viewSubmenu"; import { getVisFilter } from "./GenericAnnotationProperties"; -class CutsiteProperties extends React.Component { - constructor(props) { - super(props); - this.commands = commands(this); - } +const schema = { + fields: [ + { path: "name", type: "string" }, + { path: "numberOfCuts", type: "number" }, + { path: "groups", type: "string" } + ] +}; - SubComponent = row => { - return ( - - ); - }; +const defaultValues = { order: ["numberOfCuts"] }; - schema = { - fields: [ - { path: "name", type: "string" }, - { path: "numberOfCuts", type: "number" }, - { path: "groups", type: "string" } - ] - }; +const CutsiteProperties = props => { + const commands = _commands({ props }); + const { + allRestrictionEnzymes, + allCutsites, + annotationVisibilityShow, + createNewDigest, + dispatch, + editorName, + filteredCutsites, + selectedAnnotationId + } = props; - onChangeHook = () => { - this.props.annotationVisibilityShow("cutsites"); - }; - render() { - const { + const SubComponent = useCallback( + row => ( + + ), + [ + allCutsites, + allRestrictionEnzymes, + dispatch, editorName, - createNewDigest, - filteredCutsites: allCutsites, + filteredCutsites, selectedAnnotationId - } = this.props; + ] + ); - const { cutsitesByName, cutsitesById } = allCutsites; - const cutsitesToUse = map(cutsitesByName, cutsiteGroup => { - const name = cutsiteGroup[0].restrictionEnzyme.name; - let groups = ""; - const exisitingEnzymeGroups = window.getExistingEnzymeGroups(); + const onChangeHook = useCallback(() => { + annotationVisibilityShow("cutsites"); + }, [annotationVisibilityShow]); - Object.keys(exisitingEnzymeGroups).forEach(key => { - if (exisitingEnzymeGroups[key].includes(name)) groups += key; - groups += " "; - }); + const { cutsitesByName, cutsitesById } = filteredCutsites; - return { - cutsiteGroup, - id: name, - name, - numberOfCuts: cutsiteGroup.length, - enzyme: cutsiteGroup[0].restrictionEnzyme, - groups - // size: getRangeLength(cutsiteGroup, sequenceData.sequence.length) - }; - }); - return ( - <> -
- {/* + const cutsitesToUse = useMemo( + () => + Object.values(cutsitesByName || {}).map(cutsiteGroup => { + const name = cutsiteGroup[0].restrictionEnzyme.name; + let groups = ""; + const exisitingEnzymeGroups = window.getExistingEnzymeGroups(); + + Object.keys(exisitingEnzymeGroups).forEach(key => { + if (exisitingEnzymeGroups[key].includes(name)) groups += key; + groups += " "; + }); + + return { + cutsiteGroup, + id: name, + name, + numberOfCuts: cutsiteGroup.length, + enzyme: cutsiteGroup[0].restrictionEnzyme, + groups + }; + }), + [cutsitesByName] + ); + + const selectedIds = useMemo( + () => get(cutsitesById[selectedAnnotationId], "restrictionEnzyme.name"), + [cutsitesById, selectedAnnotationId] + ); + + return ( + <> +
+ {getVisFilter( + createCommandMenu(cutsitesSubmenu, commands, { + useTicks: true + }) + )} + - {/* */} - - - -
- + - - ); - } -} +
+ + + ); +}; export default compose( connectToEditor((editorState, ownProps) => { @@ -180,6 +172,5 @@ export default compose( cutsites: cutsites.cutsitesArray }; }), - withRestrictionEnzymes, - withSelectedEntities("cutsiteProperties") + withRestrictionEnzymes )(CutsiteProperties); diff --git a/packages/ove/src/helperComponents/PropertiesDialog/SingleEnzymeCutsiteInfo.js b/packages/ove/src/helperComponents/PropertiesDialog/SingleEnzymeCutsiteInfo.js index fa7a793e..0168b607 100644 --- a/packages/ove/src/helperComponents/PropertiesDialog/SingleEnzymeCutsiteInfo.js +++ b/packages/ove/src/helperComponents/PropertiesDialog/SingleEnzymeCutsiteInfo.js @@ -1,11 +1,17 @@ -import React from "react"; +import React, { useCallback, useMemo } from "react"; import { DataTable } from "@teselagen/ui"; - import { CutsiteTag } from "../../CutsiteFilter/AdditionalCutsiteInfoDialog"; - import EnzymeViewer from "../../EnzymeViewer"; import { getEnzymeAliases } from "../../utils/editorUtils"; +const schema = { + fields: [ + { path: "topSnipPosition", displayName: "Top Snip", type: "string" }, + { path: "position", type: "string" }, + { path: "strand", type: "string" } + ] +}; + export default function SingleEnzymeCutsiteInfo({ cutsiteGroup, enzyme, @@ -16,40 +22,52 @@ export default function SingleEnzymeCutsiteInfo({ allCutsites, filteredCutsites: { cutsitesByName: cutsitesByNameActive } }) { - const onRowSelect = ([record]) => { - if (!record) return; + const onRowSelect = useCallback( + ([record]) => { + if (!record) return; - dispatch({ - type: "CARET_POSITION_UPDATE", - payload: record.topSnipPosition, - meta: { - editorName - } - }); - }; - const aliases = getEnzymeAliases(enzyme); - const entities = cutsiteGroup - .sort((a, b) => a.topSnipPosition - b.topSnipPosition) - .map( - ({ - restrictionEnzyme: { forwardRegex, reverseRegex } = {}, - forward, - id, - topSnipBeforeBottom, - topSnipPosition, - bottomSnipPosition - }) => { - return { - id, - topSnipPosition, - position: topSnipBeforeBottom - ? topSnipPosition + " - " + bottomSnipPosition - : bottomSnipPosition + " - " + topSnipPosition, - strand: - forwardRegex === reverseRegex ? "Palindromic" : forward ? "1" : "-1" - }; - } - ); + dispatch({ + type: "CARET_POSITION_UPDATE", + payload: record.topSnipPosition, + meta: { + editorName + } + }); + }, + [dispatch, editorName] + ); + + const aliases = useMemo(() => getEnzymeAliases(enzyme), [enzyme]); + const entities = useMemo( + () => + cutsiteGroup + .sort((a, b) => a.topSnipPosition - b.topSnipPosition) + .map( + ({ + restrictionEnzyme: { forwardRegex, reverseRegex } = {}, + forward, + id, + topSnipBeforeBottom, + topSnipPosition, + bottomSnipPosition + }) => { + return { + id, + topSnipPosition, + position: topSnipBeforeBottom + ? topSnipPosition + " - " + bottomSnipPosition + : bottomSnipPosition + " - " + topSnipPosition, + strand: + forwardRegex === reverseRegex + ? "Palindromic" + : forward + ? "1" + : "-1" + }; + } + ), + [cutsiteGroup] + ); return (
@@ -61,14 +79,12 @@ export default function SingleEnzymeCutsiteInfo({ > {enzyme && ( )} -

+
{entities && !!entities.length && (
+ /> ); })}
@@ -117,14 +133,6 @@ export default function SingleEnzymeCutsiteInfo({ ); } -const schema = { - fields: [ - { path: "topSnipPosition", displayName: "Top Snip", type: "string" }, - { path: "position", type: "string" }, - { path: "strand", type: "string" } - ] -}; - // export default compose( // withEditorProps, // withRestrictionEnzymes diff --git a/packages/ove/src/helperComponents/PropertiesDialog/index.js b/packages/ove/src/helperComponents/PropertiesDialog/index.js index 07c0b3a7..0f402b79 100644 --- a/packages/ove/src/helperComponents/PropertiesDialog/index.js +++ b/packages/ove/src/helperComponents/PropertiesDialog/index.js @@ -18,11 +18,11 @@ import { pick } from "lodash-es"; const PropertiesContainer = Comp => props => { const { additionalFooterEls, additionalHeaderEls, ...rest } = props; return ( - + <> {additionalHeaderEls} {additionalFooterEls} - + ); }; const allTabs = { @@ -35,129 +35,130 @@ const allTabs = { orfs: PropertiesContainer(OrfProperties), genbank: PropertiesContainer(GenbankView) }; -export class PropertiesDialog extends React.Component { - render() { - const { - propertiesTool = {}, - propertiesViewTabUpdate, - dimensions = {}, - height, - editorName, - onSave, - showReadOnly, - showAvailability, - isProtein, - annotationsToSupport = {}, - disableSetReadOnly, - propertiesList = [ - "general", - "features", - "parts", - "primers", - "translations", - "cutsites", - "orfs", - "genbank" - ], - closePanelButton - } = { ...this.props, ...this.props.PropertiesProps }; - const { width, height: heightFromDim } = dimensions; +export const PropertiesDialog = props => { + const { + propertiesTool = {}, + propertiesViewTabUpdate, + dimensions = {}, + height, + editorName, + onSave, + showReadOnly, + showAvailability, + isProtein, + annotationsToSupport = {}, + disableSetReadOnly, + propertiesList = [ + "general", + "features", + "parts", + "primers", + "translations", + "cutsites", + "orfs", + "genbank" + ], + closePanelButton + } = { ...props, ...props.PropertiesProps }; - let { tabId, selectedAnnotationId } = propertiesTool; - if ( - propertiesList - .map(nameOrOverride => nameOrOverride.name || nameOrOverride) - .indexOf(tabId) === -1 - ) { - tabId = propertiesList[0].name || propertiesList[0]; + const { width, height: heightFromDim } = dimensions; + + let { tabId, selectedAnnotationId } = propertiesTool; + if ( + propertiesList + .map(nameOrOverride => nameOrOverride.name || nameOrOverride) + .indexOf(tabId) === -1 + ) { + tabId = propertiesList[0].name || propertiesList[0]; + } + + const propertiesTabs = flatMap(propertiesList, nameOrOverride => { + if (annotationsToSupport[nameOrOverride] === false) { + return []; } - const propertiesTabs = flatMap(propertiesList, nameOrOverride => { - if (annotationsToSupport[nameOrOverride] === false) { - return []; - } - const name = nameOrOverride.name || nameOrOverride; - const Comp = nameOrOverride.Comp || allTabs[name]; - if (isProtein) { - if ( - name === "translations" || - name === "orfs" || - name === "primers" || - name === "cutsites" - ) { - return null; - } + const name = nameOrOverride.name || nameOrOverride; + const Comp = nameOrOverride.Comp || allTabs[name]; + if (isProtein) { + if ( + name === "translations" || + name === "orfs" || + name === "primers" || + name === "cutsites" + ) { + return null; } - const title = (() => { - if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel - if (name === "orfs") return "ORFs"; - if (name === "cutsites") return "Cut Sites"; - return startCase(name); - })(); - return ( - - } - /> - ); - }); - const heightToUse = Math.max(0, Number((heightFromDim || height) - 30)); + } + const title = (() => { + if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel + if (name === "orfs") return "ORFs"; + if (name === "cutsites") return "Cut Sites"; + return startCase(name); + })(); + return ( + + } + /> + ); + }); + const heightToUse = Math.max(0, Number((heightFromDim || height) - 30)); + return ( +
+ {closePanelButton}
- {closePanelButton} -
- {propertiesTabs.length ? ( - - - {propertiesTabs} - - - ) : ( -
- No Properties to display -
- )} -
+ {propertiesTabs.length ? ( + + + {propertiesTabs} + + + ) : ( +
+ No Properties to display +
+ )}
- ); - } -} +
+ ); +}; export default compose( connectToEditor(({ propertiesTool, annotationsToSupport }) => { diff --git a/packages/ove/src/helperComponents/RemoveDuplicates/index.js b/packages/ove/src/helperComponents/RemoveDuplicates/index.js index 9ddbdef7..8b74a674 100644 --- a/packages/ove/src/helperComponents/RemoveDuplicates/index.js +++ b/packages/ove/src/helperComponents/RemoveDuplicates/index.js @@ -1,194 +1,178 @@ -import React from "react"; +import React, { useCallback, useMemo, useState } from "react"; import { reduxForm } from "redux-form"; - import { wrapDialog, DataTable, - withSelectedEntities, SwitchField, - tgFormValues + useTableEntities } from "@teselagen/ui"; import { compose } from "redux"; import { Button, Classes, Popover } from "@blueprintjs/core"; import classNames from "classnames"; - import withEditorProps from "../../withEditorProps"; import { forEach, camelCase, startCase } from "lodash-es"; import { sizeSchema } from "../PropertiesDialog/utils"; import { getRangeLength } from "@teselagen/range-utils"; +import { useFormValue } from "../../utils/useFormValue"; + +const dialogFormName = "RemoveDuplicatesDialog"; +const dataTableFormName = "duplicatesToRemove"; +const checkboxStyle = { marginTop: 0, marginBottom: 0 }; + +const RemoveDuplicatesDialog = props => { + const { + type, + sequenceData = { sequence: "" }, + sequenceLength, + isProtein, + hideModal + } = props; -class RemoveDuplicatesDialog extends React.Component { - state = { - dups: [] - }; - componentDidMount() { - this.recomputeDups(); - } + const { selectedEntities } = useTableEntities(dataTableFormName); - checkboxStyle = { marginTop: 0, marginBottom: 0 }; + const ignoreName = useFormValue(dialogFormName, "ignoreName"); + const ignoreStartAndEnd = useFormValue(dialogFormName, "ignoreStartAndEnd"); + const ignoreStrand = useFormValue(dialogFormName, "ignoreStrand"); - delayedRecomputeDups = () => { - setTimeout(() => { - this.recomputeDups(); - }); - }; - recomputeDups = () => { - const { - // hideModal, - type, - sequenceData = { sequence: "" }, - // handleSubmit, - sequenceLength, - ignoreName, - ignoreStrand, - ignoreStartAndEnd - // circular, - // upsertFeature - } = this.props; + const recomputeDups = useCallback( + values => { + const ignoreName = values?.ignoreName; + const ignoreStartAndEnd = values?.ignoreStartAndEnd; + const ignoreStrand = values?.ignoreStrand; + const annotations = sequenceData[type]; + const newDups = []; + const seqsHashByStartEndStrandName = {}; + forEach(annotations, a => { + const hash = `${ignoreStartAndEnd ? "" : a.start}&${ + ignoreStartAndEnd ? "" : a.end + }&${ignoreStrand ? "" : a.strand}&${ignoreName ? "" : a.name}`; + if (seqsHashByStartEndStrandName[hash]) { + newDups.push({ ...a, size: getRangeLength(a, sequenceLength) }); + } else { + seqsHashByStartEndStrandName[hash] = true; + } + }); + return newDups; + }, + [sequenceData, sequenceLength, type] + ); - const annotations = sequenceData[type]; - const dups = []; - const seqsHashByStartEndStrandName = {}; - forEach(annotations, a => { - const hash = `${ignoreStartAndEnd ? "" : a.start}&${ - ignoreStartAndEnd ? "" : a.end - }&${ignoreStrand ? "" : a.strand}&${ignoreName ? "" : a.name}`; - if (seqsHashByStartEndStrandName[hash]) { - dups.push({ ...a, size: getRangeLength(a, sequenceLength) }); - } else { - seqsHashByStartEndStrandName[hash] = true; - } - }); - this.setState({ dups }); - }; - render() { - const { duplicatesToRemoveSelectedEntities, hideModal, type } = this.props; + const [dups, setDups] = useState(recomputeDups); + const selectedIds = useMemo(() => dups.map(d => d.id), [dups]); - const selectedIds = this.state.dups.map(d => d.id); + const fieldSubmit = useCallback( + (newVal, field) => { + const values = { + ignoreName, + ignoreStartAndEnd, + ignoreStrand, + [field]: newVal + }; + const newDups = recomputeDups(values); + setDups(newDups); + }, + [ignoreName, ignoreStartAndEnd, ignoreStrand, recomputeDups] + ); - const schema = { + const schema = useMemo( + () => ({ fields: [ - // ...(noColor - // ? [] - // : [ - // { - // path: "color", - // type: "string", - // render: color => { - // return ( - // - //
- // - // ); - // } - // } - // ]), { path: "name", type: "string" }, // ...(noType ? [] : [{ path: "type", type: "string" }]), - sizeSchema(this.props.isProtein), + sizeSchema(isProtein), { path: "strand", type: "string" } ] - }; - // const sequenceLength = sequenceData.sequence.length; - // const isCirc = (this.state || {}).circular; - return ( -
- {/* {dups.map((d) => { - return
+ }), + [isProtein] + ); -
- })} */} - + +
+ } + content={ +
+
Ignore These Fields While Finding Duplicates:
+
+ fieldSubmit(newVal, "ignoreName")} + style={checkboxStyle} + name="ignoreName" + label="Name" + /> + fieldSubmit(newVal, "ignoreStrand")} + style={checkboxStyle} + name="ignoreStrand" + label="Strand" + /> + + fieldSubmit(newVal, "ignoreStartAndEnd") + } + style={checkboxStyle} + name="ignoreStartAndEnd" + label="Start and End" + /> +
+ } /> -
{ + props[camelCase(`delete_${type}`).slice(0, -1)]( + Object.keys(selectedEntities || {}) + ); + window.toastr.success( + `Successfully Deleted ${ + Object.keys(selectedEntities || {}).length + } ${startCase(type)}` + ); + hideModal(); }} + disabled={!Object.keys(selectedEntities || {}).length} > - } - content={ -
-
Ignore These Fields While Finding Duplicates:
-

- - - -
- } - > - - -
+ Remove {Object.keys(selectedEntities || {}).length} Duplicates +
- ); - } -} +
+ ); +}; export default compose( wrapDialog(), withEditorProps, - - withSelectedEntities("duplicatesToRemove"), - - reduxForm({ - form: "RemoveDuplicatesDialog" - }), - tgFormValues("ignoreName", "ignoreStrand", "ignoreStartAndEnd") + reduxForm({ form: dialogFormName }) )(RemoveDuplicatesDialog); diff --git a/packages/ove/src/utils/useFormValue.js b/packages/ove/src/utils/useFormValue.js new file mode 100644 index 00000000..ec654230 --- /dev/null +++ b/packages/ove/src/utils/useFormValue.js @@ -0,0 +1,7 @@ +/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */ +import { useSelector } from "react-redux"; +import { get } from "lodash"; + +export const useFormValue = (formName, field) => { + return useSelector(state => get(state.form?.[formName]?.values, field)); +}; diff --git a/packages/ui/demo/src/examples/DataTable.js b/packages/ui/demo/src/examples/DataTable.js index b3500c8f..be77b6e0 100644 --- a/packages/ui/demo/src/examples/DataTable.js +++ b/packages/ui/demo/src/examples/DataTable.js @@ -586,7 +586,7 @@ const DataTableDemo = () => { onRefresh={onRefresh} onSingleRowSelect={noop} selectAllByDefault={selectAllByDefault} - initialSelectedIds={selectedIds} + selectedIds={selectedIds} shouldShowSubComponent={r => r.id !== 1} showCount={showCount} SubComponent={withSubComponent ? SubComp : undefined} diff --git a/packages/ui/src/DataTable/index.js b/packages/ui/src/DataTable/index.js index f76d5d2a..6036e465 100644 --- a/packages/ui/src/DataTable/index.js +++ b/packages/ui/src/DataTable/index.js @@ -102,6 +102,7 @@ import { useColumns } from "./Columns"; import { formValueSelector, change as _change } from "redux-form"; import { throwFormError } from "../throwFormError"; import { isObservableArray, toJS } from "mobx"; +import { isBeingCalledExcessively } from "../utils/isBeingCalledExcessively"; enablePatches(); const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1; @@ -425,7 +426,7 @@ const DataTable = ({ hideSelectedCount = isSimple, hideSetPageSize, hideTotalPages, - initialSelectedIds, + selectedIds, isCellEditable, isCopyable = true, isEntityDisabled = noop, @@ -501,16 +502,14 @@ const DataTable = ({ // This is because we need to maintain the reduxFormSelectedEntityIdMap and // allOrderedEntities updated useEffect(() => { - if (change) { - change("allOrderedEntities", entitiesAcrossPages); - if (entities.length === 0 || isEmpty(reduxFormSelectedEntityIdMap)) - return; - changeSelectedEntities({ - idMap: reduxFormSelectedEntityIdMap, - entities, - change - }); - } + isBeingCalledExcessively({ uniqName: `dt_entities_${formName}` }); + change("allOrderedEntities", entitiesAcrossPages); + if (entities.length === 0 || isEmpty(reduxFormSelectedEntityIdMap)) return; + changeSelectedEntities({ + idMap: reduxFormSelectedEntityIdMap, + entities, + change + }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [entitiesAcrossPages, reduxFormSelectedEntityIdMap, change]); @@ -524,6 +523,7 @@ const DataTable = ({ } else { newTableConfig = getTableConfigFromStorage(formName); } + isBeingCalledExcessively({ uniqName: `dt_setTableConfig_${formName}` }); // if the tableConfig is the same as the newTableConfig, don't update setTableConfig(prev => { if (!newTableConfig) { @@ -1752,17 +1752,15 @@ const DataTable = ({ // We need to make sure this only runs at the beggining useEffect(() => { - if (initialSelectedIds) { - if (alreadySelected.current) return; - setSelectedIds(initialSelectedIds); - alreadySelected.current = true; + if (selectedIds) { + setSelectedIds(selectedIds); } if (selectAllByDefault && entities && entities.length) { if (alreadySelected.current) return; setSelectedIds(entities.map(getIdOrCodeOrIndex)); alreadySelected.current = true; } - }, [entities, initialSelectedIds, selectAllByDefault, setSelectedIds]); + }, [entities, selectedIds, selectAllByDefault, setSelectedIds]); const TheadComponent = useCallback( ({ className, style, children }) => { diff --git a/packages/ui/src/utils/isBeingCalledExcessively.js b/packages/ui/src/utils/isBeingCalledExcessively.js new file mode 100644 index 00000000..beded458 --- /dev/null +++ b/packages/ui/src/utils/isBeingCalledExcessively.js @@ -0,0 +1,24 @@ +const keyCount = {}; +export const isBeingCalledExcessively = ({ uniqName }) => { + if (process.env.NODE_ENV !== "development") { + return; + } + if (!uniqName) { + throw new Error("uniqName is required"); + } + // if this function is hit more than 10 times in a row in 2 seconds with the same uniqName then throw an error + if (keyCount[uniqName + "_timeout"]) { + clearTimeout(keyCount[uniqName + "_timeout"]); + } + keyCount[uniqName] = keyCount[uniqName] || 0; + keyCount[uniqName]++; + + keyCount[uniqName + "_timeout"] = setTimeout(() => { + keyCount[uniqName] = 0; + }, 2000); + + if (keyCount[uniqName] > 20) { + keyCount[uniqName] = 0; + throw new Error(`isBeingCalledExcessively: ${uniqName}`); + } +};