[FIX] Refactored syncing of the URLSearchParams and selected nodes

.github/workflows/e2e-test.yaml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 20
-      
+
       - name: Create .env file
         run: |
           echo -e "NB_API_QUERY_URL=${{ vars.NB_API_QUERY_URL }}\nNB_IS_FEDERATION_API=${{ vars.NB_IS_FEDERATION_API }}" > .env
@@ -32,4 +32,3 @@ jobs:
           wait-on: http://localhost:5173
           start: npm run preview
           component: false
-

cypress.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   e2e: {
     experimentalStudio: true,
-    baseUrl: "http://localhost:5173", 
+    baseUrl: 'http://localhost:5173',
   },
 
   component: {

cypress.d.ts

@@ -1,10 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { mount } from 'cypress/react'
+import { mount } from 'cypress/react';
 
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
     }
   }
-}
+}

cypress/e2e/APIRequests.cy.ts

@@ -1,15 +1,26 @@
-import { mixedResponse, nodeOptions, emptyDiagnosisOptions, emptyAssessmentToolOptions } from '../fixtures/mocked-responses';
+import {
+  mixedResponse,
+  nodeOptions,
+  emptyDiagnosisOptions,
+  emptyAssessmentToolOptions,
+} from '../fixtures/mocked-responses';
 
 describe('API request', () => {
   it('Intercepts the request sent to the API and asserts over the request url', () => {
-    cy.intercept({
-      method: 'GET',
-      url: 'query/?*',
-    }, mixedResponse).as('call');
-    cy.intercept({
-      method: 'GET',
-      url: '/nodes/',
-    }, nodeOptions).as('getNodes');
+    cy.intercept(
+      {
+        method: 'GET',
+        url: 'query/?*',
+      },
+      mixedResponse
+    ).as('call');
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/nodes/',
+      },
+      nodeOptions
+    ).as('getNodes');
     cy.visit('/?node=OpenNeuro');
     // We need to wait for the fetch to complete and populate the
     // dropdown with nodes and selecting OpenNeuro before making the request
@@ -20,32 +31,53 @@ describe('API request', () => {
     cy.wait('@call').its('request.url').should('contains', '&min_age=10&max_age=30');
   });
   it('Empty responses for diagnosis and Assessment make a toast appear', () => {
-    cy.intercept({
-      method: 'GET',
-      url: '/attributes/nb:Diagnosis',
-    }, emptyDiagnosisOptions).as('getDiagnosisOptions');
-    cy.intercept({
-      method: 'GET',
-      url: '/attributes/nb:Assessment',
-    }, emptyAssessmentToolOptions).as('getAssessmentToolOptions');
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/attributes/nb:Diagnosis',
+      },
+      emptyDiagnosisOptions
+    ).as('getDiagnosisOptions');
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/attributes/nb:Assessment',
+      },
+      emptyAssessmentToolOptions
+    ).as('getAssessmentToolOptions');
     cy.visit('/');
     cy.wait('@getDiagnosisOptions');
     cy.get('.notistack-SnackbarContainer').should('contain', 'No Diagnosis options were available');
-    cy.get('.notistack-SnackbarContainer').should('contain', 'No Assessment tool options were available');
+    cy.get('.notistack-SnackbarContainer').should(
+      'contain',
+      'No Assessment tool options were available'
+    );
   });
   it('Failed responses for diagnosis and assessment make an error toast appear', () => {
-    cy.intercept({
-      method: 'GET',
-      url: '/attributes/nb:Diagnosis',
-    }, { statusCode: 500 }).as('getDiagnosisOptions');
-    cy.intercept({
-      method: 'GET',
-      url: '/attributes/nb:Assessment',
-    }, { statusCode: 500 }).as('getAssessmentToolOptions');
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/attributes/nb:Diagnosis',
+      },
+      { statusCode: 500 }
+    ).as('getDiagnosisOptions');
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/attributes/nb:Assessment',
+      },
+      { statusCode: 500 }
+    ).as('getAssessmentToolOptions');
     cy.visit('/');
     cy.wait('@getDiagnosisOptions');
-    cy.get('.notistack-SnackbarContainer').should('contain', 'Failed to retrieve Diagnosis options');
+    cy.get('.notistack-SnackbarContainer').should(
+      'contain',
+      'Failed to retrieve Diagnosis options'
+    );
     cy.wait('@getAssessmentToolOptions');
-    cy.get('.notistack-SnackbarContainer').should('contain', 'Failed to retrieve Assessment tool options');
+    cy.get('.notistack-SnackbarContainer').should(
+      'contain',
+      'Failed to retrieve Assessment tool options'
+    );
   });
 });

