[5726] Virtualize search results list to improve performance

Bug: #5726
Signed-off-by: Pierre-Charles David <[email protected]>

Author: pcdavid

CHANGELOG.adoc

@@ -108,7 +108,7 @@ This mechanisms was previously used to provide the menu entry to update/remove a
 - [releng] Switch to AQL 8.1.0 from https://download.eclipse.org/acceleo/updates/releases/4.2/R202510230846/[Acceleo 4.2.0].
 This also includes an update from ANTLR 4.10.1 to 4.13.2.
 - https://github.com/eclipse-sirius/sirius-web/issues/5653[#5653] Add a dependency to `spring-boot-starter-data-elasticsearch` in `sirius-web-infrastructure`
-
+- [releng] Switch to react-window 2.2.2.
 
 === Bug fixes
 
@@ -195,8 +195,7 @@ This will allow to integrate the command palette in other contexts than the work
 As a result, some of those menu items are not contributed anymore on invalid use cases such as being able to create a new object in a read only library.
 - https://github.com/eclipse-sirius/sirius-web/issues/5702[#5702] [table] Improve the rendering of components used in table cells
 - https://github.com/eclipse-sirius/sirius-web/issues/5788[#5788] [sirius-web] Add resource changes in the impact analysis tree.
-
-
+- https://github.com/eclipse-sirius/sirius-web/issues/5726[#5726] [sirius-web] Virtualize the display of search results to improve performance on large result sets
 
 
 == 2025.10.0

package-lock.json

@@ -73,7 +73,7 @@
     "react-dom": "18.3.1",
     "react-i18next": "16.2.3",
     "react-router-dom": "6.26.0",
-    "react-window": "1.8.11",
+    "react-window": "2.2.2",
     "@xyflow/react": "12.6.0",
     "tss-react": "4.9.16",
     "react-resizable-panels": "3.0.2"
@@ -129,7 +129,7 @@
     "react-dom": "18.3.1",
     "react-i18next": "16.2.3",
     "react-router-dom": "6.26.0",
-    "react-window": "1.8.11",
+    "react-window": "2.2.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "react-resizable-panels": "3.0.2",
     "typescript": "5.4.5",

packages/sirius-web/frontend/sirius-web-application/package.json

@@ -43,7 +43,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { List as FixedSizeList, RowComponentProps } from 'react-window';
 import { makeStyles } from 'tss-react/mui';
 import { useCurrentProject } from '../../useCurrentProject';
 import { SynchronizationButton } from '../SynchronizationButton';
@@ -60,14 +60,14 @@ import { useEvaluateExpression } from './useEvaluateExpression';
 import {
   GQLBooleanExpressionResult,
   GQLIntExpressionResult,
+  GQLObject,
   GQLObjectExpressionResult,
   GQLObjectsExpressionResult,
   GQLStringExpressionResult,
   GQLStringsExpressionResult,
 } from './useEvaluateExpression.types';
 import { useExpression } from './useExpression';
 import { useQueryViewHandle } from './useQueryViewHandle';
-import { useResultAreaSize } from './useResultAreaSize';
 
 const useQueryViewStyles = makeStyles()((theme) => ({
   view: {
@@ -92,6 +92,9 @@ const useQueryViewStyles = makeStyles()((theme) => ({
   },
   content: {
     overflow: 'auto',
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: '1fr',
   },
 }));
 
@@ -105,6 +108,7 @@ export const QueryView = forwardRef<WorkbenchViewHandle, WorkbenchViewComponentP
       flexDirection: 'column',
       gap: theme.spacing(2),
       paddingX: theme.spacing(1),
+      overflow: 'auto',
     });
 
     const [state, setState] = useState<QueryViewState>({
@@ -134,8 +138,6 @@ export const QueryView = forwardRef<WorkbenchViewHandle, WorkbenchViewComponentP
     const { evaluateExpression, loading, result } = useEvaluateExpression(state.objectIds);
     const handleEvaluateExpression = (expression: string) => evaluateExpression(editingContextId, expression);
 
-    const { ref: resultAreaRef, width, height } = useResultAreaSize();
-
     const initialQueryViewConfiguration: QueryViewConfiguration =
       initialConfiguration as unknown as QueryViewConfiguration;
     const initialQueryText = initialQueryViewConfiguration?.queryText ?? null;
@@ -148,15 +150,15 @@ export const QueryView = forwardRef<WorkbenchViewHandle, WorkbenchViewComponentP
     );
 
     const contents: JSX.Element = (
-      <Box data-representation-kind="query" sx={queryViewStyle} ref={resultAreaRef}>
+      <Box data-representation-kind="query" sx={queryViewStyle}>
         <ExpressionArea
           editingContextId={editingContextId}
           initialQueryText={initialQueryText}
           onEvaluateExpression={handleEvaluateExpression}
           disabled={loading || readOnly}
           ref={expressionAreaRef}
         />
-        <ResultArea loading={loading} payload={result} width={width} height={height} />
+        <ResultArea loading={loading} payload={result} />
       </Box>
     );
     return (
@@ -254,11 +256,11 @@ const ObjectExpressionResultViewer = ({ result }: ExpressionResultViewerProps) =
     minWidth: '0px',
   });
   return (
-    <Box>
+    <Box sx={{ overflow: 'auto' }}>
       <Typography variant="body2" gutterBottom>
         One object has been returned
       </Typography>
-      <Box sx={(theme) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(1) })}>
+      <Box sx={(theme) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(1), overflow: 'auto' })}>
         <List dense>
           <ListItem sx={listItemStyle}>
             <ListItemIcon sx={listItemIconStyle}>
