From 8fbf3b550e5cea141fdb14e3394038410bedf14b Mon Sep 17 00:00:00 2001 From: Michael Charfadi Date: Mon, 17 Feb 2025 13:58:44 +0100 Subject: [PATCH] [4577] Remove useless data from DiagramContext to improve performances MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/4577 Signed-off-by: Michaël Charfadi --- CHANGELOG.adoc | 4 +- .../src/contexts/DiagramContext.ts | 4 +- .../src/contexts/DiagramContext.types.ts | 6 +- .../representation/DiagramRepresentation.tsx | 16 +++- .../DiagramSubscriptionProvider.tsx | 86 ++++++++----------- 5 files changed, 54 insertions(+), 62 deletions(-) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index df8f76bf05..d00b913e81 100644 --- a/CHANGELOG.adoc +++ b/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` diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts index 58cb393ef7..f435ae6acc 100644 --- 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 index 2fa29085e0..a10e93fbfe 100644 --- 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/representation/DiagramRepresentation.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx index 2874369af1..e4cfa1d0f5 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx +++ b/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( - + + + diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.tsx index 8976233113..e3a3a97415 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.tsx +++ b/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({ - id: crypto.randomUUID(), - diagramRefreshedEventPayload: null, - complete: false, - message: '', - }); +export const DiagramSubscriptionProvider = memo(({ diagramId, editingContextId }: DiagramSubscriptionProviderProps) => { + const [state, setState] = useState({ + 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 ( -
- The representation is not available anymore -
- ); - } - - if (!state.diagramRefreshedEventPayload) { - return ; + useEffect(() => { + if (isDiagramRefreshedEventPayload(payload)) { + setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: payload })); } + }, [payload]); + if (complete) { return ( - - - -
- -
- - - +
+ The representation is not available anymore +
); } -); + + if (!state.diagramRefreshedEventPayload) { + return ; + } + + return ( + + +
+ +
+ + + ); +});