fix(AnalyticalTable): improve sub-component size calculation & performance (#1461)

Author: Lukas742

packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from 'react';
+import { VirtualItem } from 'react-virtual';
+
+interface RowSubComponent {
+  subComponentsHeight: Record<string, { rowId: string; subComponentHeight?: number }>;
+  virtualRow: VirtualItem;
+  dispatch: (e: { type: string; payload?: any }) => void;
+  row: any;
+  rowHeight: number;
+  children: any;
+  rows: any[];
+  alwaysShowSubComponent: boolean;
+}
+
+export const RowSubComponent = (props: RowSubComponent) => {
+  const { subComponentsHeight, virtualRow, dispatch, row, rowHeight, children, rows, alwaysShowSubComponent } = props;
+  const subComponentRef = useRef(null);
+
+  useEffect(() => {
+    const subComponentHeightObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.borderBoxSize) {
+          // Firefox implements `borderBoxSize` as a single content rect, rather than an array
+          const borderBoxSize = Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize;
+          if (
+            subComponentsHeight?.[virtualRow.index]?.subComponentHeight !== borderBoxSize.blockSize &&
+            borderBoxSize.blockSize !== 0
+          ) {
+            // use most common sub-component height of first 10 sub-components as default height
+            if (alwaysShowSubComponent && subComponentsHeight && Object.keys(subComponentsHeight).length === 10) {
+              const objGroupedByHeight = Object.values(subComponentsHeight).reduce((acc, cur) => {
+                const count = acc?.[cur.subComponentHeight];
+                if (typeof count === 'number') {
+                  return { ...acc, [cur.subComponentHeight]: count + 1 };
+                }
+                return { ...acc, [cur.subComponentHeight]: 1 };
+              }, {});
+
+              const mostUsedHeight = Object.keys(objGroupedByHeight).reduce((a, b) =>
+                objGroupedByHeight[a] > objGroupedByHeight[b] ? a : b
+              );
+              const estimatedHeights = rows.reduce((acc, cur, index) => {
+                acc[index] = { subComponentHeight: parseInt(mostUsedHeight), rowId: cur.id };
+                return acc;
+              }, {});
+              dispatch({
+                type: 'SUB_COMPONENTS_HEIGHT',
+                payload: { ...estimatedHeights, ...subComponentsHeight }
+              });
+            } else {
+              dispatch({
+                type: 'SUB_COMPONENTS_HEIGHT',
+                payload: {
+                  ...subComponentsHeight,
+                  [virtualRow.index]: { subComponentHeight: borderBoxSize.blockSize, rowId: row.id }
+                }
+              });
+            }
+          }
+        }
+      });
+    });
+    if (subComponentRef.current?.firstChild) {
+      subComponentHeightObserver.observe(subComponentRef.current?.firstChild);
+    }
+    return () => {
+      subComponentHeightObserver.disconnect();
+    };
+  }, [
+    subComponentRef.current?.firstChild,
+    subComponentsHeight,
+    row.id,
+    subComponentsHeight?.[virtualRow.index]?.subComponentHeight,
+    virtualRow.index
+  ]);
+
+  return (
+    <div
+      ref={subComponentRef}
+      style={{
+        transform: `translateY(${rowHeight}px)`,
+        position: 'absolute',
+        width: '100%'
+      }}
+    >
+      {children}
+    </div>
+  );
+};

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx

@@ -3,6 +3,7 @@ import '@ui5/webcomponents-icons/dist/navigation-right-arrow';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/dist/useConsolidatedRef';
 import React, { MutableRefObject, ReactNode, useCallback, useMemo, useRef } from 'react';
 import { useVirtual } from 'react-virtual';
+import { RowSubComponent as SubComponent } from './RowSubComponent';
 
 interface VirtualTableBodyProps {
   classes: Record<string, string>;
@@ -191,17 +192,6 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     >
       {rowVirtualizer.virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
-        const setSubcomponentsRefs = (el) => {
-          if (el?.offsetHeight && subComponentsHeight?.[virtualRow.index]?.subComponentHeight !== el?.offsetHeight) {
-            dispatch({
-              type: 'SUB_COMPONENTS_HEIGHT',
-              payload: {
-                ...subComponentsHeight,
-                [virtualRow.index]: { subComponentHeight: el?.offsetHeight, rowId: row.id }
-              }
-            });
-          }
-        };
         if (!row) {
           return (
             <div
@@ -217,7 +207,18 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
         prepareRow(row);
         const rowProps = row.getRowProps();
         const isNavigatedCell = markNavigatedRow(row);
-        const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : null;
+        const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : undefined;
+
+        if (!RowSubComponent && subComponentsHeight && subComponentsHeight?.[virtualRow.index]?.subComponentHeight) {
+          dispatch({
+            type: 'SUB_COMPONENTS_HEIGHT',
+            payload: {
+              ...subComponentsHeight,
+              [virtualRow.index]: { subComponentHeight: 0, rowId: row.id }
+            }
+          });
+        }
+
         return (
           <div
             {...rowProps}
@@ -228,16 +229,17 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
             }}
           >
             {RowSubComponent && (row.isExpanded || alwaysShowSubComponent) && (
-              <div
-                ref={setSubcomponentsRefs}
-                style={{
-                  transform: `translateY(${rowHeight}px)`,
-                  position: 'absolute',
-                  width: '100%'
-                }}
+              <SubComponent
+                subComponentsHeight={subComponentsHeight}
+                virtualRow={virtualRow}
+                dispatch={dispatch}
+                row={row}
+                rowHeight={rowHeight}
+                rows={rows}
+                alwaysShowSubComponent={alwaysShowSubComponent}
               >
                 {RowSubComponent}
-              </div>
+              </SubComponent>
             )}
             {columnVirtualizer.virtualItems.map((virtualColumn, index) => {
               const cell = row.cells[virtualColumn.index];