From 8d6d11c6d2289243a8ba7317dead4f53d3c893ee Mon Sep 17 00:00:00 2001 From: Katie Stahl Date: Thu, 12 Sep 2024 14:28:09 -0400 Subject: [PATCH] fix: concurrency problem when elements were loading --- .../Pages/Structure/Builder/Builder.tsx | 35 +++++++++++-------- .../GeneElementInput/GeneElementInput.tsx | 3 +- .../LinkerElementInput/LinkerElementInput.tsx | 2 +- .../Input/StructuralElementInputProps.tsx | 2 +- .../TemplatedSequenceElementInput.tsx | 4 +-- .../TxSegmentElementInput.tsx | 2 +- 6 files changed, 27 insertions(+), 21 deletions(-) diff --git a/client/src/components/Pages/Structure/Builder/Builder.tsx b/client/src/components/Pages/Structure/Builder/Builder.tsx index 40e28cc3..b40d214f 100644 --- a/client/src/components/Pages/Structure/Builder/Builder.tsx +++ b/client/src/components/Pages/Structure/Builder/Builder.tsx @@ -162,7 +162,6 @@ const Builder: React.FC = () => { // TODO shouldn't need explicit autosave if (STATIC_ELEMENT_TYPES.includes(newItem.type)) { handleSave( - destination.index, newItem as ClientMultiplePossibleGenesElement | ClientUnknownGeneElement ); } @@ -170,22 +169,30 @@ const Builder: React.FC = () => { const reorder = (result: DropResult) => { const { source, destination } = result; - const sourceClone = Array.from(fusion.structure); - const [movedElement] = sourceClone.splice(source.index, 1); - sourceClone.splice(destination.index, 0, movedElement); - setFusion({ ...fusion, ...{ structure: sourceClone } }); + + setFusion((prevFusion) => { + const sourceClone = Array.from(prevFusion.structure); // Use the latest state + + // Remove the element from the source index and store it + const [movedElement] = sourceClone.splice(source.index, 1); + + // Insert the moved element at the destination index + sourceClone.splice(destination.index, 0, movedElement); + + // Return the updated fusion structure + return { ...prevFusion, structure: sourceClone }; + }); }; // Update global fusion object - const handleSave = (index: number, newElement: ClientElementUnion) => { - const items = Array.from(fusion.structure); - const spliceLength = EDITABLE_ELEMENT_TYPES.includes( - newElement.type as ElementType - ) - ? 1 - : 0; - items.splice(index, spliceLength, newElement); - setFusion({ ...fusion, ...{ structure: items } }); + const handleSave = (newElement: ClientElementUnion) => { + setFusion((prevFusion) => { + const updatedStructure = prevFusion.structure.map((item) => + item.elementId === newElement.elementId ? newElement : item + ); + + return { ...prevFusion, structure: updatedStructure }; + }); }; const handleDelete = (uuid: string) => { diff --git a/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx b/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx index 43a9ae9f..1db935cf 100644 --- a/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx +++ b/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx @@ -18,7 +18,6 @@ interface GeneElementInputProps extends StructuralElementInputProps { const GeneElementInput: React.FC = ({ element, - index, handleSave, handleDelete, icon, @@ -56,7 +55,7 @@ const GeneElementInput: React.FC = ({ elementId: element.elementId, nomenclature: nomenclatureResponse.nomenclature, }; - handleSave(index, clientGeneElement); + handleSave(clientGeneElement); setPendingResponse(false); } } diff --git a/client/src/components/Pages/Structure/Input/LinkerElementInput/LinkerElementInput.tsx b/client/src/components/Pages/Structure/Input/LinkerElementInput/LinkerElementInput.tsx index 3b5d3111..e35f4252 100644 --- a/client/src/components/Pages/Structure/Input/LinkerElementInput/LinkerElementInput.tsx +++ b/client/src/components/Pages/Structure/Input/LinkerElementInput/LinkerElementInput.tsx @@ -39,7 +39,7 @@ const LinkerElementInput: React.FC = ({ }, nomenclature: sequence, }; - handleSave(index, linkerElement); + handleSave(linkerElement); }; const inputElements = ( diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputProps.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputProps.tsx index 354e8913..9a19e4ba 100644 --- a/client/src/components/Pages/Structure/Input/StructuralElementInputProps.tsx +++ b/client/src/components/Pages/Structure/Input/StructuralElementInputProps.tsx @@ -10,6 +10,6 @@ export interface BaseStructuralElementProps { export interface StructuralElementInputProps extends BaseStructuralElementProps { index: number; - handleSave: (index: number, element: ClientElementUnion) => void; + handleSave: (element: ClientElementUnion) => void; icon: JSX.Element; } diff --git a/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx b/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx index ca0d8855..54569098 100644 --- a/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx +++ b/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx @@ -17,7 +17,7 @@ interface TemplatedSequenceElementInputProps const TemplatedSequenceElementInput: React.FC< TemplatedSequenceElementInputProps -> = ({ element, index, handleSave, handleDelete, icon }) => { +> = ({ element, handleSave, handleDelete, icon }) => { const [chromosome, setChromosome] = useState( element.inputChromosome || "" ); @@ -92,7 +92,7 @@ const TemplatedSequenceElementInput: React.FC< inputStart: startPosition, inputEnd: endPosition, }; - handleSave(index, templatedSequenceElement); + handleSave(templatedSequenceElement); } }); } diff --git a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx index 3fd2eafa..0a79f32d 100644 --- a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx +++ b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx @@ -163,7 +163,7 @@ const TxSegmentCompInput: React.FC = ({ nomenclatureResponse.nomenclature ) { finishedElement.nomenclature = nomenclatureResponse.nomenclature; - handleSave(index, finishedElement); + handleSave(finishedElement); } }); }