From b4665bbacb3881e72319ba6526caf9efbbba5f21 Mon Sep 17 00:00:00 2001
From: Michael Charfadi <michael.charfadi@obeosoft.com>
Date: Wed, 22 Jan 2025 11:22:08 +0100
Subject: [PATCH] [4451] Keep using the same node after a refresh if possible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: https://github.com/eclipse-sirius/sirius-web/issues/4451
Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
---
 CHANGELOG.adoc                                |  1 +
 .../src/renderer/DiagramRenderer.tsx          | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 9f3cfc94aa..dff43b17ac 100644
--- a/CHANGELOG.adoc
+++ b/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
 
 
 
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
index f609db1ceb..988aeadc6a 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
+++ b/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),