[3895] Memoize the explorer

CHANGELOG.adoc

@@ -117,6 +117,7 @@ This will allow specifier to create images that fir perfectly in the project tem
 - https://github.com/eclipse-sirius/sirius-web/issues/2163[#2163] [form] Make EMF default form support non changeable features
 - https://github.com/eclipse-sirius/sirius-web/issues/4086[#4086] [form] Wrap widget returned by property section in a div with a specific classname
 - https://github.com/eclipse-sirius/sirius-web/issues/4088[#4088] Change tree item context menu entries internal management
+- https://github.com/eclipse-sirius/sirius-web/issues/3895[#3895] [trees] Memoize the explorer
 
 
 == v2024.9.0

packages/core/frontend/sirius-components-core/src/label/StyledLabel.tsx

@@ -12,6 +12,7 @@
  *******************************************************************************/
 import Typography from '@mui/material/Typography';
 import { Theme } from '@mui/material/styles';
+import { memo } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { GQLStyledString, GQLStyledStringFragmentStyle, StyledLabelInputProps } from './StyledLabel.type';
 
@@ -131,7 +132,7 @@ const getStyledString = (styledString: GQLStyledString) => {
   });
 };
 
-export const StyledLabel = ({ styledString, selected, textToHighlight, marked }: StyledLabelInputProps) => {
+export const StyledLabel = memo(({ styledString, selected, textToHighlight, marked }: StyledLabelInputProps) => {
   const { classes } = useTreeItemStyle();
   const textLabel = getTextFromStyledString(styledString);
   let itemLabel: JSX.Element;
@@ -172,4 +173,4 @@ export const StyledLabel = ({ styledString, selected, textToHighlight, marked }:
       </Typography>
     </>
   );
-};
+});

packages/core/frontend/sirius-components-core/src/workbench/Workbench.types.ts

