[FIX] Handle unknown imageing modalities gracefully (#644)

* Fixed the runtime error that broke the app when unknown imaging modalities are present in the result

* Fixed component test

* Updated test comment

Author: rmanaem

cypress/component/ResultContainer.cy.tsx

@@ -1,5 +1,5 @@
 import ResultContainer from '../../src/components/ResultContainer';
-import { protectedResponse2 } from '../fixtures/mocked-responses';
+import { protectedResponse2, responseWithUnknownModality } from '../fixtures/mocked-responses';
 
 describe('ResultContainer', () => {
   it('Displays a set of Result Cards, select all checkbox, a disabled download result button, summary stats, and how to get data dialog button', () => {
@@ -58,4 +58,19 @@ describe('ResultContainer', () => {
       .should('be.visible')
       .should('contain', "Click 'Submit Query' for results");
   });
+  it('Handles unknown modalities gracefully without breaking', () => {
+    cy.mount(
+      <ResultContainer
+        response={responseWithUnknownModality}
+        assessmentOptions={[]}
+        diagnosisOptions={[]}
+      />
+    );
+    cy.get('[data-cy="card-https://someportal.org/datasets/ds0003"]').should('be.visible');
+    cy.get('[data-cy="modality-buttons"]').within(() => {
+      // Should show only one button (T1) button, and not the unknown modality
+      cy.contains('button', 'T1').should('be.visible');
+      cy.get('button').should('have.length', 1);
+    });
+  });
 });

cypress/fixtures/mocked-responses.ts

@@ -346,3 +346,25 @@ export const failedPipelineVersionOptions = {
     },
   ],
 };
+
+export const datasetWithUnknownModality = {
+  records_protected: false,
+  node_name: 'some-node-name',
+  dataset_uuid: 'https://someportal.org/datasets/ds0003',
+  dataset_name: 'dataset with unknown modality',
+  dataset_portal_uri: 'https://example.com/dataset',
+  dataset_total_subjects: 50,
+  num_matching_subjects: 5,
+  subject_data: 'protected',
+  image_modals: [
+    'http://purl.org/nidash/nidm#T1Weighted',
+    'http://purl.org/nidash/nidm#UnknownModality',
+  ],
+  available_pipelines: {},
+};
+
+export const responseWithUnknownModality = {
+  errors: [],
+  responses: [datasetWithUnknownModality],
+  nodes_response_status: 'success',
+};

src/components/ResultCard.tsx

@@ -125,24 +125,27 @@ const ResultCard = memo(
               </Tooltip>
             )}
           </div>
-          <div className="justify-self-end">
+          <div className="justify-self-end" data-cy="modality-buttons">
             <ButtonGroup>
-              {imageModals.sort().map((modal) => (
-                <Button
-                  key={modal}
-                  variant="contained"
-                  disableElevation
-                  sx={{
-                    backgroundColor: modalities[modal].bgColor,
-                    '&:hover': {
+              {imageModals
+                .sort()
+                .filter((modal) => Object.keys(modalities).includes(modal))
+                .map((modal) => (
+                  <Button
+                    key={modal}
+                    variant="contained"
+                    disableElevation
+                    sx={{
                       backgroundColor: modalities[modal].bgColor,
-                      cursor: 'default',
-                    },
-                  }}
-                >
-                  {modalities[modal].name}
-                </Button>
-              ))}
+                      '&:hover': {
+                        backgroundColor: modalities[modal].bgColor,
+                        cursor: 'default',
+                      },
+                    }}
+                  >
+                    {modalities[modal].name}
+                  </Button>
+                ))}
             </ButtonGroup>
           </div>
         </div>