feat: improve tree performance

Signed-off-by: Maxim Stykow <maxim.stykow@tngtech.com>

Author: mstykow

src/Frontend/Components/CardList/CardList.tsx

@@ -10,7 +10,7 @@ import { LIST_CARD_HEIGHT } from '../ListCard/ListCard';
 
 const MAX_NUMBER_OF_CARDS = 4;
 
-export const CardList = styled(List<string>)(({ data }) => {
+export const CardList = styled(List)(({ data }) => {
   const height =
     Math.min(MAX_NUMBER_OF_CARDS, data?.length ?? 0) * (LIST_CARD_HEIGHT + 1) +
     1;

src/Frontend/Components/GroupedList/GroupedList.tsx

@@ -23,18 +23,18 @@ import { LoadingMask } from '../LoadingMask/LoadingMask';
 import { NoResults } from '../NoResults/NoResults';
 import { GroupContainer, StyledLinearProgress } from './GroupedList.style';
 
-export interface GroupedListProps<D> {
+export interface GroupedListProps {
   className?: string;
-  grouped: Record<string, ReadonlyArray<D>> | null;
+  grouped: Record<string, ReadonlyArray<string>> | null;
   loading?: boolean;
   renderGroupName?: (key: string) => React.ReactNode;
-  renderItemContent: (datum: D, index: number) => React.ReactNode;
-  selected?: D;
+  renderItemContent: (datum: string, index: number) => React.ReactNode;
+  selected?: string;
   sx?: SxProps;
   testId?: string;
 }
 
-export function GroupedList<D>({
+export function GroupedList({
   className,
   grouped,
   loading,
@@ -44,7 +44,7 @@ export function GroupedList<D>({
   sx,
   testId,
   ...props
-}: GroupedListProps<D> & Omit<GroupedVirtuosoProps<D, unknown>, 'selected'>) {
+}: GroupedListProps & Omit<GroupedVirtuosoProps<string, unknown>, 'selected'>) {
   const ref = useRef<GroupedVirtuosoHandle>(null);
   const [{ startIndex, endIndex }, setRange] = useState<{
     startIndex: number;
@@ -62,7 +62,7 @@ export function GroupedList<D>({
       ids: flattened,
       keys: Object.keys(grouped),
       counts: Object.values(grouped).map((group) => group.length),
-      selectedIndex: flattened.findIndex((id) => id === selected),
+      selectedIndex: flattened.findIndex((datum) => datum === selected),
     };
   }, [grouped, selected]);
 

src/Frontend/Components/List/List.tsx

@@ -3,25 +3,25 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 import { SxProps } from '@mui/system';
-import { defer, isEqual } from 'lodash';
+import { defer } from 'lodash';
 import { useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
 
 import { LoadingMask } from '../LoadingMask/LoadingMask';
 import { NoResults } from '../NoResults/NoResults';
 import { StyledLinearProgress } from './List.style';
 
-export interface ListProps<D> {
+export interface ListProps {
   className?: string;
-  data: ReadonlyArray<D> | null;
+  data: ReadonlyArray<string> | null;
   loading?: boolean;
-  renderItemContent: (datum: D, index: number) => React.ReactNode;
-  selected?: D;
+  renderItemContent: (datum: string, index: number) => React.ReactNode;
+  selected?: string;
   sx?: SxProps;
   testId?: string;
 }
 
-export function List<D>({
+export function List({
   className,
   data,
   loading,
@@ -30,15 +30,15 @@ export function List<D>({
   sx,
   testId,
   ...props
-}: ListProps<D> & Omit<VirtuosoProps<D, unknown>, 'data' | 'selected'>) {
+}: ListProps & Omit<VirtuosoProps<string, unknown>, 'data' | 'selected'>) {
   const ref = useRef<VirtuosoHandle>(null);
 
   const selectedIndex = useMemo(() => {
     if (!data) {
       return undefined;
     }
 
-    return data.findIndex((datum) => isEqual(datum, selected));
+    return data.findIndex((datum) => datum === selected);
   }, [data, selected]);
 
   useEffect(() => {

src/Frontend/Components/ResourceBrowser/LinkedResourcesTree/GeneralTreeItemLabel/GeneralTreeItemLabel.tsx

@@ -6,18 +6,13 @@ import { SxProps } from '@mui/system';
 import { remove } from 'lodash';
 import { useCallback, useEffect, useState } from 'react';
 
-import { ROOT_PATH } from '../../../shared-constants';
 import { OpossumColors } from '../../../shared-styles';
 import { navigateToSelectedPathOrOpenUnsavedPopup } from '../../../state/actions/popup-actions/popup-actions';
 import { getInitialExpandedIds } from '../../../state/helpers/resources-helpers';
 import { useAppDispatch, useAppSelector } from '../../../state/hooks';
-import {
-  getAttributionBreakpoints,
-  getFilesWithChildren,
-  getSelectedResourceId,
-} from '../../../state/selectors/resource-selectors';
+import { getSelectedResourceId } from '../../../state/selectors/resource-selectors';
 import { VirtualizedTree } from '../../VirtualizedTree/VirtualizedTree';
-import { GeneralTreeItemLabel } from './GeneralTreeItemLabel/GeneralTreeItemLabel';
+import { LinkedResourcesTreeNode } from './LinkedResourcesTreeNode/LinkedResourcesTreeNode';
 
 interface Props {
   disableHighlightSelected?: boolean;
@@ -33,8 +28,6 @@ export function LinkedResourcesTree({
   sx,
 }: Props) {
   const dispatch = useAppDispatch();
-  const filesWithChildren = useAppSelector(getFilesWithChildren);
-  const attributionBreakpoints = useAppSelector(getAttributionBreakpoints);
   const selectedResourceId = useAppSelector(getSelectedResourceId);
 
   const [expandedIds, setExpandedIds] = useState<Array<string>>([]);
@@ -80,14 +73,7 @@ export function LinkedResourcesTree({
       resourceIds={resourceIds}
       selectedNodeId={disableHighlightSelected ? '' : selectedResourceId}
       readOnly={readOnly}
-      getTreeNodeLabel={({ node, nodeId, nodeName }) => (
-        <GeneralTreeItemLabel
-          labelText={nodeName || ROOT_PATH}
-          canHaveChildren={node !== 1}
-          isAttributionBreakpoint={attributionBreakpoints.has(nodeId)}
-          showFolderIcon={node !== 1 && !filesWithChildren.has(nodeId)}
-        />
-      )}
+      TreeNodeLabel={LinkedResourcesTreeNode}
       testId={'linked-resources-tree'}
     />
   );

src/Frontend/Components/ResourceBrowser/LinkedResourcesTree/GeneralTreeItemLabel/__tests__/GeneralTreeItemLabel.test.tsx

@@ -0,0 +1,60 @@
+// SPDX-FileCopyrightText: Meta Platforms, Inc. and its affiliates
+// SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
+//
+// SPDX-License-Identifier: Apache-2.0
+import MuiBox from '@mui/material/Box';
+import MuiTypography from '@mui/material/Typography';
+import { ReactElement } from 'react';
+
+import { ROOT_PATH } from '../../../../shared-constants';
+import { treeItemClasses } from '../../../../shared-styles';
+import { useAppSelector } from '../../../../state/hooks';
+import {
+  getAttributionBreakpoints,
+  getFilesWithChildren,
+} from '../../../../state/selectors/resource-selectors';
+import { BreakpointIcon, DirectoryIcon, FileIcon } from '../../../Icons/Icons';
+import { TreeNode } from '../../../VirtualizedTree/VirtualizedTreeNode/VirtualizedTreeNode';
+
+const labelDetail = 'without information';
+
+export function LinkedResourcesTreeNode({
+  node,
+  nodeId,
+  nodeName,
+}: TreeNode): ReactElement {
+  const attributionBreakpoints = useAppSelector(getAttributionBreakpoints);
+  const filesWithChildren = useAppSelector(getFilesWithChildren);
+
+  const isAttributionBreakpoint = attributionBreakpoints.has(nodeId);
+  const showFolderIcon = node !== 1 && !filesWithChildren.has(nodeId);
+  const labelText = nodeName || ROOT_PATH;
+
+  return (
+    <MuiBox sx={treeItemClasses.labelRoot}>
+      {showFolderIcon ? (
+        isAttributionBreakpoint ? (
+          <BreakpointIcon />
+        ) : (
+          <DirectoryIcon
+            sx={treeItemClasses.resourceWithoutInformation}
+            labelDetail={labelDetail}
+          />
+        )
+      ) : (
+        <FileIcon
+          sx={treeItemClasses.resourceWithoutInformation}
+          labelDetail={labelDetail}
+        />
+      )}
+      <MuiTypography
+        sx={{
+          ...treeItemClasses.text,
+          ...(isAttributionBreakpoint && treeItemClasses.breakpoint),
+        }}
+      >
+        {labelText}
+      </MuiTypography>
+    </MuiBox>
+  );
+}

src/Frontend/Components/ResourceBrowser/LinkedResourcesTree/LinkedResourcesTree.tsx

@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: Meta Platforms, Inc. and its affiliates
+// SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
+//
+// SPDX-License-Identifier: Apache-2.0
+import { screen } from '@testing-library/react';
+
+import { faker } from '../../../../../../testing/Faker';
+import { setAttributionBreakpoints } from '../../../../../state/actions/resource-actions/all-views-simple-actions';
+import { renderComponent } from '../../../../../test-helpers/render';
+import { LinkedResourcesTreeNode } from '../LinkedResourcesTreeNode';
+
+describe('LinkedResourcesTreeNode', () => {
+  it('renders a file without information', () => {
+    renderComponent(
+      <LinkedResourcesTreeNode
+        nodeName={'Test label'}
+        node={1}
+        nodeId={faker.system.filePath()}
+      />,
+    );
+
+    expect(screen.getByText('Test label')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Attribution icon')).not.toBeInTheDocument();
+    expect(
+      screen.getByLabelText('File icon without information'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders a folder without information', () => {
+    renderComponent(
+      <LinkedResourcesTreeNode
+        nodeName={'Test label'}
+        node={faker.opossum.resources()}
+        nodeId={faker.system.filePath()}
+      />,
+    );
+
+    expect(screen.getByText('Test label')).toBeInTheDocument();
+    expect(
+      screen.getByLabelText('Directory icon without information'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders a breakpoint', () => {
+    const nodeId = faker.system.filePath();
+    renderComponent(
+      <LinkedResourcesTreeNode
+        nodeName={'Test label'}
+        node={faker.opossum.resources()}
+        nodeId={nodeId}
+      />,
+      { actions: [setAttributionBreakpoints(new Set([nodeId]))] },
+    );
+
+    expect(screen.getByText('Test label')).toBeInTheDocument();
+    expect(screen.getByLabelText('Breakpoint icon')).toBeInTheDocument();
+  });
+});