@@ -38,7 +38,7 @@ export interface WorkbenchViewContribution {
   side: WorkbenchViewSide;
   title: string;
   icon: React.ReactElement;
-  component: (props: WorkbenchViewComponentProps) => JSX.Element | null;
+  component: React.ComponentType<WorkbenchViewComponentProps>;
 }
 
 export interface WorkbenchViewComponentProps {

packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx

@@ -14,7 +14,7 @@
 import { TreeItemActionProps, TreeView } from '@eclipse-sirius/sirius-components-trees';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import IconButton from '@mui/material/IconButton';
-import { useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { ModelBrowserFilterBar } from './ModelBrowserFilterBar';
 import { ModelBrowserTreeViewProps, ModelBrowserTreeViewState } from './ModelBrowserTreeView.types';
@@ -57,9 +57,9 @@ export const ModelBrowserTreeView = ({
   }&descriptionId=${encodeURIComponent(widget.descriptionId)}&isContainment=${widget.reference.containment}`;
   const { tree } = useModelBrowserSubscription(editingContextId, treeId, state.expanded, state.maxDepth);
 
-  const onExpandedElementChange = (expanded: string[], maxDepth: number) => {
+  const onExpandedElementChange = useCallback((expanded: string[], maxDepth: number) => {
     setState((prevState) => ({ ...prevState, expanded, maxDepth }));
-  };
+  }, []);
 
   return (
     <>
@@ -92,7 +92,7 @@ export const ModelBrowserTreeView = ({
   );
 };
 
-const WidgetReferenceTreeItemAction = ({ onExpandAll, item, isHovered }: TreeItemActionProps) => {
+const WidgetReferenceTreeItemAction = memo(({ onExpandAll, item, isHovered }: TreeItemActionProps) => {
   if (!onExpandAll || !item || !item.hasChildren || !isHovered) {
     return null;
   }
@@ -107,4 +107,4 @@ const WidgetReferenceTreeItemAction = ({ onExpandAll, item, isHovered }: TreeIte
       <UnfoldMoreIcon style={{ fontSize: 12 }} />
     </IconButton>
   );
-};
+});

packages/forms/frontend/sirius-components-widget-reference/src/modals/BrowseModal.tsx

@@ -17,8 +17,8 @@ import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
+import { useMemo, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
-import { useState } from 'react';
 import { ModelBrowserTreeView } from '../components/ModelBrowserTreeView';
 import { BrowseModalProps } from './BrowseModal.types';
 
@@ -32,6 +32,8 @@ export const BrowseModal = ({ editingContextId, widget, onClose }: BrowseModalPr
   const { classes: styles } = useBrowserModalStyles();
   const [browserSelection, setBrowserSelection] = useState<Selection>({ entries: widget.referenceValues });
 
+  const markedItemIds = useMemo(() => [], []);
+
   return (
     <SelectionContext.Provider
       value={{
@@ -49,7 +51,7 @@ export const BrowseModal = ({ editingContextId, widget, onClose }: BrowseModalPr
           <ModelBrowserTreeView
             editingContextId={editingContextId}
             widget={widget}
-            markedItemIds={[]}
+            markedItemIds={markedItemIds}
             enableMultiSelection={widget.reference.manyValued}
             title={'Choices'}
             leafType={'reference'}

packages/forms/frontend/sirius-components-widget-reference/src/modals/CreateModal.tsx

@@ -22,7 +22,7 @@ import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import { useMachine } from '@xstate/react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { StateMachine } from 'xstate';
 import { ModelBrowserTreeView } from '../components/ModelBrowserTreeView';
@@ -378,6 +378,8 @@ export const CreateModal = ({ editingContextId, widget, onClose, formId }: Creat
     dispatch(changeContainerSelectionEvent);
   };
 
+  const markedItemIds = useMemo(() => [], []);
+
   return (
     <SelectionContext.Provider
       value={{
@@ -396,7 +398,7 @@ export const CreateModal = ({ editingContextId, widget, onClose, formId }: Creat
             <ModelBrowserTreeView
               editingContextId={editingContextId}
               widget={widget}
-              markedItemIds={[]}
+              markedItemIds={markedItemIds}
               enableMultiSelection={false}
               title={'Select the container'}
               leafType={'container'}

packages/selection/frontend/sirius-components-selection/src/SelectionDialogTreeView.tsx

@@ -14,7 +14,7 @@ import { DiagramDialogVariable } from '@eclipse-sirius/sirius-components-diagram
 import { TreeItemActionProps, TreeView } from '@eclipse-sirius/sirius-components-trees';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import IconButton from '@mui/material/IconButton';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { SelectionDialogTreeViewProps, SelectionDialogTreeViewState } from './SelectionDialogTreeView.types';
 import { useSelectionDialogTreeSubscription } from './useSelectionDialogTreeSubscription';
@@ -47,9 +47,9 @@ export const SelectionDialogTreeView = ({
   const treeId = `selection://?treeDescriptionId=${encodeURIComponent(treeDescriptionId)}${encodeVariables(variables)}`;
   const { tree } = useSelectionDialogTreeSubscription(editingContextId, treeId, state.expanded, state.maxDepth);
 
-  const onExpandedElementChange = (expanded: string[], maxDepth: number) => {
+  const onExpandedElementChange = useCallback((expanded: string[], maxDepth: number) => {
     setState((prevState) => ({ ...prevState, expanded, maxDepth }));
-  };
+  }, []);
 
   return (
     <div className={classes.borderStyle}>

packages/sirius-web/frontend/sirius-web-application/src/views/explorer/ExplorerView.tsx

@@ -21,7 +21,7 @@ import {
   useTreeFilters,
 } from '@eclipse-sirius/sirius-components-trees';
 import { Theme } from '@mui/material/styles';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { ExplorerViewState } from './ExplorerView.types';
 import { TreeDescriptionsMenu } from './TreeDescriptionsMenu';
@@ -40,11 +40,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
     overflow: 'auto',
   },
 }));
-
 const isTreeRefreshedEventPayload = (payload: GQLTreeEventPayload): payload is GQLTreeRefreshedEventPayload =>
   payload && payload.__typename === 'TreeRefreshedEventPayload';
 
