From 7f60560ac9c1de7c3377aeec5b29d9bf19828132 Mon Sep 17 00:00:00 2001 From: rmanaem Date: Thu, 4 Apr 2024 14:02:18 -0400 Subject: [PATCH 1/6] WIP UI updates --- src/App.tsx | 2 +- src/components/Navbar.tsx | 4 ++-- src/components/ResultContainer.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3666d8f7..ea49cc8d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -286,7 +286,7 @@ function App() { )} -
+
Neurobagel Query - + Define and find cohorts at the subject level
- Documentation + Documentation diff --git a/src/components/ResultContainer.tsx b/src/components/ResultContainer.tsx index 9cabd965..141850f8 100644 --- a/src/components/ResultContainer.tsx +++ b/src/components/ResultContainer.tsx @@ -190,7 +190,7 @@ function ResultContainer({ result }: { result: Result[] | null }) { {summaryStats}
-
+
{result.map((item) => ( Date: Wed, 10 Apr 2024 14:48:29 -0400 Subject: [PATCH 2/6] Implemented pheno sessions - Updated QueryForm component and its component test - Updated App component - Added a test for sessions fields --- cypress/component/QueryForm.cy.tsx | 20 ++++++++++++++------ cypress/e2e/APIRequests.cy.ts | 9 ++++++++- src/App.tsx | 20 ++++++++++++++++---- src/components/QueryForm.tsx | 29 ++++++++++++++++++++--------- tailwind.config.js | 2 +- 5 files changed, 59 insertions(+), 21 deletions(-) diff --git a/cypress/component/QueryForm.cy.tsx b/cypress/component/QueryForm.cy.tsx index 74a5f33c..17558928 100644 --- a/cypress/component/QueryForm.cy.tsx +++ b/cypress/component/QueryForm.cy.tsx @@ -37,7 +37,8 @@ const props = { sex: null, diagnosis: null, isControl: false, - minNumSessions: null, + minNumImagingSessions: null, + minNumPhenotypicSessions: null, setIsControl: () => {}, assessmentTool: null, imagingModality: null, @@ -60,7 +61,8 @@ describe('QueryForm', () => { sex={props.sex} diagnosis={props.diagnosis} isControl={props.isControl} - minNumSessions={props.minNumSessions} + minNumImagingSessions={props.minNumImagingSessions} + minNumPhenotypicSessions={props.minNumPhenotypicSessions} setIsControl={props.setIsControl} assessmentTool={props.assessmentTool} imagingModality={props.imagingModality} @@ -77,7 +79,10 @@ describe('QueryForm', () => { cy.get('[data-cy="Sex-categorical-field"]').should('be.visible'); cy.get('[data-cy="Diagnosis-categorical-field"]').should('be.visible'); cy.get('[data-cy="healthy-control-checkbox"]').should('be.visible'); - cy.get('[data-cy="Minimum number of sessions-continuous-field"]').should('be.visible'); + cy.get('[data-cy="Minimum number of imaging sessions-continuous-field"]').should('be.visible'); + cy.get('[data-cy="Minimum number of phenotypic sessions-continuous-field"]').should( + 'be.visible' + ); cy.get('[data-cy="Assessment tool-categorical-field"]').should('be.visible'); cy.get('[data-cy="Imaging modality-categorical-field"]').should('be.visible'); cy.get('[data-cy="submit-query-button"]').should('be.visible'); @@ -95,7 +100,8 @@ describe('QueryForm', () => { sex={props.sex} diagnosis={props.diagnosis} isControl={props.isControl} - minNumSessions={props.minNumSessions} + minNumImagingSessions={props.minNumImagingSessions} + minNumPhenotypicSessions={props.minNumPhenotypicSessions} setIsControl={props.setIsControl} assessmentTool={props.assessmentTool} imagingModality={props.imagingModality} @@ -125,7 +131,8 @@ describe('QueryForm', () => { sex={props.sex} diagnosis={props.diagnosis} isControl={props.isControl} - minNumSessions={props.minNumSessions} + minNumImagingSessions={props.minNumImagingSessions} + minNumPhenotypicSessions={props.minNumPhenotypicSessions} setIsControl={props.setIsControl} assessmentTool={props.assessmentTool} imagingModality={props.imagingModality} @@ -151,7 +158,8 @@ describe('QueryForm', () => { sex={props.sex} diagnosis={props.diagnosis} isControl={props.isControl} - minNumSessions={props.minNumSessions} + minNumImagingSessions={props.minNumImagingSessions} + minNumPhenotypicSessions={props.minNumPhenotypicSessions} setIsControl={props.setIsControl} assessmentTool={props.assessmentTool} imagingModality={props.imagingModality} diff --git a/cypress/e2e/APIRequests.cy.ts b/cypress/e2e/APIRequests.cy.ts index f6a3cab0..d4cf2fb1 100644 --- a/cypress/e2e/APIRequests.cy.ts +++ b/cypress/e2e/APIRequests.cy.ts @@ -188,8 +188,15 @@ describe('Successful API query requests', () => { it('Intercepts the request sent to the API and asserts over the request url', () => { cy.get('[data-cy="Minimum age-continuous-field"]').type('10'); cy.get('[data-cy="Maximum age-continuous-field"]').type('30'); + cy.get('[data-cy="Minimum number of imaging sessions-continuous-field"]').type('2'); + cy.get('[data-cy="Minimum number of phenotypic sessions-continuous-field"]').type('3'); cy.get('[data-cy="submit-query-button"]').click(); - cy.wait('@call').its('request.url').should('contains', 'min_age=10&max_age=30'); + cy.wait('@call') + .its('request.url') + .should( + 'contains', + 'min_age=10&max_age=30&min_num_imaging_sessions=2&min_num_phenotypic_sessions=3' + ); }); }); diff --git a/src/App.tsx b/src/App.tsx index 3ef80aca..2e96bdcd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,7 +36,8 @@ function App() { const [sex, setSex] = useState(null); const [diagnosis, setDiagnosis] = useState(null); const [isControl, setIsControl] = useState(false); - const [minNumSessions, setMinNumSessions] = useState(null); + const [minNumImagingSessions, setMinNumSessions] = useState(null); + const [minNumPhenotypicSessions, setMinNumPhenotypicSessions] = useState(null); const [assessmentTool, setAssessmentTool] = useState(null); const [imagingModality, setImagingModality] = useState(null); const [searchParams, setSearchParams] = useSearchParams(); @@ -190,9 +191,12 @@ function App() { case 'Maximum age': setMaxAge(value); break; - case 'Minimum number of sessions': + case 'Minimum number of imaging sessions': setMinNumSessions(value); break; + case 'Minimum number of phenotypic sessions': + setMinNumPhenotypicSessions(value); + break; default: break; } @@ -236,7 +240,14 @@ function App() { setQueryParam('sex', sex, queryParams); setQueryParam('diagnosis', isControl ? null : diagnosis, queryParams); queryParams.set('is_control', isControl ? 'true' : ''); - queryParams.set('min_num_sessions', minNumSessions ? minNumSessions.toString() : ''); + queryParams.set( + 'min_num_imaging_sessions', + minNumImagingSessions ? minNumImagingSessions.toString() : '' + ); + queryParams.set( + 'min_num_phenotypic_sessions', + minNumPhenotypicSessions ? minNumPhenotypicSessions.toString() : '' + ); setQueryParam('assessment', assessmentTool, queryParams); setQueryParam('image_modal', imagingModality, queryParams); @@ -332,7 +343,8 @@ function App() { sex={sex} diagnosis={diagnosis} isControl={isControl} - minNumSessions={minNumSessions} + minNumImagingSessions={minNumImagingSessions} + minNumPhenotypicSessions={minNumPhenotypicSessions} setIsControl={setIsControl} assessmentTool={assessmentTool} imagingModality={imagingModality} diff --git a/src/components/QueryForm.tsx b/src/components/QueryForm.tsx index bfa880b1..8867c764 100644 --- a/src/components/QueryForm.tsx +++ b/src/components/QueryForm.tsx @@ -21,7 +21,8 @@ function QueryForm({ sex, diagnosis, isControl, - minNumSessions, + minNumImagingSessions, + minNumPhenotypicSessions, setIsControl, assessmentTool, imagingModality, @@ -40,7 +41,8 @@ function QueryForm({ diagnosis: FieldInput; isControl: boolean; setIsControl: (value: boolean) => void; - minNumSessions: number | null; + minNumImagingSessions: number | null; + minNumPhenotypicSessions: number | null; assessmentTool: FieldInput; imagingModality: FieldInput; updateCategoricalQueryParams: (label: string, value: FieldInput) => void; @@ -64,21 +66,23 @@ function QueryForm({ const minAgeHelperText: string = validateContinuousValue(minAge); const maxAgeHelperText: string = validateContinuousValue(maxAge); - const minNumSessionsHelperText: string = validateContinuousValue(minNumSessions); + const minNumImagingSessionsHelperText: string = validateContinuousValue(minNumImagingSessions); + const minNumPhenotypicSessionsHelperText: string = + validateContinuousValue(minNumPhenotypicSessions); const minAgeExceedsMaxAge: boolean = minAge && maxAge ? minAge > maxAge : false; const disableSubmit: boolean = minAgeExceedsMaxAge || minAgeHelperText !== '' || maxAgeHelperText !== '' || - minNumSessionsHelperText !== ''; + minNumImagingSessionsHelperText !== ''; return (
{isFederationAPI && ( @@ -153,12 +157,19 @@ function QueryForm({
+ +
+
({ label: a.Label, id: a.TermURL }))} @@ -166,7 +177,7 @@ function QueryForm({ inputValue={assessmentTool} />
-
+
({ @@ -177,7 +188,7 @@ function QueryForm({ inputValue={imagingModality} />
-
+