fix: concurrency problem when elements were loading

client/src/components/Pages/Structure/Builder/Builder.tsx

@@ -162,30 +162,37 @@ const Builder: React.FC = () => {
     // TODO shouldn't need explicit autosave
     if (STATIC_ELEMENT_TYPES.includes(newItem.type)) {
       handleSave(
-        destination.index,
         newItem as ClientMultiplePossibleGenesElement | ClientUnknownGeneElement
       );
     }
   };
 
   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) => {

client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx

@@ -18,7 +18,6 @@ interface GeneElementInputProps extends StructuralElementInputProps {
 
 const GeneElementInput: React.FC<GeneElementInputProps> = ({
   element,
-  index,
   handleSave,
   handleDelete,
   icon,
@@ -56,7 +55,7 @@ const GeneElementInput: React.FC<GeneElementInputProps> = ({
                 elementId: element.elementId,
                 nomenclature: nomenclatureResponse.nomenclature,
               };
-              handleSave(index, clientGeneElement);
+              handleSave(clientGeneElement);
               setPendingResponse(false);
             }
           }

client/src/components/Pages/Structure/Input/LinkerElementInput/LinkerElementInput.tsx

@@ -39,7 +39,7 @@ const LinkerElementInput: React.FC<LinkerElementInputProps> = ({
       },
       nomenclature: sequence,
     };
-    handleSave(index, linkerElement);
+    handleSave(linkerElement);
   };
 
   const inputElements = (

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;
 }

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<string>(
     element.inputChromosome || ""
   );
@@ -92,7 +92,7 @@ const TemplatedSequenceElementInput: React.FC<
               inputStart: startPosition,
               inputEnd: endPosition,
             };
-            handleSave(index, templatedSequenceElement);
+            handleSave(templatedSequenceElement);
           }
         });
       }

client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx

@@ -163,7 +163,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
           nomenclatureResponse.nomenclature
         ) {
           finishedElement.nomenclature = nomenclatureResponse.nomenclature;
-          handleSave(index, finishedElement);
+          handleSave(finishedElement);
         }
       });
     }