@@ -275,7 +277,7 @@ const ObjectExpressionResultViewer = ({ result }: ExpressionResultViewerProps) =
   );
 };
 
-const ObjectRow = ({ data, index, style }: ListChildComponentProps) => {
+const ObjectRow = ({ data, index, style }: RowComponentProps<{ data: GQLObject[] }>) => {
   const listItemStyle: SxProps<Theme> = (theme) => ({
     gap: theme.spacing(2),
   });
@@ -295,7 +297,7 @@ const ObjectRow = ({ data, index, style }: ListChildComponentProps) => {
   );
 };
 
-const ObjectsExpressionResultViewer = ({ result, width, height }: ExpressionResultViewerProps) => {
+const ObjectsExpressionResultViewer = ({ result }: ExpressionResultViewerProps) => {
   if (result.__typename !== 'ObjectsExpressionResult') {
     return null;
   }
@@ -305,23 +307,22 @@ const ObjectsExpressionResultViewer = ({ result, width, height }: ExpressionResu
   const listStyle: SxProps<Theme> = (theme) => ({
     border: `1px solid ${theme.palette.divider}`,
     marginBottom: '1px',
+    overflow: 'auto',
   });
 
   return (
-    <Box>
+    <Box sx={{ overflow: 'auto' }}>
       <Typography variant="body2" gutterBottom>
         A collection of {objectsValue.length} object{objectsValue.length > 1 ? 's' : ''} has been returned
       </Typography>
-      <Box sx={(theme) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(1) })}>
+      <Box sx={(theme) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(1), overflow: 'auto' })}>
         <List dense disablePadding sx={listStyle}>
           <FixedSizeList
-            height={height}
-            width={width}
-            itemData={objectsValue}
-            itemCount={objectsValue.length}
-            itemSize={34}>
-            {ObjectRow}
-          </FixedSizeList>
+            rowComponent={ObjectRow}
+            rowProps={{ data: objectsValue }}
+            rowCount={objectsValue.length}
+            rowHeight={34}
+          />
         </List>
         <Box sx={{ display: 'flex', flexDirection: 'row' }}>
           <ExportResultButton objectIds={objectsValue.map((objectValue) => objectValue.id)} />
@@ -351,7 +352,7 @@ const BooleanExpressionResultViewer = ({ result }: ExpressionResultViewerProps)
   );
 };
 
-const StringRow = ({ data, index, style }: ListChildComponentProps) => {
+const StringRow = ({ data, index, style }: RowComponentProps<{ data: string[] }>) => {
   const listItemStyle: SxProps<Theme> = (theme) => ({
     gap: theme.spacing(2),
   });
@@ -365,7 +366,7 @@ const StringRow = ({ data, index, style }: ListChildComponentProps) => {
   );
 };
 
-const StringsExpressionResultViewer = ({ result, width, height }: ExpressionResultViewerProps) => {
+const StringsExpressionResultViewer = ({ result }: ExpressionResultViewerProps) => {
   if (result.__typename !== 'StringsExpressionResult') {
     return null;
   }
@@ -383,13 +384,11 @@ const StringsExpressionResultViewer = ({ result, width, height }: ExpressionResu
       </Typography>
       <List dense disablePadding sx={listStyle}>
         <FixedSizeList
-          height={height}
-          width={width}
-          itemData={stringsValue}
-          itemCount={stringsValue.length}
-          itemSize={34}>
-          {StringRow}
-        </FixedSizeList>
+          rowComponent={StringRow}
+          rowProps={{ data: stringsValue }}
+          rowCount={stringsValue.length}
+          rowHeight={34}
+        />
       </List>
     </Box>
   );
@@ -484,12 +483,13 @@ const LoadingViewer = () => {
   );
 };
 
-const ResultArea = ({ loading, payload, width, height }: ResultAreaProps) => {
+const ResultArea = ({ loading, payload }: ResultAreaProps) => {
   const resultAreaToolbarStyle: SxProps<Theme> = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
+    overflow: 'auto',
   };
 
   const titleAreaStyle: SxProps<Theme> = {
@@ -503,14 +503,14 @@ const ResultArea = ({ loading, payload, width, height }: ResultAreaProps) => {
   } else if (payload) {
     const Viewer = resultType2viewer[payload.result.__typename];
     if (Viewer) {
-      content = <Viewer result={payload.result} width={width} height={height} />;
+      content = <Viewer result={payload.result} />;
     } else {
       content = <Typography variant="body2">The expression has returned a result that is not supported</Typography>;
     }
   }
 
   return (
-    <div data-role="result">
+    <div data-role="result" style={{ overflow: 'auto' }}>
       <Box sx={resultAreaToolbarStyle}>
         <Box sx={titleAreaStyle}>
           <Typography variant="subtitle2">Evaluation result</Typography>

packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/query/QueryView.tsx

@@ -36,14 +36,10 @@ export interface ExpressionAreaHandle {
 export interface ResultAreaProps {
   loading: boolean;
   payload: GQLEvaluateExpressionSuccessPayload | null;
-  height: number | null;
-  width: number | null;
 }
 
 export interface ExpressionResultViewerProps {
   result: GQLExpressionResult;
-  height: number | null;
-  width: number | null;
 }
 
 export interface ExportResultButtonProps {