-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat/discovery enhanced loading (#1599)
* feat(discoveryEnhancedLoading): Initial commit * feat(discoveryEnhancedLoading): Updated all other components * feat(discoveryEnhancedLoading): Updated CSS * feat(discoveryEnhancedLoading): added logic to conditional chnage numberOfStudiesForSmallerBatch * feat(discoveryEnhancedLoading): Updated var name to numberOfBatchesLoaded to improve clarity * feat(discoveryEnhancedLoading): added var totalNumberOfStudiesFromSmallBatches to remove magic number * feat(discoveryEnhancedLoading): started unit test for index.tsx * feat(discoveryEnhancedLoading): updated unit test for index.tsx * feat(discoveryEnhancedLoading): Committing progress on index.tsx unit test * feat(discoveryEnhancedLoading): Added MDSUtils unit test * feat(discoveryEnhancedLoading): updated MDSUtils.test.jsx * feat(discoveryEnhancedLoading): added aggMDSUtils.test.jsx and organized utils into utils folder * feat(discoveryEnhancedLoading): removed index.test.tsx because was unable to write a test to test new logic, updated MDSUtils test * feat(discoveryEnhancedLoading): Updated imports for StudyRegistration * feat(discoveryEnhancedLoading): Undid auto code formatting to avoid excessive line changes * feat(discoveryEnhancedLoading): Ran linter, resolved ESLINT err * feat(discoveryEnhancedLoading): Fixed unused var lint err * feat(discoveryEnhancedLoading): Updated aggMDSUtils to try to placate failing test that only fails in Github * feat(discoveryEnhancedLoading): Changed references from allBatchesAreLoaded to allBatchesAreReady to improve clarity * feat(discoveryEnhancedLoading): updated comment for clarity * feat(discoveryEnhancedLoading): began refactor of MDSUtils to ingest multiple params * feat(discoveryEnhancedLoading): changed variable name for clarity * feat(discoveryEnhancedLoading): reverted unintentionally changed files * feat(discoveryEnhancedLoading): formated for consistency and with linter * feat(discoveryEnhancedLoading): updated unit test to use new parameter
- Loading branch information
1 parent
079b69d
commit aaa0b06
Showing
12 changed files
with
336 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
src/Discovery/DiscoveryLoadingProgressBar/DiscoveryLoadingProgress.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
.discovery-loading-progress-bar { | ||
text-align: center; | ||
margin-bottom: 5px; | ||
} | ||
|
||
.discovery-loading-progress-bar .discovery-header__stat-label { | ||
line-height: normal; | ||
text-transform: inherit; | ||
} |
18 changes: 18 additions & 0 deletions
18
src/Discovery/DiscoveryLoadingProgressBar/DiscoveryLoadingProgressBar.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import { render, screen } from '@testing-library/react'; | ||
import '@testing-library/jest-dom'; | ||
import DiscoveryLoadingProgressBar from './DiscoveryLoadingProgressBar'; | ||
|
||
describe('DiscoveryLoadingProgressBar', () => { | ||
it('renders the progress bar and loading text when displayProgressBar is true', () => { | ||
render(<DiscoveryLoadingProgressBar allBatchesAreReady={false} />); | ||
expect(screen.getByRole('progressbar')).toBeInTheDocument(); | ||
expect(screen.getByText('Loading studies...')).toBeInTheDocument(); | ||
}); | ||
|
||
it('sets progress to 100% when allBatchesAreReady is true', () => { | ||
render(<DiscoveryLoadingProgressBar allBatchesAreReady />); | ||
const progressBar = screen.getByRole('progressbar'); | ||
expect(progressBar).toHaveAttribute('aria-valuenow', '100'); | ||
}); | ||
}); |
60 changes: 60 additions & 0 deletions
60
src/Discovery/DiscoveryLoadingProgressBar/DiscoveryLoadingProgressBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import React, { useState, useEffect } from 'react'; | ||
import { Progress } from 'antd'; | ||
import './DiscoveryLoadingProgress.css'; | ||
|
||
interface DiscoveryLoadingProgressBarProps { | ||
allBatchesAreReady: boolean; | ||
} | ||
|
||
const DiscoveryLoadingProgressBar = ({ | ||
allBatchesAreReady, | ||
}: DiscoveryLoadingProgressBarProps) => { | ||
const [percent, setPercent] = useState(0); | ||
const [displayProgressBar, setDisplayProgressBar] = useState(true); | ||
|
||
// Auto incrementing percent logic | ||
const percentUpdateInterval = 500; | ||
const percentIncrementAmount = 5; | ||
|
||
useEffect(() => { | ||
const interval = setInterval(() => { | ||
setPercent((prevPercent) => prevPercent + percentIncrementAmount); | ||
}, percentUpdateInterval); | ||
return () => clearInterval(interval); | ||
}, [percent, allBatchesAreReady]); | ||
|
||
// hide the bar after a delay after the batches are ready, | ||
// giving the browser some time to process the batch | ||
const delayTimeBeforeHidingProgressBar = 2500; | ||
useEffect(() => { | ||
if (allBatchesAreReady) { | ||
setPercent(100); | ||
// Change displayProgressBar to false after delay | ||
setTimeout(() => { | ||
setDisplayProgressBar(false); | ||
}, delayTimeBeforeHidingProgressBar); | ||
} | ||
}, [allBatchesAreReady]); | ||
|
||
return ( | ||
<React.Fragment> | ||
{ displayProgressBar && ( | ||
<div className='discovery-loading-progress-bar'> | ||
<Progress | ||
width={80} | ||
showInfo={false} | ||
percent={percent} | ||
status='success' | ||
strokeColor='#99286B' | ||
aria-valuenow={percent} | ||
/> | ||
<p className='discovery-header__stat-label'> | ||
Loading studies... | ||
</p> | ||
</div> | ||
)} | ||
</React.Fragment> | ||
); | ||
}; | ||
|
||
export default DiscoveryLoadingProgressBar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import loadStudiesFromMDS from './MDSUtils'; | ||
import { mdsURL } from '../../../localconf'; | ||
|
||
global.fetch = jest.fn(); | ||
|
||
describe('MDS Data Loading Functions', () => { | ||
afterEach(() => { | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
describe('loadStudiesFromMDS', () => { | ||
it('should load studies successfully with limit of 2000', async () => { | ||
const mockResponse = { | ||
0: { gen3_discovery: { name: 'Study 1' } }, | ||
1: { gen3_discovery: { name: 'Study 2' } }, | ||
}; | ||
fetch.mockResolvedValueOnce({ | ||
status: 200, | ||
json: jest.fn().mockResolvedValueOnce(mockResponse), | ||
}); | ||
const studies = await loadStudiesFromMDS(); | ||
expect(studies).toEqual([{ name: 'Study 1' }, { name: 'Study 2' }]); | ||
expect(fetch).toHaveBeenCalledTimes(1); | ||
expect(fetch).toHaveBeenCalledWith( | ||
`${mdsURL}?data=True&_guid_type=discovery_metadata&limit=2000&offset=0`, | ||
); | ||
}); | ||
|
||
it('should load studies successfully with limit of 3 with loadAllMetadata false', async () => { | ||
const mockResponse = { | ||
0: { gen3_discovery: { name: 'Study 1' } }, | ||
1: { gen3_discovery: { name: 'Study 2' } }, | ||
2: { gen3_discovery: { name: 'Study 3' } }, | ||
}; | ||
fetch.mockResolvedValueOnce({ | ||
status: 200, | ||
json: jest.fn().mockResolvedValueOnce(mockResponse), | ||
}); | ||
const studies = await loadStudiesFromMDS('discovery_metadata', 3, false); | ||
|
||
expect(fetch).toHaveBeenCalledTimes(1); | ||
expect(fetch).toHaveBeenCalledWith( | ||
`${mdsURL}?data=True&_guid_type=discovery_metadata&limit=3&offset=0`, | ||
); | ||
expect(studies).toEqual([{ name: 'Study 1' },{ name: 'Study 2' },{ name: 'Study 3' }]); | ||
}); | ||
|
||
it('should throw an error on fetch failure', async () => { | ||
const mockResponse = { | ||
0: { gen3_discovery: { name: 'Study 1' } }, | ||
1: { gen3_discovery: { name: 'Study 2' } }, | ||
}; | ||
fetch.mockResolvedValueOnce({ | ||
status: 401, | ||
json: jest.fn().mockResolvedValueOnce(mockResponse), | ||
}); | ||
const expectedErrorMsg = 'Request for study data failed: Error'; | ||
let actualErrorMsg = null; | ||
try { | ||
await loadStudiesFromMDS(); | ||
} catch (e) { | ||
actualErrorMsg = e.message; | ||
} | ||
expect(actualErrorMsg.toString().includes(expectedErrorMsg)).toBe(true); | ||
}); | ||
|
||
it('should load up to 2000 studies, then load more with a secondary request', async () => { | ||
const mockStudies = new Array(2500).fill({ mockStudy: 'info' }); | ||
// Simulate first fetch (2000 studies) | ||
fetch.mockImplementationOnce(() => Promise.resolve({ | ||
status: 200, | ||
json: () => Promise.resolve(mockStudies.slice(0, 2000)), | ||
}), | ||
); | ||
|
||
// Simulate second fetch (500 studies) | ||
fetch.mockImplementationOnce(() => Promise.resolve({ | ||
status: 200, | ||
json: () => Promise.resolve(mockStudies.slice(2000, 2500)), | ||
}), | ||
); | ||
const studies = await loadStudiesFromMDS(); | ||
expect(fetch).toHaveBeenCalledTimes(2); | ||
expect(studies.length).toBe(2500); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.