[4577] Remove payload from DiagramContext to improve performances

CHANGELOG.adoc

@@ -28,8 +28,9 @@ You have to add `tableWidgetDocumentTransform` to your extensionRegistry to use
 - https://github.com/eclipse-sirius/sirius-web/issues/4635[#4635] [sirius-web] Since the switch from using the `Project#id` as the `editingContextId` to the use of the `SemanticData#id` instead, `IProjectEditingContextApplicationService` could have been used as a service to switch from the `Project#id` to the `editingContextId`.
 Given that it is an application service, it comes with some constraints with regard to transactions, for that a new reusable service named `IProjectEditingContextService` has now been added to manipulate the `projectId` and `editingContextId` instead.
 `IProjectEditingContextApplicationService` has thus been modified to be more focused on its original goal as the behavior of the `Project#currentEditingContext` datafetcher.
-
 - https://github.com/eclipse-sirius/sirius-web/issues/4443[#4443] [table] `ICell` has a new method `getDescriptionId` that all implementors should provide.
+- https://github.com/eclipse-sirius/sirius-web/issues/4577[#4577] [diagram] Remove `payload` and `refreshEventPayloadId` from `DiagramContext` since they are not used anymore
+
 
 === Dependency update
 
@@ -79,6 +80,7 @@ Except for the specific case where `cause === 'refresh'` in `DiagramRenderer` (w
 - https://github.com/eclipse-sirius/sirius-web/issues/4583[#4583] [sirius-web] Improve the performance to retrieve if a representation is view based
 - 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
 - https://github.com/eclipse-sirius/sirius-web/issues/4575[#4575] [diagram] Memoize the style of a label to avoid rerendering them all when refreshing the diagram
+- https://github.com/eclipse-sirius/sirius-web/issues/4577[#4577] [diagram] Improve the performance of the diagram by removing useless data from `DiagramContext`
 
 
 

packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.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
@@ -16,8 +16,6 @@ import { DiagramContextValue } from './DiagramContext.types';
 const value: DiagramContextValue = {
   editingContextId: '',
   diagramId: '',
-  refreshEventPayloadId: '',
-  payload: null,
   readOnly: false,
 };
 

packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.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
@@ -11,12 +11,8 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { GQLDiagramEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
-
 export interface DiagramContextValue {
   editingContextId: string;
   diagramId: string;
-  refreshEventPayloadId: string;
-  payload: GQLDiagramEventPayload | null;
   readOnly: boolean;
 }

packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx

@@ -15,6 +15,7 @@ import { gql, useQuery } from '@apollo/client';
 import { RepresentationComponentProps, useMultiToast } from '@eclipse-sirius/sirius-components-core';
 import { ReactFlowProvider } from '@xyflow/react';
 import { memo, useEffect, useState } from 'react';
+import { DiagramContext } from '../contexts/DiagramContext';
 import { DiagramDescriptionContext } from '../contexts/DiagramDescriptionContext';
 import { ConnectorContextProvider } from '../renderer/connector/ConnectorContext';
 import { DiagramDirectEditContextProvider } from '../renderer/direct-edit/DiagramDirectEditContext';
@@ -117,10 +118,17 @@ export const DiagramRepresentation = memo(
                     <MarkerDefinitions />
                     <FullscreenContextProvider>
                       <DiagramDescriptionContext.Provider value={{ diagramDescription }}>
-                        <DiagramSubscriptionProvider
-                          diagramId={representationId}
-                          editingContextId={editingContextId}
-                          readOnly={readOnly}></DiagramSubscriptionProvider>
+                        <DiagramContext.Provider
+                          value={{
+                            editingContextId,
+                            diagramId: representationId,
+                            readOnly,
+                          }}>
+                          <DiagramSubscriptionProvider
+                            diagramId={representationId}
+                            editingContextId={editingContextId}
+                            readOnly={readOnly}></DiagramSubscriptionProvider>
+                        </DiagramContext.Provider>
                       </DiagramDescriptionContext.Provider>
                     </FullscreenContextProvider>
                   </NodeContextProvider>

packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.tsx

@@ -14,7 +14,6 @@
 import LinearProgress from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
 import { memo, useEffect, useState } from 'react';
-import { DiagramContext } from '../contexts/DiagramContext';
 import { DialogContextProvider } from '../dialog/DialogContext';
 import {
   GQLDiagramEventPayload,
@@ -29,58 +28,47 @@ const isDiagramRefreshedEventPayload = (
   payload: GQLDiagramEventPayload | null
 ): payload is GQLDiagramRefreshedEventPayload => !!payload && payload.__typename === 'DiagramRefreshedEventPayload';
 
-export const DiagramSubscriptionProvider = memo(
-  ({ diagramId, editingContextId, readOnly }: DiagramSubscriptionProviderProps) => {
-    const [state, setState] = useState<DiagramSubscriptionState>({
-      id: crypto.randomUUID(),
-      diagramRefreshedEventPayload: null,
-      complete: false,
-      message: '',
-    });
+export const DiagramSubscriptionProvider = memo(({ diagramId, editingContextId }: DiagramSubscriptionProviderProps) => {
+  const [state, setState] = useState<DiagramSubscriptionState>({
+    id: crypto.randomUUID(),
+    diagramRefreshedEventPayload: null,
+    complete: false,
+    message: '',
+  });
 
-    const { complete, payload } = useDiagramSubscription(editingContextId, diagramId);
+  const { complete, payload } = useDiagramSubscription(editingContextId, diagramId);
 
-    useEffect(() => {
-      if (isDiagramRefreshedEventPayload(payload)) {
-        setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: payload }));
-      }
-    }, [payload]);
-
-    if (complete) {
-      return (
-        <div>
-          <Typography variant="subtitle2">The representation is not available anymore</Typography>
-        </div>
-      );
-    }
-
-    if (!state.diagramRefreshedEventPayload) {
-      return <LinearProgress />;
+  useEffect(() => {
+    if (isDiagramRefreshedEventPayload(payload)) {
+      setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: payload }));
     }
+  }, [payload]);
 
+  if (complete) {
     return (
-      <StoreContextProvider>
-        <DiagramContext.Provider
-          value={{
-            editingContextId,
-            diagramId: diagramId,
-            refreshEventPayloadId: state.diagramRefreshedEventPayload.id,
-            payload: payload,
-            readOnly,
-          }}>
-          <DialogContextProvider>
-            <div
-              style={{ display: 'inline-block', position: 'relative' }}
-              data-representation-kind="diagram"
-              data-representation-label={state.diagramRefreshedEventPayload.diagram.metadata.label}>
-              <DiagramRenderer
-                key={state.diagramRefreshedEventPayload.diagram.id}
-                diagramRefreshedEventPayload={state.diagramRefreshedEventPayload}
-              />
-            </div>
-          </DialogContextProvider>
-        </DiagramContext.Provider>
-      </StoreContextProvider>
+      <div>
+        <Typography variant="subtitle2">The representation is not available anymore</Typography>
+      </div>
     );
   }
-);
+
+  if (!state.diagramRefreshedEventPayload) {
+    return <LinearProgress />;
+  }
+
+  return (
+    <StoreContextProvider>
+      <DialogContextProvider>
+        <div
+          style={{ display: 'inline-block', position: 'relative' }}
+          data-representation-kind="diagram"
+          data-representation-label={state.diagramRefreshedEventPayload.diagram.metadata.label}>
+          <DiagramRenderer
+            key={state.diagramRefreshedEventPayload.diagram.id}
+            diagramRefreshedEventPayload={state.diagramRefreshedEventPayload}
+          />
+        </div>
+      </DialogContextProvider>
+    </StoreContextProvider>
+  );
+});