[4577] Add DiagramPayloadContext and remove payload from DiagramContext

Bug: #4577 Signed-off-by: Michaël Charfadi <[email protected]>
eclipse-sirius · Feb 17, 2025 · 4b10977 · 4b10977
1 parent b6ce301
commit 4b10977
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 99 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -50,6 +50,7 @@ It is not an API breaking change but a breaking change from the end-user point o
 In order to find the `editingContextId` from the `projectId` one should leverage `IProjectSemanticDataSearchService#findByProjectId` and use the `ìd` of the semantic data found.
 To find instead the `projectId` from the `editingContextId`, `IProjectSemanticDataSearchService#findBySemanticDataId` should be used along with the `id` of the project.
 The method `IEditingContextLoader#load` has also been updated to not use `projectId` as parameter anymore but instead the `SemanticData` directly.
+- https://github.com/eclipse-sirius/sirius-web/issues/4577[#4577] [diagram] Remove `payload` and `refreshEventPayloadId` from `DiagramContext` and add a new context `DiagramPayloadContext` to retrieve these values
 
 
 === Dependency update
@@ -187,6 +188,7 @@ To achieve that a new concept, `ProjectSemanticData` has been added along with a
 - https://github.com/eclipse-sirius/sirius-web/issues/4501[#4501] [browser] Extract the model browser into reusable modules
 - https://github.com/eclipse-sirius/sirius-web/issues/4514[#4514] [sirius-web] Added support for Ctrl+Shift+Z (Linux/macOS) to trigger redo in addition to Ctrl+Y (Windows)
 - https://github.com/eclipse-sirius/sirius-web/issues/4372[#4372] [sirius-web] Lower the coupling between project and editing context
+- https://github.com/eclipse-sirius/sirius-web/issues/4577[#4577] [diagram] Remove `payload` and `refreshEventPayloadId` from `DiagramContext` and add a new context `DiagramPayloadContext` to retrieve these values, this improve general performance on diagram
 
 
 == v2025.1.0

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts b/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,
 };
 

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts b/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;
 }
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.ts
@@ -0,0 +1,21 @@
+/*******************************************************************************
+ * 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 React from 'react';
+import { DiagramPayloadContextValue } from './DiagramPayloadContext.types';
+
+const value: DiagramPayloadContextValue = {
+  refreshEventPayloadId: '',
+  payload: null,
+};
+
+export const DiagramPayloadContext = React.createContext<DiagramPayloadContextValue>(value);
diff --git a/.../diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.types.ts b/.../diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.types.ts
@@ -0,0 +1,19 @@
+/*******************************************************************************
+ * 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 { GQLDiagramEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
+
+export interface DiagramPayloadContextValue {
+  refreshEventPayloadId: string;
+  payload: GQLDiagramEventPayload | null;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/index.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/index.ts
@@ -13,6 +13,8 @@
 
 export { DiagramContext } from './contexts/DiagramContext';
 export type { DiagramContextValue } from './contexts/DiagramContext.types';
+export { DiagramPayloadContext } from './contexts/DiagramPayloadContext';
+export type { DiagramPayloadContextValue } from './contexts/DiagramPayloadContext.types';
 export { NodeTypeContext } from './contexts/NodeContext';
 export type { NodeTypeContextValue, NodeTypeContributionElement } from './contexts/NodeContext.types';
 export { convertLineStyle, isListLayoutStrategy } from './converter/convertDiagram';

diff --git a/...s/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx b/...s/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 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
@@ -12,8 +12,8 @@
  *******************************************************************************/
 import { Edge, Node, useReactFlow } from '@xyflow/react';
 import { useContext } from 'react';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
+import { DiagramPayloadContext } from '../../contexts/DiagramPayloadContext';
+import { DiagramPayloadContextValue } from '../../contexts/DiagramPayloadContext.types';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { RawDiagram } from '../layout/layout.types';
 import { useLayout } from '../layout/useLayout';
