[FIX] Fixed the performance issues caused by re-rendering (#39)

* Memoized `ResultCard` component

* Cached `updateDownload` function

* Added `react-virtualized`

* Implemented a virtualization solution for rendering ResultCards

* Refactored `ResultCard`

* Updated Cypress config to include `esbuild-plugin-react-virtualized`

* Added `esbuild-plugin-react-virtualized` as a dev dependency

* Reverted changes related to virtualization

src/components/ResultCard.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react'
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -6,7 +7,7 @@ import ButtonGroup from '@mui/material/ButtonGroup';
 import Typography from '@mui/material/Typography';
 import { modalities } from '../utils/constants';
 
-function ResultCard({
+const ResultCard = memo(({
   nodeName,
   datasetUUID,
   datasetName,
@@ -24,8 +25,7 @@ function ResultCard({
   imageModals: string[];
   checked: boolean;
   onCheckboxChange: (id: string) => void;
-}) {
-  return (
+}) => (
     <Card data-cy={`card-${datasetUUID}`}>
       <CardContent>
         <div className="grid grid-cols-12 items-center gap-2">
@@ -59,7 +59,6 @@ function ResultCard({
         </div>
       </CardContent>
     </Card>
-  );
-}
+  ));
 
 export default ResultCard;

src/components/ResultContainer.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Button, FormControlLabel, Checkbox, Typography } from '@mui/material';
 import ResultCard from './ResultCard';
 import { Result } from '../utils/types';
@@ -31,14 +31,14 @@ function ResultContainer({ result }: { result: Result[] | null }) {
    * @param id - The uuid of the dataset to be added or removed from the download list
    * @returns void
    */
-  function updateDownload(id: string) {
+  const updateDownload = useCallback((id: string) => {
     setDownload((currDownload) => {
       const newDownload = !currDownload.includes(id)
         ? [...currDownload, id]
         : currDownload.filter((downloadID) => downloadID !== id);
       return newDownload;
     });
-  }
+  }, []);
 
   function handleSelectAll(checked: boolean) {
     if (result) {
@@ -170,6 +170,7 @@ function ResultContainer({ result }: { result: Result[] | null }) {
         </Typography>
       );
     }
+
     return (
       <>
         <div>
@@ -200,7 +201,7 @@ function ResultContainer({ result }: { result: Result[] | null }) {
               numMatchingSubjects={item.num_matching_subjects}
               imageModals={item.image_modals}
               checked={download.includes(item.dataset_uuid)}
-              onCheckboxChange={(id) => updateDownload(id)}
+              onCheckboxChange={updateDownload}
             />
           ))}
         </div>