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

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

CHANGELOG.adoc

@@ -73,6 +73,7 @@ Except for the specific case where `cause === 'refresh'` in `DiagramRenderer` (w
 - https://github.com/eclipse-sirius/sirius-web/issues/4641[#4641] [form] Remove front dependency between form and table
 - https://github.com/eclipse-sirius/sirius-web/issues/4635[#4635] [sirius-web] Derive the project semantic data from the project id
 - https://github.com/eclipse-sirius/sirius-web/issues/4469[#4469] [table] Remove useless mutations send at the table opening
+- https://github.com/eclipse-sirius/sirius-web/issues/4451[#4451] [diagram] Keep using the same node after a refresh if possible in order to avoid rerendering all the nodes after converting the diagram
 
 
 

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

@@ -27,6 +27,7 @@ import {
   ReactFlow,
   ReactFlowProps,
   applyNodeChanges,
+  useReactFlow,
   useStoreApi,
 } from '@xyflow/react';
 import React, { MouseEvent as ReactMouseEvent, memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
@@ -123,11 +124,31 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
 
   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),