@@ -24,7 +24,7 @@ import { UseAdjustSizeValue } from './useAdjustSize.types';
 
 export const useAdjustSize = (): UseAdjustSizeValue => {
   const { layout } = useLayout();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
+  const { refreshEventPayloadId } = useContext<DiagramPayloadContextValue>(DiagramPayloadContext);
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { hideDiagramElementPalette } = useDiagramElementPalette();
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();

diff --git a/...ges/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/useEditableEdgePath.ts b/...ges/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/useEditableEdgePath.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 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
@@ -12,18 +12,18 @@
  *******************************************************************************/
 import { Edge, Node } from '@xyflow/react';
 import { useCallback, useContext } from 'react';
-import { UseEditableEdgePathValue } from './useEditableEdgePath.types';
-import { NodeData, EdgeData } from '../DiagramRenderer.types';
-import { RawDiagram } from '../layout/layout.types';
-import { DiagramNodeType } from '../node/NodeTypes.types';
+import { DiagramPayloadContext } from '../../contexts/DiagramPayloadContext';
+import { DiagramPayloadContextValue } from '../../contexts/DiagramPayloadContext.types';
 import { useStore } from '../../representation/useStore';
+import { EdgeData, NodeData } from '../DiagramRenderer.types';
+import { RawDiagram } from '../layout/layout.types';
 import { useSynchronizeLayoutData } from '../layout/useSynchronizeLayoutData';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
-import { DiagramContext } from '../../contexts/DiagramContext';
+import { DiagramNodeType } from '../node/NodeTypes.types';
+import { UseEditableEdgePathValue } from './useEditableEdgePath.types';
 
 export const useEditableEdgePath = (): UseEditableEdgePathValue => {
   const { getEdges, getNodes, setEdges } = useStore();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
+  const { refreshEventPayloadId } = useContext<DiagramPayloadContextValue>(DiagramPayloadContext);
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
 
   const synchronizeEdgeLayoutData = useCallback(

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 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
@@ -15,8 +15,8 @@ import { Edge, Node, useReactFlow, useViewport } from '@xyflow/react';
 import { LayoutOptions } from 'elkjs/lib/elk-api';
 import ELK, { ElkLabel, ElkNode } from 'elkjs/lib/elk.bundled';
 import { useContext } from 'react';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
+import { DiagramPayloadContext } from '../../contexts/DiagramPayloadContext';
+import { DiagramPayloadContextValue } from '../../contexts/DiagramPayloadContext.types';
 import { useDiagramDescription } from '../../contexts/useDiagramDescription';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { ListNodeData } from '../node/ListNode.types';
@@ -123,7 +123,7 @@ export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivEl
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { diagramDescription } = useDiagramDescription();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
+  const { refreshEventPayloadId } = useContext<DiagramPayloadContextValue>(DiagramPayloadContext);
   const { resolveNodeOverlap } = useOverlap();
   const { addErrorMessage } = useMultiToast();
 

diff --git a/...diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts b/...diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 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,8 +13,8 @@
 import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
 import { Edge, Node, XYPosition, useReactFlow } from '@xyflow/react';
 import { useCallback, useContext } from 'react';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
+import { DiagramPayloadContext } from '../../contexts/DiagramPayloadContext';
+import { DiagramPayloadContextValue } from '../../contexts/DiagramPayloadContext.types';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
 import { useOverlap } from '../overlap/useOverlap';
@@ -40,7 +40,7 @@ export const useDistributeElements = (): UseDistributeElementsValue => {
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { addMessages } = useMultiToast();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
+  const { refreshEventPayloadId } = useContext<DiagramPayloadContextValue>(DiagramPayloadContext);
   const { resolveNodeOverlap } = useOverlap();
 
   const processLayoutTool = (

diff --git a/...diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx b/...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';
@@ -31,6 +32,7 @@ import {
   GQLDiagramDescriptionVariables,
 } from './DiagramRepresentation.types';
 import { DiagramSubscriptionProvider } from './DiagramSubscriptionProvider';
+import { StoreContextProvider } from './StoreContext';
 
 export const getDiagramDescription = gql`
   query getDiagramDescription($editingContextId: ID!, $representationId: ID!) {
@@ -108,27 +110,36 @@ export const DiagramRepresentation = memo(
 
     return (
       <ReactFlowProvider>
-        <DiagramDirectEditContextProvider>
-          <DiagramPaletteContextProvider>
-            <DiagramElementPaletteContextProvider>
-              <ConnectorContextProvider>
-                <DropNodeContextProvider>
-                  <NodeContextProvider>
-                    <MarkerDefinitions />
-                    <FullscreenContextProvider>
-                      <DiagramDescriptionContext.Provider value={{ diagramDescription }}>
-                        <DiagramSubscriptionProvider
-                          diagramId={representationId}
-                          editingContextId={editingContextId}
-                          readOnly={readOnly}></DiagramSubscriptionProvider>
-                      </DiagramDescriptionContext.Provider>
-                    </FullscreenContextProvider>
-                  </NodeContextProvider>
-                </DropNodeContextProvider>
-              </ConnectorContextProvider>
-            </DiagramElementPaletteContextProvider>
-          </DiagramPaletteContextProvider>
-        </DiagramDirectEditContextProvider>
+        <StoreContextProvider>
+          <DiagramDirectEditContextProvider>
+            <DiagramPaletteContextProvider>
+              <DiagramElementPaletteContextProvider>
+                <ConnectorContextProvider>
+                  <DropNodeContextProvider>
+                    <NodeContextProvider>
+                      <MarkerDefinitions />
+                      <FullscreenContextProvider>
+                        <DiagramDescriptionContext.Provider value={{ diagramDescription }}>
+                          <DiagramContext.Provider
+                            value={{
+                              editingContextId,
+                              diagramId: representationId,
+                              readOnly,
+                            }}>
+                            <DiagramSubscriptionProvider
+                              diagramId={representationId}
+                              editingContextId={editingContextId}
+                              readOnly={readOnly}></DiagramSubscriptionProvider>
+                          </DiagramContext.Provider>
+                        </DiagramDescriptionContext.Provider>
+                      </FullscreenContextProvider>
+                    </NodeContextProvider>
+                  </DropNodeContextProvider>
+                </ConnectorContextProvider>
+              </DiagramElementPaletteContextProvider>
+            </DiagramPaletteContextProvider>
+          </DiagramDirectEditContextProvider>
+        </StoreContextProvider>
       </ReactFlowProvider>
     );
   }