[4571] Add debounce on synchronizeLayoutData

Bug: #4571
Signed-off-by: Florian ROUËNÉ <[email protected]>

CHANGELOG.adoc

@@ -100,7 +100,7 @@ Now they are executed for some data if the data was coming from a studio too.
 - https://github.com/eclipse-sirius/sirius-web/issues/4522[#4522] [diagram] Fix an issue where custom tools were no longer contributed to the diagram palette
 - https://github.com/eclipse-sirius/sirius-web/issues/4549[#4549] [diagram] Fix an issue where edge tools could be shown in a palette tool section
 - https://github.com/eclipse-sirius/sirius-web/issues/4559[#4559] [diagram] Prevent list children positions to be set to (0,0) in certain random situations.
-
+- https://github.com/eclipse-sirius/sirius-web/issues/4571[#4571] [diagram] Prevent diagram crash when layoutData mutations are sent to quickly
 
 === New Features
 

integration-tests/cypress/e2e/project/diagrams/fork-description.cy.ts

@@ -31,6 +31,7 @@ describe('Diagram - Fork Representation', () => {
         explorer.expandWithDoubleClick('Flow');
         explorer.expandWithDoubleClick('NewSystem');
         explorer.selectRepresentation('Topography');
+        new Diagram().getDiagram('Topography').should('exist');
       });
     });
 

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDebounce.ts

@@ -0,0 +1,29 @@
+/*******************************************************************************
+ * Copyright (c) 2025 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { useRef, useCallback } from 'react';
+
+export const useDebounce = (callback: (...args: any[]) => void, delay: number) => {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  return useCallback(
+    (...args: any[]) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+};

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useSynchronizeLayoutData.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023, 2024 Obeo.
+ * Copyright (c) 2023, 2025 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -17,6 +17,7 @@ import { useContext, useEffect } from 'react';
 import { DiagramContext } from '../../contexts/DiagramContext';
 import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { RawDiagram } from './layout.types';
+import { useDebounce } from './useDebounce';
 import {
   GQLDiagramLayoutData,
   GQLErrorPayload,
@@ -89,7 +90,7 @@ export const useSynchronizeLayoutData = (): UseSynchronizeLayoutDataValue => {
         position: { x, y },
       } = node;
       const { resizedByUser } = node.data;
-      if (height && width) {
+      if (height && width && !isNaN(x) && !isNaN(y)) {
         nodeLayoutData.push({
           id,
           position: {
@@ -134,7 +135,9 @@ export const useSynchronizeLayoutData = (): UseSynchronizeLayoutDataValue => {
     layoutDiagram({ variables });
   };
 
+  const debouncedSynchronizeLayoutData = useDebounce(synchronizeLayoutData, 300);
+
   return {
-    synchronizeLayoutData,
+    synchronizeLayoutData: debouncedSynchronizeLayoutData,
   };
 };