[ENH] Adjust form layout for small and tab screens (#476)

* adjust form layout for small and tab screens * added tests --------- Co-authored-by: Sebastian Urchs <[email protected]>
neurobagel · Feb 10, 2025 · 0df1e94 · 0df1e94
1 parent 6ac9259
commit 0df1e94
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 30 deletions.
diff --git a/cypress/e2e/Form.cy.ts b/cypress/e2e/Form.cy.ts
@@ -86,4 +86,19 @@ describe('App', () => {
     cy.get('[data-cy="Pipeline version-categorical-field"]').type('0.2.3{downarrow}{enter}');
     cy.get('[data-cy="Pipeline version-categorical-field"] input').should('have.value', '0.2.3');
   });
+  it('should toggle the filter form visibility when clicking the button', () => {
+    cy.viewport(800, 600); // Mobile/tablet viewport
+    cy.get('[data-cy="filter-toggle-button"]').should('be.visible');
+    cy.get('[data-cy="query-form-container"]').should('be.visible');
+    cy.contains('[data-cy="filter-toggle-button"]', 'Hide Query Form').should('exist');
+    cy.get('[data-cy="filter-toggle-button"]').click();
+    cy.get('[data-cy="query-form-container"]').should('not.exist');
+    cy.contains('[data-cy="filter-toggle-button"]', 'Show Query Form').should('exist');
+    cy.get('[data-cy="filter-toggle-button"]').click();
+    cy.get('[data-cy="query-form-container"]').should('be.visible');
+    cy.contains('[data-cy="filter-toggle-button"]', 'Hide Query Form').should('exist');
+    cy.viewport(1200, 800); // Desktop viewport
+    cy.get('[data-cy="filter-toggle-button"]').should('not.exist');
+    cy.get('[data-cy="query-form-container"]').should('be.visible');
+  });
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import axios, { AxiosResponse } from 'axios';
-import { Alert, Grow, IconButton } from '@mui/material';
+import { Alert, Button, Grow, IconButton } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import CloseIcon from '@mui/icons-material/Close';
 import { SnackbarKey, SnackbarProvider, closeSnackbar, enqueueSnackbar } from 'notistack';
 import { useAuth0 } from '@auth0/auth0-react';
 import { v4 as uuidv4 } from 'uuid';
+import { FilterList } from '@mui/icons-material';
 import { queryURL, baseAPIURL, nodesURL, enableAuth, enableChatbot } from './utils/constants';
 import {
   RetrievedAttributeOption,
@@ -65,6 +66,8 @@ function App() {
   const { isAuthenticated, isLoading, getIdTokenClaims } = useAuth0();
 
   const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [isQueryFormOpen, setIsQueryFormOpen] = useState(true);
+  const isSmallViewport = useMediaQuery('(max-width: 1024px)');
 
   // Extract the raw OIDC ID token from the Auth0 SDK
   useEffect(() => {
@@ -505,35 +508,48 @@ function App() {
 
       <div className="flex flex-wrap gap-3">
         {/* 380px is currently the smallest width for the query form without dropdowns being affected */}
-        <div className="min-w-[380px] max-w-sm flex-1">
-          <QueryForm
-            availableNodes={availableNodes}
-            diagnosisOptions={diagnosisOptions}
-            assessmentOptions={assessmentOptions}
-            selectedNode={selectedNode}
-            minAge={minAge}
-            maxAge={maxAge}
-            sex={sex}
-            diagnosis={diagnosis}
-            isControl={isControl}
-            minNumImagingSessions={minNumImagingSessions}
-            minNumPhenotypicSessions={minNumPhenotypicSessions}
-            setIsControl={setIsControl}
-            assessmentTool={assessmentTool}
-            imagingModality={imagingModality}
-            pipelineVersion={pipelineVersion}
-            pipelineName={pipelineName}
-            pipelines={pipelines}
-            updateCategoricalQueryParams={(label, value) =>
-              updateCategoricalQueryParams(label, value)
-            }
-            updateContinuousQueryParams={(label, value) =>
-              updateContinuousQueryParams(label, value)
-            }
-            loading={loading}
-            onSubmitQuery={() => submitQuery()}
-          />
-        </div>
+        {isSmallViewport && (
+          <div className="flex w-full items-end justify-end p-2">
+            <Button
+              data-cy="filter-toggle-button"
+              className="flex items-center gap-2"
+              onClick={() => setIsQueryFormOpen(!isQueryFormOpen)}
+            >
+              <FilterList /> <span>{isQueryFormOpen ? 'Hide Query Form' : 'Show Query Form'}</span>
+            </Button>
+          </div>
+        )}
+        {(isQueryFormOpen || !isSmallViewport) && (
+          <div data-cy="query-form-container" className="min-w-[380px] max-w-sm flex-1">
+            <QueryForm
+              availableNodes={availableNodes}
+              diagnosisOptions={diagnosisOptions}
+              assessmentOptions={assessmentOptions}
+              selectedNode={selectedNode}
+              minAge={minAge}
+              maxAge={maxAge}
+              sex={sex}
+              diagnosis={diagnosis}
+              isControl={isControl}
+              minNumImagingSessions={minNumImagingSessions}
+              minNumPhenotypicSessions={minNumPhenotypicSessions}
+              setIsControl={setIsControl}
+              assessmentTool={assessmentTool}
+              imagingModality={imagingModality}
+              pipelineVersion={pipelineVersion}
+              pipelineName={pipelineName}
+              pipelines={pipelines}
+              updateCategoricalQueryParams={(label, value) =>
+                updateCategoricalQueryParams(label, value)
+              }
+              updateContinuousQueryParams={(label, value) =>
+                updateContinuousQueryParams(label, value)
+              }
+              loading={loading}
+              onSubmitQuery={() => submitQuery()}
+            />
+          </div>
+        )}
         <div
           className={
             loading