[4451] Keep using the same node after a refresh if possible

Bug: #4451
Signed-off-by: Michaël Charfadi <[email protected]>

CHANGELOG.adoc

@@ -70,6 +70,8 @@ Now they are executed for some data if the data was coming from a studio too.
 - https://github.com/eclipse-sirius/sirius-web/issues/4422[#4422] [diagram] Prevent application crash when an edge path is malformed during node moves
 - https://github.com/eclipse-sirius/sirius-web/issues/4437[#4437] [diagram] Fix selection dialog not opening
 - https://github.com/eclipse-sirius/sirius-web/issues/4414[#4414] [sirius-web] Provide a default behavior to return valid JSON on `/api/rest/projects/{projectId}/commits/{commitId}/changes` REST APIs.
+- https://github.com/eclipse-sirius/sirius-web/issues/4451[#4451] [diagram] Keep using the same node after a refresh if possible
+
 
 === New Features
 

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx

@@ -28,6 +28,7 @@ import {
   ReactFlow,
   ReactFlowProps,
   applyNodeChanges,
+  useReactFlow,
   useStoreApi,
 } from '@xyflow/react';
 import React, { MouseEvent as ReactMouseEvent, memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
@@ -127,12 +128,34 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
   const { edgeType, setEdgeType } = useEdgeType();
 
   useInitialFitToScreen();
-
+  const { getNode } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
   const store = useStoreApi<Node<NodeData>, Edge<EdgeData>>();
   useEffect(() => {
     const { diagram, cause } = diagramRefreshedEventPayload;
     const convertedDiagram: Diagram = convertDiagram(diagram, nodeConverters, diagramDescription, edgeType);
 
+    convertedDiagram.nodes = convertedDiagram.nodes.map((convertedNode) => {
+      const currentNode = getNode(convertedNode.id);
+      if (
+        !!currentNode &&
+        (convertedNode.position.x !== currentNode.position.x ||
+          convertedNode.position.y !== currentNode.position.y ||
+          convertedNode.width !== currentNode.width ||
+          convertedNode.height !== currentNode.height ||
+          (!!currentNode && JSON.stringify(convertedNode.data) !== JSON.stringify(currentNode.data)))
+      ) {
+        return {
+          ...convertedNode,
+        };
+      } else if (!!currentNode) {
+        return currentNode;
+      } else {
+        return {
+          ...convertedNode,
+        };
+      }
+    });
+
     if (cause === 'layout') {
       const diagramElementIds: string[] = [
         ...getNodes().map((node) => node.data.targetObjectId),

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.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
@@ -13,7 +13,7 @@
 
 import { getCSSColor, IconOverlay } from '@eclipse-sirius/sirius-components-core';
 import { Theme, useTheme } from '@mui/material/styles';
-import { memo, useContext } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { DiagramContext } from '../contexts/DiagramContext';
 import { DiagramContextValue } from '../contexts/DiagramContext.types';
 import { EdgeLabel, InsideLabel, LabelOverflowStrategy, OutsideLabel } from './DiagramRenderer.types';
@@ -121,6 +121,10 @@ export const Label = memo(({ diagramElementId, label, faded }: LabelProps) => {
     }
   };
 
+  const customIconStyle = useMemo(() => {
+    return { marginRight: theme.spacing(1) };
+  }, []);
+
   const content: JSX.Element =
     label.id === currentlyEditedLabelId && !readOnly ? (
       <DiagramDirectEditInput editingKey={editingKey} onClose={handleClose} labelId={label.id} />
@@ -129,7 +133,7 @@ export const Label = memo(({ diagramElementId, label, faded }: LabelProps) => {
         data-id={`${label.id}-content`}
         data-testid={`Label content - ${label.text}`}
         style={labelContentStyle(theme, label)}>
-        <IconOverlay iconURL={label.iconURL} alt={label.text} customIconStyle={{ marginRight: theme.spacing(1) }} />
+        <IconOverlay iconURL={label.iconURL} alt={label.text} customIconStyle={customIconStyle} />
         <div style={labelOverflowStyle(label)}>{label.text}</div>
       </div>
     );