[ENH] Refined content and location of How to access data button (#409)

* Updated content of `GetDataDialog` * Moved `How to get data` button to the bottom of query form * Updated affected tests --------- Co-authored-by: Sebastian Urchs <surchs@users.noreply.github.com>
neurobagel · Dec 20, 2024 · fef3cb4 · fef3cb4
1 parent 8a6a31a
commit fef3cb4
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 39 deletions.
diff --git a/cypress/component/QueryForm.cy.tsx b/cypress/component/QueryForm.cy.tsx
@@ -96,6 +96,37 @@ describe('QueryForm', () => {
     cy.get('[data-cy="Pipeline name-categorical-field"]').should('be.visible');
     cy.get('[data-cy="Pipeline version-categorical-field"]').should('be.visible');
     cy.get('[data-cy="submit-query-button"]').should('be.visible');
+    cy.get('[data-cy="how-to-get-data-dialog-button"]').should('be.visible');
+  });
+  it('Clicking the how to get data dialog button should open the dialog', () => {
+    cy.mount(
+      <QueryForm
+        availableNodes={props.availableNodes}
+        diagnosisOptions={props.diagnosisOptions}
+        assessmentOptions={props.assessmentOptions}
+        selectedNode={props.selectedNode}
+        minAge={props.minAge}
+        maxAge={props.maxAge}
+        sex={props.sex}
+        diagnosis={props.diagnosis}
+        isControl={props.isControl}
+        minNumImagingSessions={props.minNumImagingSessions}
+        minNumPhenotypicSessions={props.minNumPhenotypicSessions}
+        setIsControl={props.setIsControl}
+        assessmentTool={props.assessmentTool}
+        imagingModality={props.imagingModality}
+        pipelineVersion={props.pipelineVersion}
+        pipelineName={props.pipelineName}
+        pipelines={props.pipelines}
+        updateCategoricalQueryParams={props.updateCategoricalQueryParams}
+        updateContinuousQueryParams={props.updateContinuousQueryParams}
+        loading={props.loading}
+        onSubmitQuery={props.onSubmitQuery}
+      />
+    );
+    cy.get('[data-cy="get-data-dialog"]').should('not.exist');
+    cy.get('[data-cy="how-to-get-data-dialog-button"]').click();
+    cy.get('[data-cy="get-data-dialog"]').should('be.visible');
   });
   it('Fires updateCategoricalQueryParams event handler with the appropriate payload when a categorical field is selected', () => {
     const updateCategoricalQueryParamsSpy = cy.spy().as('updateCategoricalQueryParamsSpy');

diff --git a/cypress/component/ResultContainer.cy.tsx b/cypress/component/ResultContainer.cy.tsx
@@ -13,7 +13,6 @@ describe('ResultContainer', () => {
       .should('be.visible')
       .should('contain', 'Summary stats: 2 datasets, 4 subjects');
     cy.get('[data-cy="download-results-button"]').should('be.visible').should('be.disabled');
-    cy.get('[data-cy="how-to-get-data-dialog-button"]').should('be.visible');
   });
   it('Selecting a dataset should enable the download result button', () => {
     cy.mount(
@@ -41,14 +40,6 @@ describe('ResultContainer', () => {
       'not.be.checked'
     );
   });
-  it('Clicking the how to get data dialog button should open the dialog', () => {
-    cy.mount(
-      <ResultContainer response={protectedResponse2} assessmentOptions={[]} diagnosisOptions={[]} />
-    );
-    cy.get('[data-cy="get-data-dialog"]').should('not.exist');
-    cy.get('[data-cy="how-to-get-data-dialog-button"]').click();
-    cy.get('[data-cy="get-data-dialog"]').should('be.visible');
-  });
   it('Shows no result view when result is empty', () => {
     cy.mount(
       <ResultContainer

diff --git a/src/components/GetDataDialog.tsx b/src/components/GetDataDialog.tsx
@@ -43,16 +43,16 @@ function GetDataDialog({ open, onClose }: { open: boolean; onClose: () => void }
       <DialogContent>
         <DialogContentText>
           <Typography variant="h6" className="font-bold">
-            Results file for data access or programmatic use
+            Download matching source data results using Datalad
           </Typography>
-          Download the query results file with URIs to use as input to scripts for downloading the
-          data of matching subjects to your local filesystem. This file contains URIs instead of
-          descriptive labels making it ideal for integration with other tools for linked or
-          structured data. We have a helper tool to automatically download matching subjects from
-          datasets available through DataLad. To do so:
+          We have a helper tool to automatically download matching subjects from datasets available
+          through DataLad. To do so:
           <ol>
             <li>Select at least one dataset</li>
-            <li>Download the results file with URIs using the dropdown download button</li>
+            <li>
+              Download one of the query results files using the &rdquo;Download selected query
+              results&rdquo; dropdown
+            </li>
             <li>Change directory to the location of the downloaded TSV</li>
             <li>Copy and run the command below</li>
           </ol>
@@ -94,7 +94,7 @@ function GetDataDialog({ open, onClose }: { open: boolean; onClose: () => void }
           <br />
           ⚠️ The above command currently only gets data for DataLad datasets. To download a cohort
           from other remote filesystems you have access to, you may need to write your own script
-          that uses the paths from the results file downloadable above.
+          that uses the paths from a results file.
         </DialogContentText>
       </DialogContent>
       <DialogActions>

diff --git a/src/components/QueryForm.tsx b/src/components/QueryForm.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   FormControlLabel,
@@ -18,6 +19,7 @@ import {
 } from '../utils/types';
 import CategoricalField from './CategoricalField';
 import ContinuousField from './ContinuousField';
+import GetDataDialog from './GetDataDialog';
 
 function QueryForm({
   availableNodes,
@@ -64,6 +66,8 @@ function QueryForm({
   loading: boolean;
   onSubmitQuery: () => void;
 }) {
+  const [openDialog, setOpenDialog] = useState(false);
+
   function validateContinuousValue(value: number | null) {
     if (value === null) {
       // Value is default, user has not entered anything yet
@@ -235,7 +239,7 @@ function QueryForm({
         </div>
       )}
 
-      <div>
+      <div className="flex justify-between">
         <Button
           data-cy="submit-query-button"
           disabled={disableSubmit}
@@ -253,6 +257,14 @@ function QueryForm({
         >
           Submit Query
         </Button>
+        <Button
+          variant="contained"
+          data-cy="how-to-get-data-dialog-button"
+          onClick={() => setOpenDialog(true)}
+        >
+          How to access data
+        </Button>
+        <GetDataDialog open={openDialog} onClose={() => setOpenDialog(false)} />
       </div>
     </div>
   );

diff --git a/src/components/ResultContainer.tsx b/src/components/ResultContainer.tsx
@@ -1,9 +1,8 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Button, FormControlLabel, Checkbox, Typography } from '@mui/material';
+import { FormControlLabel, Checkbox, Typography } from '@mui/material';
 import ResultCard from './ResultCard';
 import { QueryResponse, Pipelines, AttributeOption } from '../utils/types';
 import DownloadResultButton from './DownloadResultButton';
-import GetDataDialog from './GetDataDialog';
 import { sexes, modalities } from '../utils/constants';
 
 function ResultContainer({
@@ -16,7 +15,6 @@ function ResultContainer({
   response: QueryResponse | null;
 }) {
   const [download, setDownload] = useState<string[]>([]);
-  const [openDialog, setOpenDialog] = useState(false);
   const selectAll: boolean = response
     ? response.responses.length === download.length &&
       response.responses.every((r) => download.includes(r.dataset_uuid))
@@ -313,7 +311,7 @@ function ResultContainer({
             </Typography>
           </div>
         </div>
-        <div className="h-[70vh] space-y-1 overflow-auto">
+        <div className="h-[65vh] space-y-1 overflow-auto">
           {response.responses.map((item) => (
             <ResultCard
               key={item.dataset_uuid}
@@ -329,23 +327,11 @@ function ResultContainer({
             />
           ))}
         </div>
-        <div className="mt-[2px] flex flex-row flex-wrap justify-between">
-          <div>
-            <Button
-              variant="contained"
-              data-cy="how-to-get-data-dialog-button"
-              onClick={() => setOpenDialog(true)}
-            >
-              How to get data
-            </Button>
-            <GetDataDialog open={openDialog} onClose={() => setOpenDialog(false)} />
-          </div>
-          <div className="space-x-1">
-            <DownloadResultButton
-              disabled={download.length === 0}
-              handleClick={(index) => downloadResults(index)}
-            />
-          </div>
+        <div className="flex flex-wrap justify-end">
+          <DownloadResultButton
+            disabled={download.length === 0}
+            handleClick={(index) => downloadResults(index)}
+          />
         </div>
       </>
     );