From 9317ec38e3c31a2301ae945da837a500243e1ebc Mon Sep 17 00:00:00 2001 From: Denis Nikiforov Date: Mon, 18 Nov 2024 00:19:36 +0300 Subject: [PATCH] [4208] Improve performance of details view rendering on selection change Bug: https://github.com/eclipse-sirius/sirius-web/issues/4208 Signed-off-by: Denis Nikiforov --- CHANGELOG.adoc | 1 + .../src/views/FormBasedView.tsx | 5 ++-- .../workbench-views/DetailsView.tsx | 23 +------------------ .../workbench-views/DetailsView.types.ts | 2 -- 4 files changed, 5 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 40bb582ebe0..b2ce5f826d8 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -111,6 +111,7 @@ This is now fixed - https://github.com/eclipse-sirius/sirius-web/issues/4261[#4261] [core] Enable image cache - https://github.com/eclipse-sirius/sirius-web/issues/4225[#4225] [emf] Add support for localized enumeration literals in EMF property forms - https://github.com/eclipse-sirius/sirius-web/issues/4227[#4227] [emf] Add support for custom numeric and boolean types in property forms +- https://github.com/eclipse-sirius/sirius-web/issues/4208[#4208] [form] Improve performance of details view rendering on selection change diff --git a/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx b/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx index 77895bddb81..6b284925e04 100644 --- a/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx @@ -11,6 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { DataExtension, useData } from '@eclipse-sirius/sirius-components-core'; +import { memo } from 'react'; import { Form } from '../form/Form'; import { GQLForm } from '../form/FormEventFragments.types'; import { FormBasedViewProps, FormConverter } from './FormBasedView.types'; @@ -19,7 +20,7 @@ import { formBasedViewFormConverterExtensionPoint } from './FormBasedViewExtensi /** * Used to define workbench views based on a form. */ -export const FormBasedView = ({ editingContextId, form, readOnly, postProcessor }: FormBasedViewProps) => { +export const FormBasedView = memo(({ editingContextId, form, readOnly, postProcessor }: FormBasedViewProps) => { const { data: formConverters }: DataExtension = useData(formBasedViewFormConverterExtensionPoint); let convertedForm: GQLForm = form; @@ -31,4 +32,4 @@ export const FormBasedView = ({ editingContextId, form, readOnly, postProcessor return postProcessor({ editingContextId, readOnly }, convertedForm); } return
; -}; +}); diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx index 3a6086c437b..9930314b0ab 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx @@ -30,33 +30,12 @@ const isFormRefreshedEventPayload = (payload: GQLDetailsEventPayload): payload i export const DetailsView = ({ editingContextId, readOnly }: WorkbenchViewComponentProps) => { const [state, setState] = useState({ - currentSelection: { entries: [] }, form: null, }); const { selection } = useSelection(); - /** - * Displays another form if the selection indicates that we should display another properties view. - */ - const currentSelectionKey: string = state.currentSelection.entries - .map((entry) => entry.id) - .sort() - .join(':'); - const newSelectionKey: string = selection.entries - .map((entry) => entry.id) - .sort() - .join(':'); - - useEffect(() => { - if (selection.entries.length > 0 && currentSelectionKey !== newSelectionKey) { - setState((prevState) => ({ ...prevState, currentSelection: selection })); - } else if (selection.entries.length === 0) { - setState((prevState) => ({ ...prevState, currentSelection: { entries: [] } })); - } - }, [currentSelectionKey, newSelectionKey]); - - const objectIds: string[] = state.currentSelection.entries.map((entry) => entry.id); + const objectIds: string[] = selection.entries.map((entry) => entry.id); const skip = objectIds.length === 0; const { payload, complete } = useDetailsViewSubscription(editingContextId, objectIds, skip); diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.types.ts b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.types.ts index 7cee0ab6710..406aa1f16f6 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.types.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.types.ts @@ -11,10 +11,8 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { Selection } from '@eclipse-sirius/sirius-components-core'; import { GQLForm } from '@eclipse-sirius/sirius-components-forms'; export interface DetailsViewState { - currentSelection: Selection; form: GQLForm | null; }