diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index c8e9889bbc..26735fee71 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -125,6 +125,7 @@ This is now fixed These components could be reused by downstream applications in custom creation tool. - https://github.com/eclipse-sirius/sirius-web/issues/4330[#4330] [diagram] Improve responsiveness when executing a tool from the palette - https://github.com/eclipse-sirius/sirius-web/issues/4333[#4333] [diagram] Improve the style of the palette by switching the positions of the search field and the quick access tools and by adding a small touch of grey in the header bar and search field +- https://github.com/eclipse-sirius/sirius-web/issues/4208[#4208] [form] Improve performance of details view rendering on selection change == v2024.11.0 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 77895bddb8..6b284925e0 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 23a6351f86..94d8c07ec6 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 7cee0ab671..406aa1f16f 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; }