[3533] Add a dedicated component to handle diagram subscription

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

CHANGELOG.adoc

@@ -43,6 +43,8 @@
 - https://github.com/eclipse-sirius/sirius-web/issues/3511[#3511] [diagram] Improve edge handle position for border nodes
 - https://github.com/eclipse-sirius/sirius-web/issues/2837[#2837] [gantt] Enhance gantt scroll bar management
 - https://github.com/eclipse-sirius/sirius-web/issues/3441[#3441] [gantt] Use a DateTime widget for AbstractTask entity
+- https://github.com/eclipse-sirius/sirius-web/issues/3533[#3553] [diagram] Add a dedicated component to handle diagram subscription
+
 
 == v2024.5.0
 

packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts

@@ -16,7 +16,6 @@ import { DiagramContextValue } from './DiagramContext.types';
 const value: DiagramContextValue = {
   editingContextId: '',
   diagramId: '',
-  refreshEventPayloadId: '',
   readOnly: false,
 };
 

packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts

@@ -14,6 +14,5 @@
 export interface DiagramContextValue {
   editingContextId: string;
   diagramId: string;
-  refreshEventPayloadId: string;
   readOnly: boolean;
 }

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

@@ -28,14 +28,17 @@ import {
   ReactFlow,
   applyNodeChanges,
 } from 'reactflow';
+import 'reactflow/dist/style.css';
 import { DiagramContext } from '../contexts/DiagramContext';
 import { DiagramContextValue } from '../contexts/DiagramContext.types';
 import { NodeTypeContext } from '../contexts/NodeContext';
 import { NodeTypeContextValue } from '../contexts/NodeContext.types';
 import { useDiagramDescription } from '../contexts/useDiagramDescription';
 import { convertDiagram } from '../converter/convertDiagram';
+import { DiagramSubscriptionContextValue } from '../representation/DiagramSubscriptionContext.types';
 import { useStore } from '../representation/useStore';
-import { Diagram, DiagramRendererProps, NodeData } from './DiagramRenderer.types';
+import { DiagramSubscriptionContext } from './../representation/DiagramSubscriptionContext';
+import { Diagram, NodeData } from './DiagramRenderer.types';
 import { useBorderChange } from './border/useBorderChange';
 import { ConnectorContextualMenu } from './connector/ConnectorContextualMenu';
 import { useConnector } from './connector/useConnector';
@@ -72,11 +75,14 @@ import { useDiagramSelection } from './selection/useDiagramSelection';
 import { useShiftSelection } from './selection/useShiftSelection';
 import { useSnapToGrid } from './snap-to-grid/useSnapToGrid';
 
-import 'reactflow/dist/style.css';
-
 const GRID_STEP: number = 10;
 
-export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRendererProps) => {
+export const DiagramRenderer = memo(() => {
+  const { diagramRefreshedEventPayload } = useContext<DiagramSubscriptionContextValue>(DiagramSubscriptionContext);
+  if (!diagramRefreshedEventPayload) {
+    return null;
+  }
+
   const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
   const { diagramDescription } = useDiagramDescription();
   const { getEdges, onEdgesChange, getNodes, setEdges, setNodes } = useStore();

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.types.ts

@@ -13,15 +13,10 @@
 
 import { Edge, Node } from 'reactflow';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
-import { GQLDiagramRefreshedEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
 import { MultiLabelEdgeData } from './edge/MultiLabelEdge.types';
 import { ConnectionHandle } from './handles/ConnectionHandles.types';
 import { DiagramNodeType } from './node/NodeTypes.types';
 
-export interface DiagramRendererProps {
-  diagramRefreshedEventPayload: GQLDiagramRefreshedEventPayload;
-}
-
 export interface Diagram {
   metadata: DiagramMetadata;
   nodes: Node<NodeData, DiagramNodeType>[];

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx

@@ -10,21 +10,22 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, useReactFlow } from 'reactflow';
 import { useContext } from 'react';
+import { Node, useReactFlow } from 'reactflow';
+import { DiagramSubscriptionContext } from '../../representation/DiagramSubscriptionContext';
+import { DiagramSubscriptionContextValue } from '../../representation/DiagramSubscriptionContext.types';
+import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { RawDiagram } from '../layout/layout.types';
-import { UseAdjustSizeValue } from './useAdjustSize.types';
 import { useLayout } from '../layout/useLayout';
 import { useSynchronizeLayoutData } from '../layout/useSynchronizeLayoutData';
-import { NodeData, EdgeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
-import { DiagramContext } from '../../contexts/DiagramContext';
 import { useDiagramElementPalette } from '../palette/useDiagramElementPalette';
+import { UseAdjustSizeValue } from './useAdjustSize.types';
 
 export const useAdjustSize = (): UseAdjustSizeValue => {
   const { layout } = useLayout();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
+  const { diagramRefreshedEventPayload } = useContext<DiagramSubscriptionContextValue>(DiagramSubscriptionContext);
+  const refreshEventPayloadId = diagramRefreshedEventPayload?.id || '';
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { hideDiagramElementPalette } = useDiagramElementPalette();
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<NodeData, EdgeData>();

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts

@@ -14,9 +14,9 @@ import { LayoutOptions } from 'elkjs/lib/elk-api';
 import ELK, { ElkLabel, ElkNode } from 'elkjs/lib/elk.bundled';
 import { useContext } from 'react';
 import { Edge, Node, useReactFlow, useViewport } from 'reactflow';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { useDiagramDescription } from '../../contexts/useDiagramDescription';
+import { DiagramSubscriptionContext } from '../../representation/DiagramSubscriptionContext';
+import { DiagramSubscriptionContextValue } from '../../representation/DiagramSubscriptionContext.types';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { ListNodeData } from '../node/ListNode.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
@@ -121,7 +121,8 @@ export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivEl
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { diagramDescription } = useDiagramDescription();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
+  const { diagramRefreshedEventPayload } = useContext<DiagramSubscriptionContextValue>(DiagramSubscriptionContext);
+  const refreshEventPayloadId = diagramRefreshedEventPayload?.id || '';
   const { resolveNodeOverlap } = useOverlap();
 
   const elk = new ELK();

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts

@@ -10,18 +10,18 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
 import { useCallback, useContext } from 'react';
 import { Node, XYPosition, useReactFlow } from 'reactflow';
-import { UseDistributeElementsValue } from './useDistributeElements.types';
-import { NodeData, EdgeData } from '../DiagramRenderer.types';
+import { DiagramSubscriptionContext } from '../../representation/DiagramSubscriptionContext';
+import { DiagramSubscriptionContextValue } from '../../representation/DiagramSubscriptionContext.types';
+import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { useSynchronizeLayoutData } from './useSynchronizeLayoutData';
+import { useOverlap } from '../overlap/useOverlap';
 import { RawDiagram } from './layout.types';
+import { UseDistributeElementsValue } from './useDistributeElements.types';
 import { useLayout } from './useLayout';
-import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { useOverlap } from '../overlap/useOverlap';
+import { useSynchronizeLayoutData } from './useSynchronizeLayoutData';
 
 function getComparePositionFn(direction: 'horizontal' | 'vertical') {
   return (node1: Node, node2: Node) => {
@@ -40,7 +40,8 @@ export const useDistributeElements = (): UseDistributeElementsValue => {
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { addMessages } = useMultiToast();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
+  const { diagramRefreshedEventPayload } = useContext<DiagramSubscriptionContextValue>(DiagramSubscriptionContext);
+  const refreshEventPayloadId = diagramRefreshedEventPayload?.id || '';
   const { resolveNodeOverlap } = useOverlap();
 
   const processLayoutTool = (