Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Mar 1, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e4d020b
Memoized `ResultCard` component
rmanaem Feb 28, 2024
5cc5ef4
Cached `updateDownload` function
rmanaem Feb 28, 2024
d239684
Added `react-virtualized`
rmanaem Feb 29, 2024
c848de7
Implemented a virtualization solution for rendering ResultCards
rmanaem Feb 29, 2024
58f7f88
Refactored `ResultCard`
rmanaem Feb 29, 2024
d2906df
Updated Cypress config to include `esbuild-plugin-react-virtualized`
rmanaem Feb 29, 2024
7307a0b
Added `esbuild-plugin-react-virtualized` as a dev dependency
rmanaem Feb 29, 2024
0438967
Reverted changes related to virtualization
rmanaem Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/components/ResultCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand All @@ -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">
Expand Down Expand Up @@ -59,7 +59,6 @@ function ResultCard({
</div>
</CardContent>
</Card>
);
}
));

export default ResultCard;
9 changes: 5 additions & 4 deletions src/components/ResultContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -170,6 +170,7 @@ function ResultContainer({ result }: { result: Result[] | null }) {
</Typography>
);
}

return (
<>
<div>
Expand Down Expand Up @@ -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>
Expand Down