[4571] Add debounce on synchronizeLayoutData

Bug: #4571 Signed-off-by: Michaël Charfadi <[email protected]> Signed-off-by: Florian ROUËNÉ <[email protected]>
eclipse-sirius · Feb 17, 2025 · b237dbe · b237dbe
1 parent 0baef07
commit b237dbe
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 16 deletions.
diff --git a/CHANGELOG.adoc b/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
 
@@ -145,6 +145,7 @@ See `PapayaExtensionRegistry.tsx` for how the same result as before can be achie
 - https://github.com/eclipse-sirius/sirius-web/issues/4377[#4377] [sirius-web] Add the ability to update dynamically the description of any representation
 - https://github.com/eclipse-sirius/sirius-web/issues/4462[#4462] [sirius-web] Add support for visualization of the libraries available on a server.
 For that, a new page `/libraries` showing all the libraries has been contributed.
+- https://github.com/eclipse-sirius/sirius-web/issues/4564[#4564] [sirius-web] Add an arrow to close the palette on its header
 
 
 === Improvements

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDebounce.ts b/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]
+  );
+};
diff --git a/...grams/frontend/sirius-components-diagrams/src/renderer/layout/useSynchronizeLayoutData.ts b/...grams/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, 500);
+
   return {
-    synchronizeLayoutData,
+    synchronizeLayoutData: debouncedSynchronizeLayoutData,
   };
 };
diff --git a/...agrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramElementPalette.tsx b/...agrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramElementPalette.tsx
@@ -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
@@ -27,7 +27,7 @@ export const DiagramElementPalette = memo(
     const { setCurrentlyEditedLabelId, currentlyEditedLabelId } = useDiagramDirectEdit();
 
     //If the Palette search field has the focus on, the useKeyPress from reactflow ignore the key pressed event.
-    const onEscape = () => {
+    const onClose = () => {
       hideDiagramElementPalette();
     };
 
@@ -49,7 +49,7 @@ export const DiagramElementPalette = memo(
           diagramElementId={diagramElementId}
           targetObjectId={targetObjectId}
           onDirectEditClick={handleDirectEditClick}
-          onEscape={onEscape}
+          onClose={onClose}
         />
       </PalettePortal>
     ) : null;

diff --git a/...ages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPalette.tsx b/...ages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/DiagramPalette.tsx
@@ -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
@@ -36,7 +36,7 @@ export const DiagramPalette = memo(({ diagramElementId, targetObjectId }: Diagra
   }
 
   //If the Palette search field has the focus on, the useKeyPress from reactflow ignore the key pressed event.
-  const onEscape = () => {
+  const onClose = () => {
     hideDiagramPalette();
   };
 
@@ -48,7 +48,7 @@ export const DiagramPalette = memo(({ diagramElementId, targetObjectId }: Diagra
         diagramElementId={diagramElementId}
         targetObjectId={targetObjectId}
         onDirectEditClick={() => {}}
-        onEscape={onEscape}
+        onClose={onClose}
       />
     </PalettePortal>
   ) : null;

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx
@@ -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
@@ -11,10 +11,13 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import CloseIcon from '@mui/icons-material/Close';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
+import Tooltip from '@mui/material/Tooltip';
 import { Edge, Node, useStoreApi, useViewport, XYPosition } from '@xyflow/react';
 import React, { useEffect, useState } from 'react';
 import Draggable, { DraggableData } from 'react-draggable';
@@ -52,7 +55,7 @@ const usePaletteStyle = makeStyles<PaletteStyleProps>()((theme, props) => ({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'space-between',
     alignItems: 'center',
     backgroundColor: `${theme.palette.secondary.main}08`,
   },
@@ -104,7 +107,7 @@ export const Palette = ({
   diagramElementId,
   targetObjectId,
   onDirectEditClick,
-  onEscape,
+  onClose,
 }: PaletteProps) => {
   const { domNode, nodeLookup, edgeLookup } = useStoreApi<Node<NodeData>, Edge<EdgeData>>().getState();
   const { x: viewportWidth, y: viewportHeight } = computeDraggableBounds(domNode?.getBoundingClientRect());
@@ -169,6 +172,11 @@ export const Palette = ({
         onClick={(event) => event.stopPropagation()}>
         <Box id="tool-palette-header" className={classes.paletteHeader}>
           <DragIndicatorIcon />
+          <Tooltip title="Close">
+            <IconButton size="small" aria-label="close" color="inherit" data-testid="Close-palette" onClick={onClose}>
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
         </Box>
         <Divider />
         <PaletteQuickAccessToolBar
@@ -180,7 +188,7 @@ export const Palette = ({
         />
         <PaletteSearchField
           onValueChanged={onSearchFieldValueChanged}
-          onEscape={onEscape}
+          onEscape={onClose}
           onDirectEditClick={onDirectEditClick}
         />
         {state.searchToolValue.length > 0 ? (

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.types.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
@@ -38,7 +38,7 @@ export interface PaletteProps {
   diagramElementId: string;
   targetObjectId: string;
   onDirectEditClick: () => void;
-  onEscape?: () => void;
+  onClose: () => void;
 }
 
 export interface PaletteState {