cypress/e2e/Alert.cy.ts

@@ -1,27 +1,32 @@
 describe('Alert', () => {
-    it('Correctly displays and dismisses the alert', () => {
-      cy.intercept({
-        method: 'GET',
-        url: '/nodes/',
-      }).as('getNodes');
-      cy.visit('/?node=All');
-      // We need to wait for the fetch to complete and populate the
-      // dropdown with nodes before searching for OpenNeuro
-      cy.wait('@getNodes');
-      cy.get('[data-cy="openneuro-alert"]').should('be.visible').should('contain', 'The OpenNeuro node is being actively annotated at the participant');
+  it('Correctly displays and dismisses the alert', () => {
+    cy.intercept({
+      method: 'GET',
+      url: '/nodes/',
+    }).as('getNodes');
+    cy.visit('/?node=All');
+    // We need to wait for the fetch to complete and populate the
+    // dropdown with nodes before searching for OpenNeuro
+    cy.wait('@getNodes');
+    cy.get('[data-cy="openneuro-alert"]')
+      .should('be.visible')
+      .should('contain', 'The OpenNeuro node is being actively annotated at the participant');
 
-      cy.get('[data-cy="Neurobagel graph-categorical-field"]').type('Quebec Parkinson Network{downarrow}{enter}');
-      cy.get('[data-cy="openneuro-alert"]').should('not.exist');
-
-      cy.get('[data-cy="Neurobagel graph-categorical-field"]').should('not.contain', 'All');
-      cy.get('[data-cy="Neurobagel graph-categorical-field"]').find('[data-testid="CloseIcon"]').click();
-      cy.get('[data-cy="Neurobagel graph-categorical-field"]').should('contain', 'All');
+    cy.get('[data-cy="Neurobagel graph-categorical-field"]').type(
+      'Quebec Parkinson Network{downarrow}{enter}'
+    );
+    cy.get('[data-cy="openneuro-alert"]').should('not.exist');
 
-      cy.get('[data-cy="Neurobagel graph-categorical-field"]').type('OpenNeuro{downarrow}{enter}');
-      cy.get('[data-cy="openneuro-alert"]').should('be.visible');
+    cy.get('[data-cy="Neurobagel graph-categorical-field"]').should('not.contain', 'All');
+    cy.get('[data-cy="Neurobagel graph-categorical-field"]')
+      .find('[data-testid="CloseIcon"]')
+      .click();
+    cy.get('[data-cy="Neurobagel graph-categorical-field"]').should('contain', 'All');
 
-      cy.get('[data-cy="openneuro-alert"]').find('[data-testid="CloseIcon"]').click();
-      cy.get('[data-cy="openneuro-alert"]').should('not.exist');
-    });
+    cy.get('[data-cy="Neurobagel graph-categorical-field"]').type('OpenNeuro{downarrow}{enter}');
+    cy.get('[data-cy="openneuro-alert"]').should('be.visible');
+
+    cy.get('[data-cy="openneuro-alert"]').find('[data-testid="CloseIcon"]').click();
+    cy.get('[data-cy="openneuro-alert"]').should('not.exist');
   });
-  
+});

cypress/e2e/Checkbox.cy.ts

@@ -16,9 +16,13 @@ describe('Dataset result checkbox', () => {
     cy.visit('/');
     cy.get('[data-cy="submit-query"]').click();
     cy.wait('@call');
-    cy.get('[data-cy="card-http://neurobagel.org/vocab/cool-dataset-checkbox"]').find('input').check();
+    cy.get('[data-cy="card-http://neurobagel.org/vocab/cool-dataset-checkbox"]')
+      .find('input')
+      .check();
     cy.get('[data-cy="submit-query"]').click();
     cy.wait('@call');
-    cy.get('[data-cy="card-http://neurobagel.org/vocab/cool-dataset-checkbox"]').should('not.be.checked');
+    cy.get('[data-cy="card-http://neurobagel.org/vocab/cool-dataset-checkbox"]').should(
+      'not.be.checked'
+    );
   });
 });

cypress/fixtures/mocked-responses.ts