-export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewComponentProps) => {
+export const ExplorerView = memo(({ editingContextId, readOnly }: WorkbenchViewComponentProps) => {
   const { classes: styles } = useStyles();
 
   const initialState: ExplorerViewState = {
@@ -58,6 +57,7 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
     maxDepth: {},
     tree: null,
   };
+
   const [state, setState] = useState<ExplorerViewState>(initialState);
   const treeToolBarContributionComponents = useContext<TreeToolBarContextValue>(TreeToolBarContext).map(
     (contribution) => contribution.props.component
@@ -146,7 +146,8 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
       />
     );
   }
-  const onExpandedElementChange = (expanded: string[], maxDepth: number) => {
+
+  const onExpandedElementChange = useCallback((expanded: string[], maxDepth: number) => {
     setState((prevState) => ({
       ...prevState,
       expanded: {
@@ -158,7 +159,7 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
         [prevState.activeTreeDescriptionId]: maxDepth,
       },
     }));
-  };
+  }, []);
 
   const treeDescriptionSelector: JSX.Element = explorerDescriptions.length > 1 && (
     <TreeDescriptionsMenu
@@ -200,7 +201,7 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
           <TreeView
             editingContextId={editingContextId}
             readOnly={readOnly}
-            treeId={'explorer://'}
+            treeId="'explorer://"
             tree={state.tree}
             enableMultiSelection={true}
             synchronizedWithSelection={state.synchronizedWithSelection}
@@ -214,4 +215,4 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
       </div>
     </div>
   );
-};
+});

packages/trees/frontend/sirius-components-trees/package.json

@@ -34,8 +34,8 @@
   "peerDependencies": {
     "@apollo/client": "3.10.4",
     "@eclipse-sirius/sirius-components-core": "*",
-    "@mui/material": "5.15.19",
     "@mui/icons-material": "5.15.19",
+    "@mui/material": "5.15.19",
     "@xstate/react": "3.0.0",
     "graphql": "16.8.1",
     "react": "18.3.1",
@@ -47,22 +47,25 @@
     "@apollo/client": "3.10.4",
     "@eclipse-sirius/sirius-components-core": "*",
     "@eclipse-sirius/sirius-components-tsconfig": "*",
-    "@mui/material": "5.15.19",
     "@mui/icons-material": "5.15.19",
+    "@mui/material": "5.15.19",
     "@types/react": "18.3.3",
     "@vitejs/plugin-react": "4.3.0",
-    "@xstate/react": "3.0.0",
     "@vitest/coverage-v8": "1.6.0",
-    "jsdom": "16.7.0",
+    "@xstate/react": "3.0.0",
     "graphql": "16.8.1",
+    "jsdom": "16.7.0",
+    "prettier": "2.7.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "prettier": "2.7.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
-    "xstate": "4.32.1",
     "tss-react": "4.9.7",
     "typescript": "5.4.5",
     "vite": "5.2.11",
-    "vitest": "1.6.0"
+    "vitest": "1.6.0",
+    "xstate": "4.32.1"
+  },
+  "dependencies": {
+    "zustand": "^5.0.0"
   }
 }

packages/trees/frontend/sirius-components-trees/src/store/treeStore.ts

@@ -0,0 +1,28 @@
+import { create } from 'zustand';
+
+export type StoreType = {
+  expanded: string[];
+  maxDepth: number;
+  updateMaxDepth: (maxDepth) => void;
+  updateExpended: (newExpended) => void;
+  onExpand: (id, depth) => void;
+};
+
+export const useTreeStore = create<StoreType>((set, get) => ({
+  expanded: [],
+  maxDepth: 0,
+  updateMaxDepth: (newMaxDepth) => set(() => ({ maxDepth: newMaxDepth })),
+  updateExpended: (newExpended) => set(() => ({ expanded: newExpended })),
+  onExpand: (id, depth) => {
+    console.log('onExpand ' + id + ' - ' + depth);
+    const currentExpanded = get().expanded;
+    const currentMaxDepth = get().maxDepth;
+    if (currentExpanded.includes(id)) {
+      const newExpanded = [...currentExpanded];
+      newExpanded.splice(newExpanded.indexOf(id), 1);
+      set((state) => ({ ...state, expanded: newExpanded, maxDepth: Math.max(currentMaxDepth, depth) }));
+    } else {
+      set((state) => ({ ...state, expanded: [...currentExpanded, id], maxDepth: Math.max(currentMaxDepth, depth) }));
+    }
+  },
+}));