[4208] Improve performance of details view rendering on selection change

Bug: #4208
Signed-off-by: Denis Nikiforov <[email protected]>

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

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<FormConverter[]> = useData(formBasedViewFormConverterExtensionPoint);
 
   let convertedForm: GQLForm = form;
@@ -31,4 +32,4 @@ export const FormBasedView = ({ editingContextId, form, readOnly, postProcessor
     return postProcessor({ editingContextId, readOnly }, convertedForm);
   }
   return <Form editingContextId={editingContextId} form={convertedForm} readOnly={readOnly} />;
-};
+});

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<DetailsViewState>({
-    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);
 

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;
 }