[ENH] Made dataset name hyperlink to dataset PortalURI (#411)

* Made dataset name hyperlink to dataset `PortalURI` * Updated `ResultCard` component test * Changed hyperlink color and decoration --------- Co-authored-by: Sebastian Urchs <[email protected]>
neurobagel · Dec 20, 2024 · 96c027f · 96c027f
1 parent fef3cb4
commit 96c027f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/cypress/component/ResultCard.cy.tsx b/cypress/component/ResultCard.cy.tsx
@@ -4,6 +4,7 @@ const props = {
   nodeName: 'some node name',
   datasetUUID: 'some uuid',
   datasetName: 'some dataset name',
+  datasetPortalURI: 'some portal uri',
   datasetTotalSubjects: 10,
   numMatchingSubjects: 5,
   imageModals: [
@@ -27,6 +28,7 @@ describe('ResultCard', () => {
         nodeName={props.nodeName}
         datasetUUID={props.datasetUUID}
         datasetName={props.datasetName}
+        datasetPortalURI={props.datasetPortalURI}
         datasetTotalSubjects={props.datasetTotalSubjects}
         numMatchingSubjects={props.numMatchingSubjects}
         imageModals={props.imageModals}
@@ -61,6 +63,7 @@ describe('ResultCard', () => {
         nodeName={props.nodeName}
         datasetUUID={props.datasetUUID}
         datasetName={props.datasetName}
+        datasetPortalURI={props.datasetPortalURI}
         datasetTotalSubjects={props.datasetTotalSubjects}
         numMatchingSubjects={props.numMatchingSubjects}
         imageModals={props.imageModals}
@@ -78,6 +81,7 @@ describe('ResultCard', () => {
         nodeName={props.nodeName}
         datasetUUID={props.datasetUUID}
         datasetName={props.datasetName}
+        datasetPortalURI={props.datasetPortalURI}
         datasetTotalSubjects={props.datasetTotalSubjects}
         numMatchingSubjects={props.numMatchingSubjects}
         imageModals={props.imageModals}

diff --git a/src/components/ResultCard.tsx b/src/components/ResultCard.tsx
@@ -14,6 +14,7 @@ const ResultCard = memo(
     nodeName,
     datasetUUID,
     datasetName,
+    datasetPortalURI,
     datasetTotalSubjects,
     numMatchingSubjects,
     imageModals,
@@ -24,6 +25,7 @@ const ResultCard = memo(
     nodeName: string;
     datasetName: string;
     datasetUUID: string;
+    datasetPortalURI: string;
     datasetTotalSubjects: number;
     numMatchingSubjects: number;
     imageModals: string[];
@@ -45,7 +47,26 @@ const ResultCard = memo(
               />
             </div>
             <div>
-              <Typography variant="h5">{datasetName}</Typography>
+              {datasetPortalURI ? (
+                <a
+                  href={datasetPortalURI}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ textDecoration: 'none' }}
+                >
+                  <Typography
+                    variant="h5"
+                    sx={{
+                      color: 'primary.main',
+                    }}
+                  >
+                    {datasetName}
+                  </Typography>
+                </a>
+              ) : (
+                <Typography variant="h5">{datasetName}</Typography>
+              )}
+
               <Typography variant="subtitle1">from {nodeName}</Typography>
               <Typography variant="subtitle2">
                 {numMatchingSubjects} subjects match / {datasetTotalSubjects} total subjects

diff --git a/src/components/ResultContainer.tsx b/src/components/ResultContainer.tsx
@@ -318,6 +318,7 @@ function ResultContainer({
               nodeName={item.node_name}
               datasetUUID={item.dataset_uuid}
               datasetName={item.dataset_name}
+              datasetPortalURI={item.dataset_portal_uri}
               datasetTotalSubjects={item.dataset_total_subjects}
               numMatchingSubjects={item.num_matching_subjects}
               imageModals={item.image_modals}