@@ -14,13 +14,9 @@ export const unprotectedresponse1 = [
         num_sessions: '1',
         age: '10.4',
         sex: 'http://purl.bioontology.org/ontology/SNOMEDCT/248152002',
-        diagnosis: [
-          null,
-        ],
+        diagnosis: [null],
         subject_group: null,
-        assessment: [
-          null,
-        ],
+        assessment: [null],
         image_modal: [
           'http://purl.org/nidash/nidm#FlowWeighted',
           'http://purl.org/nidash/nidm#T2Weighted',
@@ -33,13 +29,9 @@ export const unprotectedresponse1 = [
         num_sessions: '1',
         age: '10.4',
         sex: 'http://purl.bioontology.org/ontology/SNOMEDCT/248152002',
-        diagnosis: [
-          null,
-        ],
+        diagnosis: [null],
         subject_group: null,
-        assessment: [
-          null,
-        ],
+        assessment: [null],
         image_modal: [
           'http://purl.org/nidash/nidm#FlowWeighted',
           'http://purl.org/nidash/nidm#T2Weighted',
@@ -64,7 +56,10 @@ export const protectedResponse1 = [
     records_protected: true,
     num_matching_subjects: 2,
     subject_data: 'protected',
-    image_modals: ['http://purl.org/nidash/nidm#T1Weighted', 'http://purl.org/nidash/nidm#T2Weighted'],
+    image_modals: [
+      'http://purl.org/nidash/nidm#T1Weighted',
+      'http://purl.org/nidash/nidm#T2Weighted',
+    ],
   },
 ];
 
@@ -78,7 +73,10 @@ export const protectedResponse2 = [
     records_protected: true,
     num_matching_subjects: 2,
     subject_data: 'protected',
-    image_modals: ['http://purl.org/nidash/nidm#T1Weighted', 'http://purl.org/nidash/nidm#T2Weighted'],
+    image_modals: [
+      'http://purl.org/nidash/nidm#T1Weighted',
+      'http://purl.org/nidash/nidm#T2Weighted',
+    ],
   },
   {
     node_name: 'another-node-name',
@@ -89,9 +87,12 @@ export const protectedResponse2 = [
     records_protected: true,
     num_matching_subjects: 2,
     subject_data: 'protected',
-    image_modals: ['http://purl.org/nidash/nidm#T2Weighted', 'http://purl.org/nidash/nidm#FlowWeighted', 'http://purl.org/nidash/nidm#T1Weighted'],
+    image_modals: [
+      'http://purl.org/nidash/nidm#T2Weighted',
+      'http://purl.org/nidash/nidm#FlowWeighted',
+      'http://purl.org/nidash/nidm#T1Weighted',
+    ],
   },
-
 ];
 
 // Protected Response with a dataset name containing a newline
@@ -105,7 +106,10 @@ export const mixedResponse = [
     dataset_total_subjects: 10,
     num_matching_subjects: 3,
     subject_data: 'protected',
-    image_modals: ['http://purl.org/nidash/nidm#FlowWeighted', 'http://purl.org/nidash/nidm#T1Weighted'],
+    image_modals: [
+      'http://purl.org/nidash/nidm#FlowWeighted',
+      'http://purl.org/nidash/nidm#T1Weighted',
+    ],
   },
   {
     records_protected: false,
@@ -121,15 +125,9 @@ export const mixedResponse = [
         num_sessions: '1',
         age: '35.0',
         sex: 'http://purl.bioontology.org/ontology/SNOMEDCT/248153007',
-        diagnosis: [
-          null,
-          null,
-          null,
-        ],
+        diagnosis: [null, null, null],
         subject_group: null,
-        assessment: [
-          null,
-        ],
+        assessment: [null],
         image_modal: [
           'http://purl.org/nidash/nidm#T2Weighted',
           'http://purl.org/nidash/nidm#T1Weighted',
@@ -138,21 +136,23 @@ export const mixedResponse = [
         session_file_path: '/ds000011/sub-04',
       },
     ],
-    image_modals: ['http://purl.org/nidash/nidm#FlowWeighted', 'http://purl.org/nidash/nidm#T1Weighted'],
+    image_modals: [
+      'http://purl.org/nidash/nidm#FlowWeighted',
+      'http://purl.org/nidash/nidm#T1Weighted',
+    ],
   },
-
 ];
 
 export const nodeOptions = [
   {
-    "NodeName": "OpenNeuro",
-    "ApiURL": "https://someurl/"
+    NodeName: 'OpenNeuro',
+    ApiURL: 'https://someurl/',
   },
   {
-    "NodeName": "Quebec Parkinson Network",
-    "ApiURL": "http://anotherurl/"
-  }
-]
+    NodeName: 'Quebec Parkinson Network',
+    ApiURL: 'http://anotherurl/',
+  },
+];
 
 export const emptyDiagnosisOptions = {
   'nb:Diagnosis': [],

cypress/support/commands.ts

@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }

cypress/support/component-index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
+</html>